jQuery基础知识整理
jQuery简介
什么是jQuery(了解)
jQuery简化JS代码
jQuery的核心思想：“写的更少，但做的更多”（write less,do more）
jQuery本质就是一个包含了很多函数的JS文件，如果要在某一个html中使用JS文件中的函数，就必须得将JS文件引入到HTML中。
<!-- 导入Jquery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
案例：Hello world!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入Jquery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//$(function(){})相当于window.onload,代码写在{}之间$(function(){//1.选取button: $ ( "button")//2.为button添加onclick 响应函数: $("button").click(function(){})//代码编写在function的{}中$("button").click(function(){//3.弹出hello worldalert("Hello World");})})
</script>
</head>
<body><button>Click ME</button>
</body>
</html>
jQuery对象和DOM对象
（1）jQuery对象转为DOM对象：可以通过数组下表转为Dom对象
（2）DOM对象转为jQuery对象：使用$()进行包装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入Jquery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//$(function(){})相当于window.onload,代码写在{}之间$(function(){//1.选取button: $ ( "button")//2.为button添加onclick 响应函数: $("button").click(function(){})//代码编写在function的{}中$("button").click(function(){//弹出helloworldalert("helloworld");//弹出当前button的文本信息alert(this.firstChild.nodeValue);//js方式alert($(this).text());//jQuery方式//jQuery和DOM对象//1.由jQuery对象转为DOM对象//1.1获取一个jQuery
// var $btn=$("button");//1.2jQuery对象是一个数组
// alert($btn.length);//1.3可以通过数组下表转为Dom对象
// alert($btn[0].firstChild.nodeValue);//2.Dom-->jquery//2.1选取一个Dom对象var btn=document.getElementById("btn");//2.2把dom对象转成一个jQuery对象：使用$()进行包装alert($(btn).text());})})
</script>
</head>
<body><button id="btn">Click ME</button><br><button>Click ME2</button>
</body>
</html>
jQuery的优势(了解)
(1) 可以极大的简化JS代码
(2) 可以像CSS选择器一样获取html元素
css中获取所有的div,给div添加样式:
div{ css属性... }
jQuery中获取所有div,给div添加边框样式:
$("div").css("border", "2px solid red");
JS获取id为div1的元素: document.getElementById("div1")
jQuery获取id为div1的元素: $("#div1")
(3) 可以通过修改css属性控制页面的效果
(4) 可以兼容常用的浏览器
比如: JS中的innerText属性、removeNode()函数、replaceNode( )函数 这些函数在某些浏览器中是无法使用的。
jQuery中提供了相应的函数（ text函数、remove函数、replaceWith函数 ）
常用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等
jQuery引入
jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样。
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败，如下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WdcyZHJu-1593958442665)(D:/Java_tedu/资料_02/第二阶段笔记/JAVAWEB-NOTE02.assets/image-20200217103533313.png)]
文档就绪事件函数
<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>//1.获取id为demo的h1元素var h1 = document.getElementById( "demo" );//2.获取h1元素中的内容( innerHTML )alert( h1.innerHTML );
</script>
</head>
<body><h1 id="demo">jQuery的引入示例...</h1>
</body>
问题描述：上面的代码在执行时，会报一个错误：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wLtIbRPK-1593958442668)(D:/Java_tedu/资料_02/第二阶段笔记/JAVAWEB-NOTE02.assets/image-20200217105525351.png)]
原因描述：在执行获取id为demo的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。
解决方式一：
将script标签移到body内部，也就是h1元素的后面
这样浏览器在加载时，会先加载h1元素，再执行获取h1元素的代码，由于在获取h1元素之前，h1元素已经被浏览器加载过了，所以后面再获取就能够获取到！
代码示例：
<body><h1 id="demo">jQuery的引入示例...</h1><script>//1.获取id为demo的h1元素var h1 = document.getElementById( "demo" );//2.获取h1元素中的内容( innerHTML )alert( h1.innerHTML );</script>
</body>
解决方式二：
将获取元素的代码放在文档就绪事件函数中，文档就绪事件函数会在浏览器加载完所有的html元素后（也就是加载完最后一个html元素时）会立即执行。
由于整个html网页都被加载了，h1元素肯定也被加载了，此时再获取h1元素就一定能获取到。
<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>$(function(){//1.获取id为demo的h1元素var h1 = document.getElementById( "demo" );//2.获取h1元素中的内容( innerHTML )alert( h1.innerHTML );});
</script>
</head>
<body><h1 id="demo">jQuery的引入示例...</h1>
</body>
解决方式三：
将获取元素的代码放在一个自定义的函数中，并将该函数绑定在h1元素的点击事件上，当我们点击h1元素时会执行自定义的函数，函数执行时才获取h1元素，此时就能够获取到h1元素。
<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>function fn1(){//1.获取id为demo的h1元素var h1 = document.getElementById( "demo" );//2.获取h1元素中的内容( innerHTML )alert( h1.innerHTML );}
</script>
</head>
<body><h1 id="demo" onclick="fn1()">jQuery的引入示例...</h1>
</body>
总结：什么时候该使用文档就绪事件函数?
如果在获取元素时，获取元素的代码执行的时机，比元素本身加载的时间还要早，如果元素还没有加载就获取，必然是获取不到的。
可以将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到！
jQuery提供的文档就绪事件函数（简写形式）：
<script>$(function(){//在浏览器加载完整个html网页后立即执行});
</script>
其完整写法为：
<script>$(document).ready(function(){//在浏览器加载完整个html网页后立即执行})
</script>
JS也为我们提供了文档就绪事件函数，其写法为：
<script>window.onload = function(){//在浏览器加载完整个html网页后立即执行}
</script>
匿名函数
jQuery选择器(重点掌握)
基本选择器
(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素(3)id选择器
$("#one") -- 选中id为one的元素(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;
}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;
}div.hide {display: none;
}
</style>
<!-- 导入Jquery库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">$(function(){//1.使用id选择器选择id=btn1的元素: $ (”#btn1")//2.为选择的jQuery对象添加onclick响应函数;// $("#btn1").click(function(){})， 响应函数的代码//写在function(){}的中括号中。$("#btn1").click(function(){$("#one").css("background","#ffbbaa");})$("#btn2").click(function(){$(".mini").css("background","#ffbbaa");})$("#btn3").click(function(){$("div").css("background","#ffbbaa");})$("#btn4").click(function(){$("*").css("background","#ffbbaa");})$("#btn5").click(function(){$("span,#two").css("background","#ffbbaa");})
})
</script>
</head>
<body><input type="button" value="选择 id 为 one 的元素" id="btn1" /><input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /><input type="button" value="选择 元素名是 div 的所有元素" id="btn3" /><input type="button" value="选择 所有的元素" id="btn4" /><input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display: none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素^^</span>
</body>
</html>
层级选择器
$("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8KJNbvim-1593958442670)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200628113916270.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;} </style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("body div").css("background","#ffbbaa");})$("#btn2").click(function(){$("body>div").css("background","#ffbbaa");})$("#btn3").click(function(){$("#one").next("div").css("background","#ffbbaa");})$("#btn4").click(function(){$("#two").nextAll("div").css("background","#ffbbaa");})$("#btn5").click(function(){$("#two").siblings("div").css("background","#ffbbaa");})$("#btn6").click(function(){//以下选择器选择的是近邻 #one 的 span 元素, 若该span//和 #one 不相邻, 选择器无效. //$("#one").next("span").css("background","#ffbbaa");$("#one").nextAll("span:first").css("background", "#ffbbaa");})$("#btn7").click(function(){$("#two").prevAll("div").css("background","#ffbbaa");})})</script>
</head>
<body><input type="button" value="选择 body 内的所有 div 元素" id="btn1" /><input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" /><input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /><input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /><input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" /><input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" /><input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素^^</span><span id="span">--span元素--</sp
</body>
</html>
过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.
基本过滤选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bTkrmAMy-1593958442673)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200628140533147.png)]
(1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)(3) 选中第n+1个div元素(n从零开始)
$("div:eq(n)")
$("div").eq(n)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;
}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;
}div.hide {display: none;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">$(function() {function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();$("#btn1").click(function() {$("div:first").css("background", "#ffbbaa");})$("#btn2").click(function() {$("div:last").css("background", "#ffbbaa");})$("#btn3").click(function() {$("div:not(.one)").css("background", "#ffbbaa");})$("#btn4").click(function() {$("div:even").css("background", "#ffbbaa");})$("#btn5").click(function() {$("div:odd").css("background", "#ffbbaa");})$("#btn6").click(function() {$("div:gt(3)").css("background", "#ffbbaa");})$("#btn7").click(function() {$("div:eq(3)").css("background", "#ffbbaa");})$("#btn8").click(function() {$("div:lt(3)").css("background", "#ffbbaa");})$("#btn9").click(function() {$(":header").css("background", "#ffbbaa");})$("#btn10").click(function() {$(":animated").css("background", "#ffbbaa");});$("#btn11").click(function() {$("#two").nextAll("span:first").css("background", "#ffbbaa");})})
</script>
</head>
<body><input type="button" value="选择第一个 div 元素" id="btn1" /><input type="button" value="选择最后一个 div 元素" id="btn2" /><input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" /><input type="button" value="选择索引值为偶数的 div 元素" id="btn4" /><input type="button" value="选择索引值为奇数的 div 元素" id="btn5" /><input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" /><input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" /><input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" /><input type="button" value="选择所有的标题元素" id="btn9" /><input type="button" value="选择当前正在执行动画的所有元素" id="btn10" /><input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" /><h3>基本选择器.</h3><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display: none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素 111^^</span><span id="span">^^span元素 222^^</span><div id="mover">正在执行动画的div元素.</div>
</body>
</html>
内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素以及文本内容上
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-de9NVDYx-1593958442674)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200628145642356.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/style.css"><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;} </style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("div:contains('di')").css("background","#ffbbaa")})$("#btn2").click(function(){$("div:empty").css("background","#ffbbaa")})$("#btn3").click(function(){$("div:has(.mini)").css("background","#ffbbaa")})$("#btn4").click(function(){$("div:parent").css("background","#ffbbaa")})})</script>
</head>
<body><input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" /><input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /><input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" /><input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><div id="mover">正在执行动画的div元素.</div>
</body>
</html>
可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUPQCnyB-1593958442676)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200628154536054.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;
}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;
}div.hide {display: none;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">$(function(){$("#btn1").click(function(){$("div:visible").css("background","#ffbbaa");})$("#btn2").click(function(){//alert($("div:hidden").length);//show(time): 可以使不可见的元素变为可见, time 表示时间, 以//毫秒为单位//jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该//方法的 jQuery 对象: 可以继续调用该对象的其他方法.$("div:hidden").show(2000).css("background","#ffbbaa");})$("#btn3").click(function(){//val() 方法可以返回某一个表单元素的 value 属性值.alert($("input:hidden").val());// alert($("input:hidden").attr("value"));//同上})})
</script>
</head>
<body><input type="button" value="选取所有可见的 div 元素" id="btn1"><input type="button" value="选择所有不可见的 div 元素" id="btn2" /><input type="button" value="选择所有不可见的 input 元素" id="btn3" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display: none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div <input type="hidden" value="123456789000"size="8"></div><div id="mover">正在执行动画的div元素.</div>
</body>
</html>
属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OUZzWHSE-1593958442676)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200628160929815.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/style.css"><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;} </style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("div[title]").css("background","#ffbbaa");})$("#btn2").click(function(){$("div[title='test']").css("background","#ffbbaa");})$("#btn3").click(function(){$("div[title!='test']").css("background","#ffbbaa");})$("#btn4").click(function(){$("div[title^='te']").css("background","#ffbbaa");})$("#btn5").click(function(){$("div[title$='est']").css("background","#ffbbaa");})$("#btn6").click(function(){$("div[title*='es']").css("background","#ffbbaa");})$("#btn7").click(function(){$("div[id][title*='es']").css("background","#ffbbaa");})$("#btn8").click(function(){$("div[title][title!='test']").css("background","#ffbbaa");})})</script>
</head>
<body><input type="button" value="选取含有 属性title 的div元素." id="btn1"/><input type="button" value="选取 属性title值等于'test'的div元素." id="btn2"/><input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3"/><input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4"/><input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5"/><input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6"/><input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7"/><input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"></div><div id="mover">正在执行动画的div元素.</div>
</body>
</html>
子元素过滤选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gLSYBWGR-1593958442677)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200628163116677.png)]
nth-child() 选择器详解如下：
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;} </style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){//选取子元素, 需要在选择器前添加一个空格.$("div.one :nth-child(2)").css("background","#ffbbaa");})$("#btn2").click(function(){$("div.one :first-child").css("background","#ffbbaa");})$("#btn3").click(function(){$("div.one :last-child").css("background","#ffbbaa");})$("#btn4").click(function(){$("div.one :only-child").css("background","#ffbbaa");})})</script>
</head>
<body><input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/><input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/><input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/><input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"></div><div id="mover">正在执行动画的div元素.</div>
</body>
</html>
表单对象属性过滤选择器
此选择器主要对所选择的表单元素进行过滤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tfosYE5H-1593958442678)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200628172732620.png)]
利用 jQuery 对象的 val() 方法改变表单内可用 元素的值
利用 jQuery 对象的 val() 方法改变表单内不可用 元素的值
利用 jQuery 对象的 length 属性获取多选框选中的个数
利用 jQuery 对象的 text() 方法获取下拉框选中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">$(function(){$("#btn1").click(function(){//使所有的可用的单行文本框的value值变为enabled$(":text:enabled").val("enabled");});$("#btn2").click(function(){$(":text:disabled").val("disabled");})$("#btn3").click(function(){var num=$(":checkbox[name='newsletter']:checked").length;alert(num);})$("#btn4").click(function(){//jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在//得到的 DOM 对象, 而不是一个 jQuery 对象$(":checkbox[name='newsletter']:checked").each(function(){alert(this.value);})})$("#btn5").click(function(){//实际被选择的不是 select, 而是 select 的 option 子节点//所以要加一个 空格.//因为 $("select :selected") 选择的是一个数组//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了. //alert($("select :selected").val());$("select :selected").each(function(){alert(this.value);})})})
</script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3><button id="btn1">对表单内 可用input 赋值操作.</button><button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br /><button id="btn3">获取多选框选中的个数.</button><button id="btn4">获取多选框选中的内容.</button><br /><br /><button id="btn5">获取下拉框选中的内容.</button><br /><br /><form id="form1" action="#"> 可用元素: <input name="add" value="可用文本框1"/><br>不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>可用元素: <input name="che" value="可用文本框2"/><br>不可用元素: <input name="name" disabled="true" value="不可用文本框"/><br><br>多选框: <br><input type="checkbox" name="newsletter" checked="checked" value="test1" />test1<input type="checkbox" name="newsletter" value="test2" />test2<input type="checkbox" name="newsletter" value="test3" />test3<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4<input type="checkbox" name="newsletter" value="test5" />test5<br><br>下拉列表: <br><select name="test" multiple="multiple" style="height: 100px"><option>浙江</option><option selected="selected">辽宁</option><option>北京</option><option selected="selected">天津</option><option>广州</option><option>湖北</option></select></form>
</body>
</html>
表单选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YMmkewm8-1593958442679)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200630085330111.png)]
查找节点
查找属性节点: 通过 jQuery 选择器完成.
操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值
操作文本节点：通过 text() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//测试使用jQuery操作文本节点，属性节点，及查找元素节点$(function(){//1.操作文本节点：通过jQuery对象的text（）方法alert($("#bj").text());$("#bj").text("beijing");//2.操作属性节点：通过jQuery对象的attr()方法//注: 直接操作 value 属性值可以使用更便捷的 val() 方法. alert($(":text[name='username']").attr("value"));$(":text[name='username']").attr("value","jquery");})
</script>
</head>
<body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="jQuery"/></body>
</html>
创建并插入节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kGHDxoud-1593958442680)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200630174414237.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//测试使用jQuery创建节点并插入节点到指定的节点中/*1. 创建节点: 使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽返回对应节点的 jQuery 对象:$("<li id='atjQuery'>jQuery</li>")2. 添加节点:1). appendTo 和 append: 主语和宾语的位置不同: $("<li id='atjQuery'>jQuery</li>").appendTo($("#city")); $("#city").append("<li id='jQuery'>[jQuery]</li>");2). prependTo 和 prepend: 主语和宾语的位置不同: $("<li id='jQuery'>jQuery</li>").prependTo($("#city"));$("#city").prepend("<li id='atjQuery'>[jQuery]</li>"); */$(function(){//1.创建一个<li id='atjQuery'>jQuery</li>//2.并把其加入到#city的子节点
// $("<li id='atjQuery'>jQuery</li>").appendTo($("#city"));
// $("#city").append("<li id='atjQuery'>[jQuery]</li>");//3.加到第一个子节点的前面$("<li id='atjQuery'>jQuery</li>").prependTo($("#city"));$("#city").prepend("<li id='atjQuery'>[jQuery]</li>");alert($("#atjQuery").text());})
</script>
</head>
<body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atjQuery"/>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pCTdqNPD-1593958442681)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200630174455807.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//测试使用jQuery插入节点$(function(){//1.创建一个<li id='atjQuery'>jQuery</li>//2.并把其加入到#bj的后面$("<li id='atjQuery'>jQuery</li>").insertAfter($("#bj"));$("#bj").after("<li id='atjQuery'>[jQuery]</li>");//3.并把其加入到#bj的前面
// $("<li id='atjQuery'>jQuery</li>").insertBefore($("#bj"));$("#bj").before("<li id='atjQuery'>[jQuery]</li>");alert($("#atjQuery").text());})
</script>
</head>
<body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atjQuery"/>
</body>
</html>
删除及清空节点
(1)remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
(2)empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//测试使用jQuery删除节点$(function(){//1. 为 #city 的每一个 li 添加 click 响应函数: 点击时, li 被删除$("#city li").click(function(){//jQuery 对象的 remove() 方法: 将把 jQuery 对象对应的$(this).remove();})//2. 清空 #game 节点//jQuery 对象的 empty() 方法: 清空 jQuery 对象对应的 //DOM 对象的所有的子节点. alert("要清空了");$("#game").empty();})
</script>
</head>
<body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atjQuery"/>
</body>
</html>
克隆和替换节点
（1）clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件
（2）replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
replaceAll(): 颠倒了的 replaceWith() 方法.
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//测试使用jQuery replaceWith(replaceAll)方法：替换节点/*1. replaceWith , replaceAll 一对方法, 可以完成一件事. 就是主语宾语哪个在前面的问题. 2. 以上的两个方法还有移动节点的功能3. 节点互换需要先克隆节点. 4. var $rl = $("#rl").replaceWith($bj2);*/$(function(){//1.创建一个<li>jQuery</li>节点，替换#city的最后一个li子节点$("<li>jQuery</li>").replaceAll($("#city li:last"));//2.创建一个<li>[jQuery]</li>节点,//替换#city的第二个li子节点$("#city li:eq(1)").replaceWith($("<li>[jQuery]</li>"));//3.互换以下两个节点：#rl和#bj,还有移动的功能
// $("#bj").replaceWith($("#rl"));//节点互换需要先克隆节点var $bj2=$("#bj").clone(true);var $rl=$("#rl").replaceWith($bj2);$("#bj").replaceWith($rl);})
</script>
</head>
<body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atjQuery"/>
</body>
</html>
包裹节点
（1）wrap(): 将指定节点用其他标记包裹起来. 该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义.
（2）wrapAll(): 将所有匹配的元素用一个元素来包裹. 而 wrap() 方法是将所有的元素进行单独包裹.
（3）wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//测试使用jQuery wrap,wrapAll,wrapInner$(function(){//包装 li 本身$("#city li").wrap("<font color='red'></font>");//包装所有的 li$("#game li").wrapAll("<font color='red'></font>");//包装 li 里边的文字.$("#language li").wrapInner("<font color='red'></font>");})
</script>
</head>
<body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><p>你喜欢哪种语言?</p><ul id="language"><li >C</li><li>Java</li><li>.Net</li><li>PHP</li></ul>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atjQuery"/>
</body>
</html>
html()方法
读取和设置某个元素中的 HTML 内容: html() . 该方法可以用于 XHTML, 但不能用于 XML 文档
读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//测试使用html方法$(function(){//读alert($("#city").html());//写$("#city").html("<li id='atjQuery'>jQuery</li>");})
</script>
</head>
<body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><p>你喜欢哪种语言?</p><ul id="language"><li >C</li><li>Java</li><li>.Net</li><li>PHP</li></ul>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atjQuery"/>
</body>
</html>
val()方法
读取和设置某个元素中的值: val() — 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">$(function(){//1.为#address添加focus（获取焦点），blur（失去焦点）响应函数
// $("#address").focus(function(){$(":text").focus(function(){//2.当获取焦点时,若#address种是默认值（defaultValue属性，改属性是DOM对象的属性），就使其值设置为“”var val=$(this).val();if(val==this.defaultValue){$(this).val("");}}).blur(function(){//3.失去焦点时，若#address的值在去除前后空格后等于“”//则为其恢复默认值var val=this.value;if($.trim(val)==""){this.value=this.defaultValue;}})$(":button:eq(1)").click(function(){$("#single").val("选择3号");});$(":button:eq(2)").click(function(){$("#multiple").val(["选择2号","选择4号"]);});$(":button:eq(3)").click(function(){$(":checkbox[name='c']").val(["check2","check4"]);});$(":button:eq(4)").click(function(){//即便是为一组radio赋值，val参数中也应该使用数组//使用一个值不起作用$(":radio[name='r']").val(["radio2"]);});$(":button:eq(5)").click(function(){//val()可以直接获取select的被选择的值alert($("#single").val());alert($("#multiple").val());//val不能直接获取checkbox被选择的值//若直接获取，只能得到第一个被选择的值//因为$(":checkbox[name='c']:checked"得到的是一个数组，而使用val()方法只能获取数组元素的第一个值//若希望打印被选择的所有值，需要使用each方法遍历 // alert($(":checkbox[name='c']:checked").val());$(":checkbox[name='c']:checked").each(function(){alert($(this).val());})//而radio被选择的只有一个值，所以可以直接使用val（）方法alert($(":radio[name='r']:checked").val());});})
</script>
</head>
<body><input type="text" id="address" value="请输入邮箱地址"><br><input type="text" id="password" value="请输入邮箱密码"><br><input type="button" value="登录"><br><br><br><input type="button" value="使单选下拉框的'选择3号'被选中"/><input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br><input type="button" value="使多选框的'多选2'和'多选4'被选中"/><input type="button" value="使单选框的'单选2'被选中"/><br><input type="button" value="打印已经被选中的值"><br><br/><select id="single"><option>选择1号</option><option>选择2号</option><option>选择3号</option></select><select id="multiple" multiple="multiple" style="height:120px;"><option selected="selected">选择1号</option><option>选择2号</option><option>选择3号</option><option>选择4号</option><option selected="selected">选择5号</option></select><br/><br/><input type="checkbox" name="c" value="check1"/> 多选1<input type="checkbox" name="c" value="check2"/> 多选2<input type="checkbox" name="c" value="check3"/> 多选3<input type="checkbox" name="c" value="check4"/> 多选4<br/><input type="radio" name="r" value="radio1"/> 单选1<input type="radio" name="r" value="radio2"/> 单选2<input type="radio" name="r" value="radio3"/> 单选3
</body>
</html>
CSS DOM操作
（1）获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
（2）追加样式: addClass()
（3）移除样式: removeClass() — 从匹配的元素中删除全部或指定的 class
（4）切换样式: toggleClass() — 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
（5）判断是否含有某个样式: hasClass() — 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
（6）取和设置元素的样式属性: css()
（7）获取和设置元素透明度: opacity 属性
（8）获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);
（9）获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">*{ margin:0; padding:0;}body {font-size:12px;text-align:center;}a { color:#04D; text-decoration:none;}a:hover { color:#F50; text-decoration:underline;}.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}.SubCategoryBox ul { list-style:none;}.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}.showmore { clear:both; text-align:center;padding-top:10px;}.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}.promoted a { color:#F50;}</style><script type="text/javascript" src="scripts/jquery-1.3.1.js"></script><script type="text/javascript">$(function(){//测试 jQuery 样式相关的方法. //1. hasClass(): 某元素是否有指定的样式alert($("div:first").hasClass("SubCategoryBox")); //true//2. 移除样式$("div:first").removeClass("SubCategoryBox");alert($("div:first").hasClass("SubCategoryBox"));//false//3. 添加样式$("div:first").addClass("SubCategoryBox");//4. 切换样式: 存在, 则去除; 没有, 则添加. $(".showmore").click(function(){$("div:first").toggleClass("SubCategoryBox");//取消链接的默认行为return false;});//5. 获取和设置元素透明度: opacity 属性alert($("div:first").css("opacity"));$("div:first").css("opacity", 0.5);//6. width 和 heightalert($("div:first").width());alert($("div:first").height());$("div:first").width(400);$("div:first").height(80);//7. 获取元素在当前视窗中的相对位移: offset(). //其返回对象包含了两个属性: top, left. 该方法只对可见元素有效alert($("div:first").offset().top);alert($("div:first").offset().left);});</script></head><body><div class="SubCategoryBox"><ul><li ><a href="#">佳能</a><i>(30440) </i></li><li ><a href="#">索尼</a><i>(27220) </i></li><li ><a href="#">三星</a><i>(20808) </i></li><li ><a href="#">尼康</a><i>(17821) </i></li><li ><a href="#">松下</a><i>(12289) </i></li><li ><a href="#">卡西欧</a><i>(8242) </i></li><li ><a href="#">富士</a><i>(14894) </i></li><li ><a href="#">柯达</a><i>(9520) </i></li><li ><a href="#">宾得</a><i>(2195) </i></li><li ><a href="#">理光</a><i>(4114) </i></li><li ><a href="#">奥林巴斯</a><i>(12205) </i></li><li ><a href="#">明基</a><i>(1466) </i></li><li ><a href="#">爱国者</a><i>(3091) </i></li><li ><a href="#">其它品牌相机</a><i>(7275) </i></li></ul><div class="showmore"><a href="more.html"><span>显示全部品牌</span></a></div></div></body>
</html>
事件处理
加载DOM
在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-97I3QBgF-1593958442683)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200703085714908.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//加载DOM的两种方式：jQuery和window.onload//可以写多个，都会展现$(document).ready(function(){alert("1");})$(function(){alert("2");})//只能写一个，覆盖前面的window.onload=function(){alert("1");}window.onload=function(){alert("2");}
</script>
</head>
<body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><p>你喜欢哪种语言?</p><ul id="language"><li >C</li><li>Java</li><li>.Net</li><li>PHP</li></ul>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atjQuery"/>
</body>
</html>
事件绑定
对匹配的元素进行特定的事件绑定: bind()
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TyBkxmpz-1593958442684)(C:\Users\吴宇伦比的电脑\AppData\Roaming\Typora\typora-user-images\image-20200703201805053.png)hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数.
(2)toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个.
(3)toggle() 的另一个作用: 切换元素的可见状态.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link href="css/style.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//为 .head 添加 Onclick 响应函数: 若 .content 隐藏则显示, 若 .content 显示, 则隐藏$(function(){/*$(".head").click(function(){//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定//的选择器. var flag = $(".content").is(":hidden");if(flag){//show() 方法: 使隐藏的变为显示$(".content").show();}else{$(".content").hide();}});*///bind: 为某 jQuery 对象绑定事件. /*$(".head").bind("click", function(){//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定//的选择器. var flag = $(".content").is(":hidden");if(flag){//show() 方法: 使隐藏的变为显示$(".content").show();}else{$(".content").hide();}});*///mouseover: 鼠标移上去//mouseout: 鼠标移出. /*$(".head").mouseover(function(){$(".content").show();}).mouseout(function(){$(".content").hide();});*///合成事件: hover: 鼠标移上去执行第一个函数, 移出执行第二个函数. /*$(".head").hover(function(){$(".content").show();}, function(){$(".content").hide();});*///合成事件: toggle: 第一次点击执行第一个函数, 第二次点击执行第二个//函数 ... 循环执行. $(".head").toggle(function(){$(".content").show();}, function(){$(".content").hide();});})</script></head><body><div id="panel"><h5 class="head">什么是jQuery?</h5><div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。</div></div></body></html>
事件冒泡
事件会按照 DOM 层次结构像水泡一样不断向上只止顶端
解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.例如超链接、提交按钮等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 13px;line-height: 130%;padding: 60px;}#content{width: 220px;border: 1px solid #0050D0;background: #96E555;}span{width: 200px;margin: 10px;background: #666666;cursor: pointer;color: white;display: block;}p{width: 200px;background: #888;color: white;height: 16px;}</style><script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){//事件的冒泡: 什么是事件的冒泡$("body").click(function(){alert("body click");});$("#content").click(function(){alert("div click");});$("span").click(function(){alert("span click");//如何解决事件的冒泡: 通过在响应函数的结尾返回 false, 可以阻止冒泡. return false;});})</script></head><body><div id="content">外层div元素<span>内层span元素</span>外层div元素</div><div id="msg"></div> <br><br><a href="http://www.hao123.com">WWW.HAO123.COM</a> </body>
</html>事件对象的属性
事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了.
event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 13px;line-height: 130%;padding: 60px;}#content{width: 220px;border: 1px solid #0050D0;background: #96E555;}span{width: 200px;margin: 10px;background: #666666;cursor: pointer;color: white;display: block;}p{width: 200px;background: #888;color: white;height: 16px;}</style><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">/*1. 事件: 当鼠标移动时, 就会触发 mousemove 事件. 2. 如何得到事件对象: 在响应函数中添加一个参数就可以. 3. 事件对象的两个属性: pageX,pageY*/$(function(){//事件的 pageX, pageY 属性$("body").mousemove(function(obj){$("#msg").text("x: " + obj.pageX + ", y: " + obj.pageY);});})</script></head><body><div id="content">外层div元素<span>内层span元素</span>外层div元素</div><div id="msg"></div> <br><br><a href="http://www.hao123.com">WWW.HAO123.COM</a> </body>
</html>
移除事件
移除某按钮上的所有 click 事件: $(“btn”).unbind(“click”)
移除某按钮上的所有事件: $(“btn”).unbind();
one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript">//测试移除事件: 使用 unbind 移除事件. //one(): 只为某一个元素添加一次事件, 事件函数响应后, 将不再被触发响应. $(function(){$("#rl").one("click", function(){alert("红色警戒. ");});$("li:not(#rl)").click(function(){alert(this.firstChild.nodeValue);//对于 #bj 节点, 点击一次后, 就没有 click 响应函数了if(this.id == "bj")$("#bj").unbind("click");});})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><p>你喜欢哪种开发语言?</p><ul id="language"><li>C</li><li>Java</li><li>.NET</li><li>PHP</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="atjQuery"/></body>
</html>
动画
方法一：
hide(): 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css(“display”, “none”);
show(): 将元素的 display 样式改为先前的显示状态.
以上两个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 不会有任何动画. 可以通过制定速度参数使元素动起来.
以上两个方法会同时减少(增大)内容的高度, 宽度和不透明度.
方法二：
fadeIn(), fadeOut(): 只改变元素的透明度. fadeOut() 会在指定的一段时间内降低元素的不透明度, 直到元素完全消失. fadeIn() 则相反.
slideDown(), slideUp(): 只会改变元素的高度. 如果一个元素的 display 属性为 none, 当调用 slideDown() 方法时, 这个元素将由上至下延伸显示. slideUp() 方法正好相反, 元素由下至上缩短隐藏.
方法三：
toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的.
slideToggle(): 通过高度变化来切换匹配元素的可见性.
fadeTo(): 把不透明度以渐近的方式调整到指定的值
(0 – 1 之间).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link href="css/style.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">//演示动画效果: show() 和 hide() 方法中传入毫秒数以达到动画的效果/*$(function(){ $(".head").toggle(function(){$(".content").show(1000);}, function(){$(".content").hide(1000);});})*///只改变高度/*$(function(){ $(".head").toggle(function(){$(".content").slideDown(500);}, function(){$(".content").slideUp(500);});})*///只改变透明度/*$(function(){ $(".head").toggle(function(){$(".content").fadeIn(1000);}, function(){$(".content").fadeOut(1000);});})*///toggle() 可以切换元素的可见状态. //slideToggle(): 通过高度变化来切换匹配元素的可见性//fadeToggle(): 通过透明度来切换元素的可见性.//fadeTo(): 把不透明度以渐近的方式调整到指定的值 (0 – 1 之间). $(function(){ $(".content").show();var i = 1; $(".head").click(function(){//$(".content").toggle();//$(".content").slideToggle();//$(".content").fadeToggle();$(".content").fadeTo("slow", i);i = i - 0.1;});})</script></head><body><div id="panel"><h5 class="head">什么是jQuery?</h5><div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。</div></div></body></html>
综合案例
创建表格元素
练习1：创建单行单列的表格
function createTable1(){//创建一个table元素var $tab = $("<table></table>");//创建一个tr元素var $tr = $("<tr></tr>");//创建一个td元素,并给td添加内容var $td = $("<td></td>");//$td.html("<a href='#'>我是TD元素!</a>");$td.text("<a href='#'>我是TD元素!</a>");//将td元素添加tr元素内部$tr.append( $td );//将tr元素添加的table元素内部$tab.append( $tr );//将table添加body元素内部$("body").append( $tab );//$("body").append("<table><tr><td>我是TD我最牛!</td></tr></table>")
}
练习2.1：创建单行6列的表格
function createTable2(){//创建一个table元素var $tab = $("<table></table>");//创建一个tr元素var $tr = $("<tr></tr>");for(var i=0;i<6;i++){ //控制列数,循环几次就是创建几列//创建一个td元素,并给td添加内容var $td = $("<td></td>");$td.html("我是TD元素!");//将td元素添加tr元素内部$tr.append( $td );}//将tr元素添加的table元素内部$tab.append( $tr );//将table添加body元素内部$("body").append( $tab );
}
练习2.2：创建5行6列的表格
function createTable2(){//创建一个table元素var $tab = $("<table></table>");for(var j=0;j<5;j++){ //控制行数, 循环几次就是创建几行//创建一个tr元素var $tr = $("<tr></tr>");for(var i=0;i<6;i++){ //控制列数,循环几次就是创建几列//创建一个td元素,并给td添加内容var $td = $("<td></td>");$td.html("我是TD元素!");//将td元素添加tr元素内部$tr.append( $td );}//将tr元素添加的table元素内部$tab.append( $tr );}//将table添加body元素内部$("body").append( $tab );
}
练习3：创建指定行和列的表格
function createTable3(){//1.获取用户输入的行数//var rows = document.getElementById("rows").value;var rows = $("#rows").val();//2.获取用户输入的列数//var cols = document.getElementById("cols").value;var cols = $("#cols").val();//创建一个table元素var $tab = $("<table></table>");for(var j=0;j<rows;j++){ //控制行数, 循环几次就是创建几行//创建一个tr元素var $tr = $("<tr></tr>");for(var i=0;i<cols;i++){ //控制列数,循环几次就是创建几列//创建一个td元素,并给td添加内容var $td = $("<td></td>");$td.html("我是TD元素!");//将td元素添加tr元素内部$tr.append( $td );}//将tr元素添加的table元素内部$tab.append( $tr );}//将table添加body元素内部$("body").append( $tab );//创建完表格后, 将上一次输入的行数和列数清空$("#rows").val("");$("#cols").val("");
}
选择器的练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){//1. 点击所有的 p 节点, 能够弹出其对应的文本内容/*1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...});为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个 DOM 对象的数组2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来. 3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val())*/$("p").click(function(){// alert(this.firstChild.nodeValue);alert($(this).text());$(this).text("^^"+$(this).text());//迭代})//2. 使第一个 table 隔行变色$("table:first tr:even").css("background","#ffbbaa");//3. 点击 button, 弹出 checkbox 被选中的个数$("button").click(function(){alert($(":checkbox:checked").length);})
})
</script>
</head>
<body><p>段落1</p><p>段落2</p><p>段落3</p><table><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr></table><br><hr><br><table><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr></table><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><button>您选中的个数</button>
</body>
</html>
重写JS实验之分类添加内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
//需求1:点击submit按钮时，检查是否选择 type,若没有选择给出提示: "请选择类型" ;
//检查文本框中是否有输入( 可以去除前后空格)，若没有输入,则给出提示:“请输入内容“;
//若检查都通过，则在相应的ul节点中添加对应的li节点//需求2:使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
$(function(){function showContent(li){alert($(li).text());}$("li").click(function(){showContent(this);})//1.同JS的响应函数一样，jQuery对象的响应函数若返回false,可以取消指定元素的默认行为//2.val()方法，相当于attr("value"),获取表单元素的value属性值//3.$.trim(str)：可以去除str的前后空格//4.jQuery对象的方法的连缀：调用一个方法的返回值还是调用的对象，于是可以在调用方法的后面依然调用先前的那个对象的其他方法$(":submit").click(function(){var $type=$(":radio[name='type']:checked");if($type.length==0){alert("请选择类型");return false;}var type=$type.val();var $name=$(":text[name='name']");var name=$name.val();//$.trim(str)可以去除str的前后空格name=$.trim(name);$name.val(name);if(name==""){alert("请输入内容");return false;}$("<li>"+name+"</li>").appendTo("#"+type).click(function(){showContent(this);});//取消submit的默认行为return false;})
})
</script></head>
<body><p>喜欢的城市</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>广州</li></ul><br><br><p>喜欢的水果</p><ul id="fruit"><li id="pg">苹果</li><li>桔子</li><li>香蕉</li></ul><br><br><form action="ex-3.html" name="myform"><input type="radio" name="type" value="city">城市 <input type="radio" name="type" value="fruit">水果name: <input type="text" name="name" /> <input type="submit" value="Submit" id="submit" /></form>
</body>
</html>
仿QQ好友列表
/** 通过jQuery实现仿QQ列表好友列表 */
function openDiv(thisobj){ //thisobj是一个js对象 --转成--> jQuery对象//先将其他三个分组关闭( 将其他三个分组内的div设置为隐藏 )$("table span").not(thisobj).next("div").hide(); //css("display", "none")//根据被点击的分组找到分组内的好友列表, 切换好友列表的展示状态$(thisobj).next("div").toggle(); //如果元素显示则切换为隐藏, 如果隐藏则切换为显示
}
模拟员工信息管理系统
练习1：添加员工信息
function addEmp(){//1.获取要添加的员工信息(id, name, email, salary)var id = $("#box1 input[name='id']").val().trim();var name = $("#box1 input[name='name']").val().trim();var email = $("#box1 input[name='email']").val().trim();var salary = $("#box1 input[name='salary']").val().trim();console.log(id+" : "+name+" : "+email+" : "+salary);//2.校验员工信息//2.1.添加的员工信息不能为空!if( id == "" || name == "" || email == "" || salary == "" ){alert( "添加的员工信息不能为空!" );return;}//2.2.添加的员工id不能重复! (id=3)//获取所有的tr元素, 并遍历所有的tr元素var flag = false; //false表示id是不存在的!!!$("table tr").each(function(){ //this(JS对象)表示当前被遍历的元素 // this --转换为jQuery对象--> $( this ) var _id = $(this).find("td:eq(1)").text();//拿着用户输入的id和当前员工的id进行比较if( id == _id ){ //只要有一个相等,就说明id已存在,则停止添加alert("您输入的员工ID已存在, 请重新添加!");flag = true; //true表示id已存在!!//return; 放在这里的return不能终止程序的执行}});if( flag ){ //true表示id已存在!!return;}//3.将员工信息添加到页面上(添加到table中)//>>创建一个tr元素var $tr = $("<tr></tr>");//>>创建5个td元素,并将员工信息添加到td中var $td1 = $("<td><input type='checkbox'/></td>"); //复选框var $td2 = $("<td>"+id+"</td>"); //IDvar $td3 = $("<td>"+name+"</td>"); //namevar $td4 = $("<td>"+email+"</td>"); //emailvar $td5 = $("<td>"+salary+"</td>"); //email//>>将td元素添加到tr中$tr.append( $td1 ).append( $td2 ).append( $td3 ).append( $td4 ).append( $td5 );//>>将tr元素添加到table中$("table").append( $tr );
}
练习2：删除员工信息
function delEmp(){//1.获取所选中员工所在的tr行 (获取所有被选中的复选框)//$("input:checked").parents("tr").remove(); //会连接表头一起删除$("input:checked").parent("td").parent("tr").remove();
}
练习3：修改员工信息（自己完成）
练习4：实现全选或全不选
function checkAll(){//1.获取全选复选框的选中状态( 选中(true)? 没选中(false)? )var isCheck = $("#all").prop("checked"); //true|false//2.获取所有普通复选框, 将全选框的选中状态设置给所有普通复选框$("input[type='checkbox'][id!='all']").prop("checked",isCheck);
}
jQuery总结
html元素操作
1、创建元素
$("<div></div>") -- 创建一个div元素，返回的是一个表示div元素的jQuery对象
$("<div>xxxx</div>") -- 创建一个包含内容的div元素，返回的是一个表示div元素的jQuery对象
2、添加子元素
$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素
3、删除元素
$("div").remove() -- 删除所有的div元素JS删除所有div元素：
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName("div"); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i<len;i++){//通过当前元素的父元素删除当前元素(始终删除第一个)divArr[0].parentNode.removeChild( divArr[0] );
}
4、替换元素
$("div").replaceWith("<p>我是来替换的…</p>")
html元素内容和值的操作
<div>这是一个div11元素<span>这是一个span元素</span>这是一个div1111元素
</div>
<input type="text" name="user"/>
1、html()函数 (类似于js中的innerHTML属性)
– 用于获取或设置元素的内容，比如为div、span、p、h1、table、tr、td等元素设置内容
$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容
2、text()函数 (类似于js中的innerText属性，innerText在部分浏览器中不兼容)
– 用于获取或设置元素的文本内容
$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容
3、val()函数 (类似于js中的value属性)
– 获取或设置表单项元素的value值(input/select/option/textarea)
$("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值
元素属性和css属性操作
<input type=“text” name=“username” id=“user”/>
1、prop()函数 – 用于获取或设置元素的属性值
在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery可以使用attr()函数
$("input[type='checkbox']").prop("checked")
-- 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
-- 设置所匹配的复选框元素为选中状态
2、css()函数 – 用于获取或设置元素的css属性值
$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({"width" : "200px","height" : "150px","border" : "5px solid red","background" : "pink"
}); // 设置id为div1元素的宽度为200px、高度为150px、边框以及背景颜色等样式
其他函数
1、show()/hide()
show() – 设置元素由隐藏变为显示
hide() – 设置元素由显示变为隐藏
$("div").show() -- 设置所有的div元素为显示
等价于:
$("div").css("display", "block");$("div").hide() -- 设置所有的div元素为隐藏
等价于:
$("div").css("display", "none")
2、toggle()/slideToggle()
toggle() – 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏,
否则切换为显示, 切换为显示为下拉状态, 隐藏为收缩状态.
jQuery事件绑定
以点击事件为例，为元素绑定点击事件的方式为:
方式1(js版)：
<script>
function fn(){alert("input按钮被点击了...");
}
</script>
<body><input onclick="fn()" type="button" value=*"点我\~!" /\>
</body>
方式2(js版)：
<script>window.onload = function**(){//获取id为btn的元素var btn = document.getElementById("**btn**");btn.onclick = function(){**alert("input按钮被点击了...");}
}
</script>
<body><input id=*"btn" type="button" value="点我~!" />
</body>
方式3(jQuery版)：
<script>
$(function(){//当点击btn按钮时,触发点击事件执行其中的函数$("#btn").click( **function**(){alert("input按钮被点击了...");});
});
</script>
<body><input id=*"btn" type="button" value="点我~!" /\>
</body>
en;i++){
//通过当前元素的父元素删除当前元素(始终删除第一个)
divArr[0].parentNode.removeChild( divArr[0] );
}
**4、替换元素**```javascript
$("div").replaceWith("<p>我是来替换的…</p>")
html元素内容和值的操作
<div>这是一个div11元素<span>这是一个span元素</span>这是一个div1111元素
</div>
<input type="text" name="user"/>
1、html()函数 (类似于js中的innerHTML属性)
– 用于获取或设置元素的内容，比如为div、span、p、h1、table、tr、td等元素设置内容
$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容
2、text()函数 (类似于js中的innerText属性，innerText在部分浏览器中不兼容)
– 用于获取或设置元素的文本内容
$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容
3、val()函数 (类似于js中的value属性)
– 获取或设置表单项元素的value值(input/select/option/textarea)
$("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值
元素属性和css属性操作
<input type=“text” name=“username” id=“user”/>
1、prop()函数 – 用于获取或设置元素的属性值
在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery可以使用attr()函数
$("input[type='checkbox']").prop("checked")
-- 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
-- 设置所匹配的复选框元素为选中状态
2、css()函数 – 用于获取或设置元素的css属性值
$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({"width" : "200px","height" : "150px","border" : "5px solid red","background" : "pink"
}); // 设置id为div1元素的宽度为200px、高度为150px、边框以及背景颜色等样式
其他函数
1、show()/hide()
show() – 设置元素由隐藏变为显示
hide() – 设置元素由显示变为隐藏
$("div").show() -- 设置所有的div元素为显示
等价于:
$("div").css("display", "block");$("div").hide() -- 设置所有的div元素为隐藏
等价于:
$("div").css("display", "none")
2、toggle()/slideToggle()
toggle() – 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏,
否则切换为显示, 切换为显示为下拉状态, 隐藏为收缩状态.
jQuery事件绑定
以点击事件为例，为元素绑定点击事件的方式为:
方式1(js版)：
<script>
function fn(){alert("input按钮被点击了...");
}
</script>
<body><input onclick="fn()" type="button" value=*"点我\~!" /\>
</body>
方式2(js版)：
<script>window.onload = function**(){//获取id为btn的元素var btn = document.getElementById("**btn**");btn.onclick = function(){**alert("input按钮被点击了...");}
}
</script>
<body><input id=*"btn" type="button" value="点我~!" />
</body>
方式3(jQuery版)：
<script>
$(function(){//当点击btn按钮时,触发点击事件执行其中的函数$("#btn").click( **function**(){alert("input按钮被点击了...");});
});
</script>
<body><input id=*"btn" type="button" value="点我~!" /\>
</body>
