首元素选择器：first 获得选择的元素中的第一个元素
尾元素选择器：last获得选择元素中的最后一个元素
非元素选择器：not(selector) 不包括指定内容的元素
偶数选择器：even偶数，从0开始计数
奇数选择器：odd奇数，从0开始计数
等于索引选择器：eq(index)指定索引元素
大于索引选择器：gt(index) 大于指定索引元素
小于索引选择器：lt(index)小于指定索引元素
标题选择器：header 获得标题(h1-h6)元素，固定写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>基本过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://www.likecs.com/js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <script type="text/javascript"> $(function () { // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"/> $("#b1").click(function(){ $("div:first").css("backgroundColor","red"); }); // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"/> $("#b2").click(function(){ $("div:last").css("backgroundColor","red"); }); // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"/> $("#b3").click(function(){ $("div:not(.one)").css("backgroundColor","red"); }); // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"/> $("#b4").click(function(){ $("div:even").css("backgroundColor","red"); }); // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"/> $("#b5").click(function(){ $("div:odd").css("backgroundColor","red"); }); // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"/> $("#b6").click(function(){ $("div:gt(3)").css("backgroundColor","red"); }); // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"/> $("#b7").click(function(){ $("div:eq(3)").css("backgroundColor","red"); }); // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"/> $("#b8").click(function(){ $("div:lt(3)").css("backgroundColor","red"); }); // <input type="button" value=" 改变所有的标题元素的背景色为 红色"/> $("#b9").click(function(){ $(":header").css("backgroundColor","red"); }); }); </script> </head> <body> <input type="button" value="保存" /> <input type="button" value=" 改变第一个 div 元素的背景色为 红色"/> <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"/> <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"/> <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"/> <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"/> <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"/> <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"/> <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"/> <input type="button" value=" 改变所有的标题元素的背景色为 红色"/> <h1>有一种奇迹叫坚持</h1> <h2>自信源于努力</h2> <div> id为one </div> <div > id为two class是 mini <div >class是 mini</div> </div> <div > class是 one <div >class是 mini</div> <div >class是 mini</div> </div> <div > class是 one <div >class是 mini01</div> <div >class是 mini</div> <div >class是xinlaid mini</div> </div> </body> </html> 表单过滤选择器可用元素选择器：enabled 获得可用元素
不可用元素选择器：disabled 获得不可用元素
选中选择器 checked 获得单选/复选框选中的元素
选中选择器：selected 获得下拉框选中的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>表单属性过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://www.likecs.com/js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } #job{ margin: 20px; } #edu{ margin-top:-70px; } </style> <script type="text/javascript"> $(function () { // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"/> $("#b1").click(function(){ //获取所有的表单，并且是纯文本框可用的，改变他们的值 $("input[type='text']:enabled").val("aaa"); }) // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"/> $("#b2").click(function(){ $("input[type='text']:disabled").val("aaa"); }) // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"/> $("#b3").click(function(){ //获取所有复选框，checked表示选中的个数 alert($("input[type='checkbox']:checked").length); }) // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"/> $("#b4").click(function(){ //通过id获取器获得下拉框元素 alert($("#job > option:selected").length); }); }); </script> </head> <body> <input type="button" value="保存" /> <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"/> <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"/> <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"/> <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"/> <br><br> <input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" > <input type="text" value="不可用值2" disabled="disabled"> <input type="text" value="可用值2" > <br><br> <input type="checkbox" value="美容" >美容 <input type="checkbox" value="IT" >IT <input type="checkbox" value="金融" >金融 <input type="checkbox" value="管理" >管理 <br><br> <input type="radio" value="男" >男 <input type="radio" value="女" >女 <br><br> <select multiple="multiple" size=4> <option>程序员</option> <option>中级程序员</option> <option>高级程序员</option> <option>系统分析师</option> </select> <select> <option>本科</option> <option>博士</option> <option>硕士</option> <option>大专</option> </select> <br/> <div > id为two class是 mini div <div >class是 mini</div> </div> <div > class是 one <div >class是 mini</div> <div >class是 mini</div> </div> <div > class是 one <div >class是 mini01</div> <div >class是 mini</div> </div> </body> </html> DOM操作(需要分清楚是对标签体的内容还是对标签体的属性进行操作)
内容操作html():获取/设置元素的标签体内容
text()：获取/设置元素的标签体纯文本内容