问题描述
一、jquery 准备函数
概念：是在页面加载完成之后的执行(只是页面的雏形,不包括音视频)
jQuery符号：$
jquery中准备函数 与js中准备函数的比较：
A.js中的准备函数只执行一次且只加载一个，jquery中的准备函数定义多个的时候 会执行多次
B. jquery中准备函数是优先与js先执行
C.jquery中的准备函数有多种写法
a. $(document).read(function(){
执行操作;
});
b.$(function(){
执行操作;
});
二、js与jquery之间相互转换
概念：jquery是对js的一个简单的封装 jquery与js不能相互调用其方法 必须进行转化之后才能使用
js ==>转换为jquery：
语法: $(js对象) 例如:$(tv_class);
jquery对象转换为js对象：
a.jquery对象[0]
b.jquery对象.get(0)
三、jquery三种基本选择器
测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" ></script>
</head>
<body>
<input type="text" id="tv_tx"/>
<input type="checkbox" class="tv_che" value="抽烟"/>抽烟
<input type="checkbox" class="tv_che" value="喝酒"/>喝酒
<input type="checkbox" class="tv_che" value="烫头"/>烫头
<input type="button" onclick="show01()" value="点击1"/>
<input type="button" onclick="show02()" value="点击2"/>
<input type="button" onclick="show03()" value="点击3"/>
<script>
function show01(){
//根据id获取
alert($("#tv_tx").val());
}
function show02(){
//根据类获取
var arrays = $(".tv_che");
for(var i=0;i<arrays.length;i++){
alert(arrays[i].value);
}
}
function show03(){
//根据标签名获取
var arrays = $("input");
for(var i=0;i<arrays.length;i++){
alert(arrays[i].value);
}
}
</script>
</body>
</html>
四、jquery中的事件
主要事件：
A.click 点击事件
B.dblclick 双击事件
C.blur 失去焦点
D.focus 获取焦点
E.hover() 移入移出
注意点：
jquery中事件没有前缀on
五、jquery 动画
显示隐藏 效果：
淡入淡出效果：
滑动效果：
测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" ></script>
<style>
div{
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id="tv_div"></div>
<input type="button" value="隐藏" id="tv_btn1"/>
<input type="button" value="显示" id="tv_btn2"/>
<input type="button" value="隐藏或显示" id="tv_btn3"/>
<script>
$("#tv_btn1").click(function(){
//普通隐藏
//$("#tv_div").hide(1000,alert("确定隐藏"));
//淡入隐藏
// $("#tv_div").fadeOut(1000,alert("淡入隐藏"));
//向上隐藏
$("#tv_div").slideUp(1000,alert("向上隐藏"));
});
$("#tv_btn2").click(function(){
//普通显示
//$("#tv_div").show(1000,alert("确定显示"));
//淡出显示
// $("#tv_div").fadeIn(1000,alert("淡出显示"));
//向下显示
$("#tv_div").slideDown(1000,alert("向下显示"));
});
$("#tv_btn3").click(function(){
//普通隐藏或显示
//$("#tv_div").toggle(1000);
//淡入隐藏或淡出显示
// $("#tv_div").fadeToggle(1000);
//向上隐藏或者向下显示
$("#tv_div").slideToggle(1000);
});
</script>
</body>
</html>
自定义动画：
语法:
$("选择器的名称").animate({ 属性:属性值, 属性:属性值 });
注意点：自定义动画必须加上定位
测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div></div>
<input type="button" value="点击" id="tv_btn" />
<script>
$("#tv_btn").click(function(){
$("div").animate({
// left:"200px",
// opacity:'0.5',
// width:"+=150px",
height:"toggle",
width:'toggle'
})
})
</script>
</body>
</html>
六、Jquery 操作DOM
测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div></div>
<input type="button" id="tv_btn1"/ value="点击1">
<input type="button" id="tv_btn2" value="点击2"/>
<input type="button" id="tv_btn3" value="点击3"/>
<input type="button" id="tv_btn4" value="点击4"/>
<script type="text/javascript">
//通过html方法设置文本内容 在浏览器中不显示标签
$("#tv_btn1").click(function(){
$("div").html("<h3>HTML</h3>");
});
//通过Text方法设置文本内容 在浏览器中显示标签
$("#tv_btn2").click(function(){
$("div").text("<h4>Text</h4>");
});
//获取文本内容
$("#tv_btn3").click(function(){
alert($("div").html());
});
//获取文本内容
$("#tv_btn4").click(function(){
alert($("div").text());
})
</script>
</body>
</html>
七、Jquery追加元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>班长喜欢洗脚</p>
<input type="button" value="点击01" id="tv_btn1"/>
<input type="button" value="点击02" id="tv_btn2"/>
<input type="button" value="点击03" id="tv_btn3"/>
<input type="button" value="点击04" id="tv_btn4"/>
<script>
$("#tv_btn1").click(function(){
//右添加
$("p").append("666");
});
$("#tv_btn2").click(function(){
//左添加
$("p").prepend("777");
});
$("#tv_btn3").click(function(){
//上添加
$("p").before("888");
});
$("#tv_btn4").click(function(){
//下添加
$("p").after("999");
})
</script>
</body>
</html>八、jquery 删除元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<style>
div{
border: solid 1px red;
}
</style>
</head>
<body>
<div>
<p>777</p>
<p>888</p>
<p>999</p>
<p>666</p>
</div>
<input type="button" value="点击1" id="tv_btn1"/>
<input type="button" value="点击2" id="tv_btn2"/>
<script>
$("#tv_btn1").click(function(){
//全删除
$("div").remove();
});
$("#tv_btn2").click(function(){
//只删除子标签
$("div").empty();
})
</script>
</body>
</html>九、jquery 操作class 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<style>
.cl1{
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div></div>
<input type="button" value="点击1" id="tv_btn1"/>
<input type="button" value="点击2" id="tv_btn2"/>
<input type="button" value="点击3" id="tv_btn3"/>
<script>
$("#tv_btn1").click(function(){
//添加class样式
$("div").addClass("cl1");
});
$("#tv_btn2").click(function(){
//删除class样式
$("div").removeClass("cl1");
});
$("#tv_btn3").click(function(){
//添加class样式或者删除
$("div").toggleClass("cl1");
});
</script>
</body>
</html>十、jquery操作css样式
语法：$("选择器名称").css({"属性":"属性值","属性":"属性值"})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>班长洗脚</p>
<input type="button" value="点击1" id="tv_btn1"/>
<script>
$("#tv_btn1").click(function(){
//增加css样式
$("p").css({"font-size":"100px","color":"red"});
})
</script>
</body>
</html>十一、jquery 中常见的选择器
过滤选择器：
测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>000</div>
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>
<div>666</div>
<div>777</div>
<div>888</div>
<div>999</div>
<script type="text/javascript">
//获取第一个标签
//alert($("div:first").html());
//获取最后一个标签
// alert($("div:last").html());
//获取偶数行标签
// var arrays = $("div:even");
// $(arrays).each(function(i,t){
// alert(t.innerHTML);
// })
//获取奇数行标签
// var arrays = $("div:odd");
// $(arrays).each(function(i,t){
// alert(t.innerHTML);
// })
//获取特定行标签
//alert($("div:eq(3)").html());
//获取特定行后的标签
// var arrays = $("div:gt(3)");
// $(arrays).each(function(i,t){
// alert(t.innerHTML);
// })
//获取特定行前的标签
// var arrays = $("div:lt(3)");
// $(arrays).each(function(i,t){
// alert(t.innerHTML);
// })
//获取反添加的标签
var arrays = $("div:not(div:eq(3))");
$(arrays).each(function(i,t){
alert(t.innerHTML);
})
</script>
</body>
</html>案例：
需求：实现表格的隔行变色
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<style>
.cl1{
background-color: rebeccapurple;
}
</style>
</head>
<body>
<table border="1px" align="center" cellspacing="0px" cellpadding="0px" width="80%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
<tr>
<td>1001</td>
<td>班长</td>
<td>洗脚</td>
</tr>
<tr>
<td>1002</td>
<td>阿甘</td>
<td>喷射</td>
</tr>
<tr>
<td>1003</td>
<td>黑福</td>
<td>按摩</td>
</tr>
</table>
<script>
//表格隔行变色
// $(function(){
// $("tr:odd").css({"background-color":"red"});
// });
//鼠标移入变色
$("tr").hover(function(){
$(this).addClass("cl1");
},function(){
$(this).removeClass("cl1");
});
</script>
</body>
</html>案例：
需求 ： 倒计时按钮
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="button" />
<script>
$(function(){
$("input").val("请仔细阅读");
$("input").prop("disabled",true);
});
var num=5;
function show(){
if(num>0){
$("input").val("请仔细阅读（"+num+")秒");
num--;
}else{
$("input").val("登录");
$("input").prop("disabled",false);
}
}
setInterval("show()",1000);
</script>
</body>
</html>层级选择器：
测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="tv_div">
<div>000</div>
<div>111</div>
<span>222<div>333</div></span>
<div>444</div>
<div>555<span>666</span></div>
<div>777</div>
</div>
<!-- 第一个兄弟节点 -->
<div>888</div>
<div>999</div>
<script>
//获取子节点 包括孙子节点
// var arrays = $("#tv_div div");
// $(arrays).each(function(i,t){
// alert(t.innerHTML);
// })
//获取子节点
// var arrays = $("#tv_div > div");
// $(arrays).each(function(i,t){
// alert(t.innerHTML);
// })
//获取第一个兄弟div节点
// alert($("#tv_div + div").html());
//获取所有的兄弟节点
var arrays = $("#tv_div ~ div");
$(arrays).each(function(i,t){
alert(t.innerHTML);
})
</script>
</body>
</html>属性选择器：
测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a href="#">点击1</a>
<a href="abc.html">点击2</a>
<a href="wcde.html">点击3</a>
<a href="#">点击4</a>
<a href="abcc.html">点击5</a>
<a href="wc.html">点击6</a>
<script type="text/javascript">
//获取所有带有href属性的标签
// var arrays = $("[href]");
// $(arrays).each(function(i,t){
// alert(t.innerHTML);
// })
//获取href为空的标签
// var arrays = $("[href='#']");
// $(arrays).each(function(i,t){
// alert(t.innerHTML);
// })
//获取href不为空的标签
// var arrays = $("[href!='#']");
// $(arrays).each(function(i,t){
// alert(t.innerHTML);
// })
//获取href以.html结尾的标签
// var arrays = $("[href$='.html']");
// $(arrays).each(function(i,t){
// alert(t.innerHTML);
// })
//获取href以abc开头的标签
var arrays = $("[href^='abc']");
$(arrays).each(function(i,t){
alert(t.innerHTML);
})
</script>
</body>
</html>十二、Validate框架 参考文档
案例：
需求：表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages_zh.js" type="text/javascript" charset="utf-8"></script>
<style>
label{
color: red;
}
</style>
</head>
<body>
<form id="ff" action="#" method="GET">
<table border="1px" align="center" width="80%" cellspacing="0px" cellpadding="0px" >
<tr>
<td colspan="2">验证表单</td>
</tr>
<tr>
<td>请输入用户名(必填项，长度为6~10)</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>请输入邮箱</td>
<td><input type="email" name="email"/></td>
</tr>
<tr>
<td>请输入出生日期</td>
<td><input type="text" name="brithday"/></td>
</tr>
<tr>
<td>薪资</td>
<td><input type="text" name="sal"/></td>
</tr>
<tr>
<td>工作时长(6~8小时)</td>
<td><input type="text" name="workTime"/></td>
</tr>
<tr>
<td>密码(必填项)</td>
<td><input type="password" name="pwd" id="pwd"/></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repwd"/></td>
</tr>
<tr>
<td colspan="2" style="float: right;"><input type="submit" value="注册"/></td>
</tr>
</table>
</form>
<script>
$(function(){
$("#ff").validate({
rules:{
username:{
required:true,
range:[6,10]
},
email:{
email:true
},
brithday:{
dateISO:true
},
sal:{
number:true
},
workTime:{
range:[6,10]
},
pwd:{
required:true
},
repwd:{
equalTo:pwd
}
},
messages:{
username:{
required:"亲，请输入正确的用户名!!!"
},
workTime:{
range:"注意摸鱼!!！"
}
}
});
});
</script>
</body>
</html>十三、jquery与js的遍历方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
var arrays = ["班长","黑福","阿甘","足浴"];
//第一种 普通for循环 重点
for(var i=0;i<arrays.length;i++){
console.log(arrays[i]);
}
//第二种 增强for循环 不推荐
for(var i in arrays){
console.log(arrays[i]);
}
//第三种 jQuery方式循环 重点
$(arrays).each(function(i,temp){
console.log(i+temp);
})
</script>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）