js原生选择器： 1、getElementById 用法:document.getElementById("Id");Id为要获取的元素的id属性值。 2、getElementsByName 用法:document.getElementsByName("Name");Name为要获取元素的name属性值,这个方法一般适用于提交表单数据,当元素为form、img、iframe、applet、embed、object的时候设置name属性时,会自动在Document对象中创建以该name属性值命名的属性。 3、getElementsByTagName 用法:document.getElementsByTagName(TagName);TagName为要获取元素的标签名称,当TagName为*的时候表示获取所有的元素,document也可以换成DOM元素,但是这样就只能获取到该DOM元素后面的子集元素。 4、getElementsByClassName 用法：document.getElementsByClassName(ClassName);ClassName为要获取元素的CSS类名称,如果要同时获取多个的话,在每个CSS类后面用空格隔开。 如document.getElementsByClassName("class1 class2")就会获取到class1和class2样式的元素,document也可以换成DOM元素,这样也是只能获取到该DOM元素后面的子集元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 id="h101">h1标题</h1> <img src="#" alt="这是图片" name="img01"> <p>p标签</p> 输入框<input type="text" class="int01"/> </body> <script> var hid = document.getElementById("h101") var imgName = document.getElementsByName("img01") var p = document.getElementsByTagName("p") var intByClass = document.getElementsByClassName("int01") </script> </html>
jQuery九大选择器： 1、基本选择器 使用方式： 改变 id 为 one 的元素的背景色为 #0000FF 示例： $("#one").css("background","#0000FF"); 改变元素名为 <div> 的所有元素的背景色为 #00FFFF 示例： $("div").css("background","#00FFFF"); 改变 class 为 mini 的所有元素的背景色为 #FF0033 示例： $(".mini").css("background","#FF0033"); 改变所有元素的背景色为 #00FF33 示例：$("*").css("background","#00FF33"); 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF，注意，多个选择器并列使用时中间用逗号隔开。 示例： $("span,#two").css("background","#3399FF"); 2、层次选择器 使用方式： 改变 <body> 内所有 <div> 的背景色为 #0000FF 示例： //祖先元素和后代元素的关系 $("body div").css("background","#0000FF"); 改变 <body> 内子 <div> 的背景色为 #FF0033 示例：//父元素和子元素的关系 $("body>div").css("background","#FF0033"); 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF 示例：$("#one+div").css("background","#0000FF"); 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #0000FF 示例：//获取指定元素的后面所有兄弟元素 $("#two~div").css("background","#0000FF"); 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF 示例： //获取指定元素的所有兄弟元素 $("#two").siblings("div").css("background","#0000FF"); 3、基础过滤选择器 使用方式： 改变第一个 div 元素的背景色为 #0000FF 示例：$("div:first").css("background","#0000FF"); 改变最后一个 div 元素的背景色为 #0000FF 示例：$("div:last").css("background","#0000FF"); 改变class不为 one 的所有 div 元素的背景色为 #0000FF 示例：$("div:not(.one)").css("background","#0000FF"); 改变索引值为偶数的 div 元素的背景色为 #0000FF 示例： $("div:even").css("background","#0000FF"); 改变索引值为奇数的 div 元素的背景色为 #0000FF 示例：$("div:odd").css("background","#0000FF"); 改变索引值为大于 3 的 div 元素的背景色为 #0000FF 示例：$("div:gt(3)").css("background","#0000FF"); 改变索引值为等于 3 的 div 元素的背景色为 #0000FF 示例： $("div:eq(3)").css("background","#0000FF"); 改变索引值为小于 3 的 div 元素的背景色为 #0000FF 示例：$("div:lt(3)").css("background","#0000FF"); 改变所有的标题元素的背景色为 #0000FF 示例： $(":header").css("background","#0000FF"); 改变当前正在执行动画的所有元素的背景色为 #0000FF" 示例： function mover(){ $("#mover").slideToggle("slow",mover); } mover(); $("#b10").click(function(){ $(":animated").css("background","#0000FF"); }; 4、内容选择器 使用方式： 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF 示例：$("div:contains('di')").css("background","#0000FF"); 改变不包含子元素(或者文本元素) 的 div 空元素的背景色 示例：$("div:empty").css("background","#0000FF"); 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF 示例：$("div:has(.mini)").css("background","#0000FF"); 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF 示例：$("div:parent").css("background","#0000FF"); 改变不含有文本 di 的 div 元素的背景色为 #0000FF 示例：$("div:not(:contains('di'))").css("background","#0000FF"); 5、可见度过滤选择器 使用方式： 改变所有可见的div元素的背景色为 #0000FF 示例：$("div:visible").css("background","#0000FF"); 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF 示例：$("div:hidden").show().css("background","#0000FF"); 选取所有的文本隐藏域, 并打印它们的值
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.9.1.js"></script> <style type="text/css"> .wrap { width: 500px; padding: 10px; margin: 20px auto; border: 1px solid #ccc; } .wrap div { width: 70px; height: 40px; background: #0083C1; margin: 5px; float: left } span { display: block; clear: left; color: #008000; } .startHidden { display: none; } .startVisibilityHidden { visibility: hidden; } </style> </head> <body> <div class="wrap"> <span></span> <div></div> <div style="display:none">Hider!</div> <div style="visibility:hidden">Hider!</div> <div class="startHidden">Hider!</div> <div class="startVisibilityHidden">Hider!</div> <div></div> <form> <input type="hidden" /> <input type="hidden" /> <input type="hidden" /> </form> <span></span> <button >显示隐然元素</button> </div> </body> <!--<script>--> <!-- $(document).ready(function(){--> <!-- $("span:first").text("Found " + $(":hidden",document.body).length + " hidden elements total.");//在第一个span标签中增加文本，显示body中有多少个元素隐藏--> <!-- $("div:hidden").show("3000");//显示所有隐藏的div元素--> <!-- $("span:last").text("Found " + $("input:hidden").length + " hidden inputs");//在最后一个span标签中增加文本，显示有多少input隐藏--> <!-- });--> <!--</script>--> <script type="text/javascript"> $(document).ready(function(){ $("div:visible").click(function(e){ //可见DIV元素绑定一个单击事件 $(this).css("border","2px solid red"); //给可见的DIV元素增加一个2px的红色边框 e.stopPropagation();//停止事件冒泡 }); $("button").click(function(e){ //给button绑定一个单击事件 $("div:hidden").show("fast").css("background","red");//隐然的元素显示出来，并把背景变成红色 e.stopPropagation();//停止事件冒泡 }); }); </script> </html>
6、属性过滤器 使用方式： 含有属性title 的div元素 $("div[title]").css("background","#0000FF"); 属性title值等于test的div元素 $("div[title=test]").css("background","#0000FF"); 属性title值不等于test的div元素(没有属性title的也将被选中) $("div[title!=test]").css("background","#0000FF"); 属性title值 以te开始 的div元素 $("div[title^=te]").css("background","#0000FF"); 属性title值 以est结束 的div元素 $("div[title$=est]").css("background","#0000FF"); 属性title值 含有es的div元素 $("div[title*=es]").css("background","#0000FF"); 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素 //多个属性过滤选择器并列使用，就这样并列放置就OK $("div[id][title*=es]").css("background","#0000FF"); 7、子元素过滤选择器 每个class为one的div父元素下的第2个子元素 :nth-child()子元素过滤选择器，使用时需在其前面增加空格 :nth-child()子元素过滤选择器，其索引值是从"1"开始 $("div[class=one] :nth-child(2)").css("background","#0000FF"); 每个class为one的div父元素下的第一个子元素 $("div[class=one] :first-child").css("background","#0000FF"); 每个class为one的div父元素下的最后一个子元素 $("div[class=one] :last-child").css("background","#0000FF"); 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" $("div[class=one] :only-child").css("background","#0000FF"); 8、表单对象属性过滤器 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值 <input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" > <input type="text" value="不可用值2" disabled="disabled"> <input type="text" value="可用值2" > $("input[type=text]:enabled").val("xxx"); 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值 $("input[type=text]:disabled").val("xxx"); 利用 jQuery 对象的 length 属性获取多选框选中的个数 <input type="checkbox" name="items" value="美容" >美容 <input type="checkbox" name="items" value="IT" >IT <input type="checkbox" name="items" value="金融" >金融 <input type="checkbox" name="items" value="管理" >管理 alert($("input[type=checkbox]:checked").length); 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" <select name="job" id="job" multiple="multiple" size=4> <option >程序员</option> <option>中级程序员</option> <option>高级程序员</option> <option>系统分析师</option> </select> <select name="edu" id="edu"> <option>本科</option> <option>博士</option> <option>硕士</option> <option>大专</option> </select> $("select option:selected").each(function(index,domEle){ alert($(domEle).text()); }; 9、表单选择器 $(":image")匹配所有的图像域 $(":reset")匹配所有重置按钮 $(":button")匹配所有按钮 $(":file")匹配所有文件域 $("input:hidden")匹配所有不可见元素，或type为hidden的元素，这个选择器不限于表单标签，那些style为hidden的元素也会被匹配。 $("input:enabled")匹配所有可用的input元素，即不带属性disabled="disabled" $("input:disabled")和上面相反 $("input:checked")匹配所有选择的元素（包括，复选框，单选框，但不包括select的option） $("select option:selected")匹配所有选择的option元素。
扫一扫
1731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
