JQuery选择器案例

2024-04-27 15:06:55

字体：大中小

来源：转载

供稿：网友

jQuery选择器之id选择器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <div id="aaron"> <p>id="aaron"</p> <p>选中</p> </div> <div id="imooc"> <p>id="imooc"</p> <p>jQuery选中</p> </div> <div id="imooc"> <p>id="imooc"</p> <p>jQuery未选中</p> </div> <script type="text/javascript"> //通过原生方法处理 var div = document.getElementById('aaron'); div.style.border = "3px solid blue"; </script> <script type="text/Javascript"> //通过jQuery直接传入id //id的唯一，只选择到了第一个匹配的id为imooc的div节点 $('#imooc').CSS("border", "3px solid red"); </script></body></html>

jQuery选择器之类选择器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body> <div class="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <div class="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <script type="text/javascript"> //通过原生方法处理 //样式是可以多选的，所以得到的是一个合集 //需要通过循环给合集中每一个元素修改样式 var divs = document.getElementsByClassName('aaron'); for (var i = 0; i < divs.length; i++) { divs[i].style.border = "3px solid blue"; } </script> <script type="text/javascript"> //通过jQuery直接传入class //class选择器可以选择多个元素 $('.imooc').css("border", "3px solid red"); </script></body></html>

jQuery选择器之元素选择器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body> <div class="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <div class="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <script type="text/javascript"> //通过原生方法处理 //获取到所有的节点标记名为div的元素 //给每一个div加上蓝色的边框 var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { divs[i].style.border = "3px solid blue"; } </script> <script type="text/javascript"> //通过jQuery直接传入标签名p //标签是可以多个的，所以得到的同样也是一个合集 $("p").css("border", "3px solid red"); </script></body></html>

jQuery选择器之全选择器（*选择器）

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <div class="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <div class="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <div class="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <script type="text/javascript"> //获取页面中所有的元素 var elements1 = document.getElementsByTagName('*'); </script> <script type="text/javascript"> //获取页面中所有的元素 var elements2 = $("*") ; //原生与jQuery方法比较 //===表示数据和类型都相等 if(elements2.length === elements1.length){ elements2.css("border","1px solid red"); } </script></body></html>

jQuery选择器之层级选择器

jQuery选择器之基本筛选选择器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>基本筛选器</h2> <h3>:first/:last/:even/:odd</h3> <div class="left"> <div class="div"> <p>div:first</p> <p>:even</p> </div> <div class="div"> <p>:odd</p> </div> <div class="div"> <p>:even</p> </div> <div class="div"> <p>:odd</p> </div> <div class="div"> <p>:even</p> </div> <div class="div"> <p>div:last</p> <p>:odd</p> </div> </div> <script type="text/javascript"> //找到第一个div $(".div:first").css("color", "#CD00CD"); </script> <script type="text/javascript"> //找到最后一个div $(".div:last").css("color", "#CD00CD"); </script> <script type="text/javascript"> //:even 选择所引值为偶数的元素，从 0 开始计数 $(".div:even").css("border", "3px groove red"); </script> <script type="text/javascript"> //:odd 选择所引值为奇数的元素，从 0 开始计数 $(".div:odd").css("border", "3px groove blue"); </script> <h3>:eq/:gt/:lt</h3> <div class="left"> <div class="aaron"> <p>:lt(3)</p> </div> <div class="aaron"> <p>:lt(3)</p> </div> <div class="aaron"> <p>:eq(2)</p> </div> <div class="aaron"> </div> <div class="aaron"> <p>:gt(3)</p> </div> <div class="aaron"> <p>:gt(3)</p> </div> </div> <script type="text/javascript"> //:eq //选择单个 $(".aaron:eq(2)").css("border", "3px groove blue"); </script> <script type="text/javascript"> //:gt 选择匹配集合中所有索引值大于给定index参数的元素 $(".aaron:gt(3)").css("border", "3px groove blue"); </script> <script type="text/javascript"> //:lt 选择匹配集合中所有索引值小于给定index参数的元素 //与:gt相反 $(".aaron:lt(2)").css("color", "#CD00CD"); </script> <h3>:not</h3> <div class="left"> <div> <input type="checkbox" name="a" /> <p>Aaron</p> </div> <div> <input type="checkbox" name="b" /> <p>慕课</p> </div> <div> <input type="checkbox" name="c" checked="checked" /> <p>其他</p> </div> </div> <script type="text/javascript"> //:not 选择所有元素去除不匹配给定的选择器的元素 //选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色 $("input:not(:checked) + p").css("background-color", "#CD00CD"); </script></body></html>

jQuery选择器之内容筛选选择器

jQuery选择器之可见性筛选选择器

jQuery选择器之属性筛选选择器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>属性筛选选择器</h2> <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3> <div class="left" testattr="true" > <div class="div" testattr="true" name='p1'> <a>[att=val]</a> </div> <div class="div" testattr="true" p2> <a>[att]</a> </div> <div class="div" testattr="true" name="-"> <a>[att|=val]</a> </div> <div class="div" testattr="true" name="a b"> <a>[att~=val]</a> </div> </div> <script type="text/javascript"> //查找所有div中，属性name=p1的div元素 $('div[name=p1]').css("border", "3px groove red"); </script> <script type="text/javascript"> //查找所有div中，有属性p2的div元素 $('div[p2]').css("border", "3px groove blue"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素 $('div[name != "-"]').css("border", "3px groove #00FF00"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素 $('div[name~="a"]').css("border", "3px groove #668B8B"); </script> <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3> <div class="left" testattr="true" > <div class="div" testattr="true" name='imooc-aaorn'> <a>[att^=val]</a> </div> <div class="div" testattr="true" name='aaorn-imooc'> <a>[att$=val]</a> </div> <div class="div" testattr="true" name="attr-test-selector"> <a>[att*=val]</a> </div> <div class="div" name="a b"> <a>[att!=val]</a> </div> </div> <script type="text/javascript"> //查找所有div中，属性name的值是用imooc开头的 $('div[name$=imooc]').css("border", "3px groove red"); </script> <script type="text/javascript"> //查找所有div中，属性name的值是用imooc结尾的 $('div[name^=imooc]').css("border", "3px groove blue"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个test字符串的div元素 $('div[name*="test"]').css("border", "3px groove #00FF00"); </script> <script type="text/javascript"> //查找所有div中，有属性testattr中的值没有包含"true"的div $('div[testattr!="true"]').css("border", "3px groove #668B8B"); </script></body></html>

jQuery选择器之子元素筛选选择器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>子元素筛选选择器</h2> <h3>:first-child、:last-child、:only-child</h3> <div class="left first-div"> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> <div class="div"> <a>:first-child</a> </div> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> </div> <script type="text/javascript"> //查找class="first-div"下的第一个a元素 //针对所有父级下的第一个 $('.first-div a:first-child').css("color", "#CD00CD"); </script> <script type="text/javascript"> //查找class="first-div"下的最后一个a元素 //针对所有父级下的最后一个 //如果只有一个元素的话，last也是第一个元素 $('.first-div a:last-child').css("color", "red"); </script> <script type="text/javascript"> //查找class="first-div"下的只有一个子元素的a元素 $('.first-div a:only-child').css("color", "green"); </script> <h3>:nth-child、:nth-last-child</h3> <div class="left last-div"> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>第三个元素</a> <a>:last-child</a> </div> <div class="div"> <a>:first-child</a> <a>第二个元素</a> </div> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>第三个元素</a> <a>:last-child</a> </div> </div> <script type="text/javascript"> //查找class="last-div"下的第二个a元素 $('.last-div a:nth-child(2)').css("color", "#CD00CD"); </script> <script type="text/javascript"> //查找class="last-div"下的倒数第二个a元素 $('.last-div a:nth-last-child(2)').css("color", "red"); </script></body></html>

jQuery选择器之表单元素选择器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <style> input{ display: block; margin: 10px; padding:10px; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>子元素筛选选择器</h2> <h3>input、text、passWord、radio、checkbox</h3> <h3>submit、image、reset、button、file</h3> <div class="left first-div"> <form> <input type="text" value="text类型"/> <input type="password" value="password"/> <input type="radio"/> <input type="checkbox"/> <input type="submit" /> <input type="image" /> <input type="reset" /> <input type="button" value="Button" /> <input type="file" /> </form> </div> <script type="text/javascript"> //查找所有 input, textarea, select 和 button 元素 //:input 选择器基本上选择所有表单控件 $(':input').css("border", "3px groove blue"); </script> <script type="text/javascript"> //匹配所有input元素中类型为text的input元素 $('input:text').css("background", "#A2CD5A"); </script> <script type="text/javascript"> //匹配所有input元素中类型为password的input元素 $('input:password').css("background", "yellow"); </script> <script type="text/javascript"> //匹配所有input元素中的单选按钮,并选中 $('input:radio').attr('checked','true'); </script> <script type="text/javascript"> //匹配所有input元素中的复选按钮,并选中 $('input:checkbox').attr('checked','true'); </script> <script type="text/javascript"> //匹配所有input元素中的提交的按钮,修改背景颜色 $('input:submit').css("background", "#C6E2FF"); </script> <script type="text/javascript"> //匹配所有input元素中的图像类型的元素,修改背景颜色 $('input:image').css("background", "#F4A460"); </script> <script type="text/javascript"> //匹配所有input元素中类型为按钮的元素 $('input:button').css("background", "red"); </script> <script type="text/javascript"> //匹配所有input元素中类型为file的元素 $('input:file').css("background", "#CD1076"); </script></body></html>

jQuery选择器之表单对象属性筛选选择器

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <style> input { display: block; margin: 10px; padding: 10px; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>子元素筛选选择器</h2> <h3>enabled、disabled</h3> <form> <input type="text" value="未设置disabled" /> <input type="text" value="设置disabled" disabled="disabled" /> <input type="text" value="未设置disabled" /> </form> <script type="text/javascript"> //查找所有input所有可用的（未被禁用的元素）input元素。 $('input:enabled').css("border", "2px groove red"); </script> <script type="text/javascript"> //查找所有input所有不可用的（被禁用的元素）input元素。 $('input:disabled').css("border", "2px groove blue"); </script> <h3>checked、selected</h3> <form> <input type="checkbox" checked="checked"> <input type="checkbox"> <input type="radio" checked> <input type="radio"> <select name="garden" multiple="multiple"> <option>imooc</option> <option selected="selected">慕课网</option> <option>aaron</option> <option selected="selected">博客园</option> </select> </form> <script type="text/javascript"> //查找所有input所有勾选的元素(单选框,复选框) //移除input的checked属性 $('input:checked').removeAttr('checked') </script> <script type="text/javascript"> //查找所有option元素中,有selected属性被选中的选项 //移除option的selected属性 $('option:selected').removeAttr('selected') </script></body></html>

jQuery选择器之特殊选择器this

综合案例

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery标签切换效果</title> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body><div id="menu">  <div id="menu_female"> <h3>女装</h3> <div class="tag" style="display: block;"> <dl> <dd> <p>第一类</p> <a>1.衬衫</a> <a>2.T恤</a> <a>3.雪纺衫</a> <a>4.针织衫</a> <a>5.短外套</a> <a>6.卫衣</a> <a>7.小西裤</a> <a>8.风衣</a> <a>9.吊带背心</a> <a>10.连衣裙</a> <a name="setColor">11.蕾丝连衣裙</a> <a>12.复古连衣裙</a> <a>13.印花连衣裙</a> <a>14.真丝连衣裙</a> <a>更多</a> </dd> </dl> </div> <div class="tag_More" style="display:block"> <dl> <dd> <p>第二类</p> <a>1.背带裤</a> <a>2.哈伦裤</a> <a>3.牛仔裤</a> <a>4.休闲裤</a> <a>5.小脚裤</a> <a>6.西装裤</a> <a>7.打底裤</a> <a>8.阔脚裤</a> <a>9.短裤</a> <a>10.马甲/背心</a> <a>11.羽绒服</a> <a>12.棉服</a> <a>13.夹克</a> <a>14.POLO衫</a> <a>更多</a> </dd> </dl> </div>> </div> <div id="menu_con"> <h3>男装</h3> <div class="tag" style="display:block"> <dl> <dd> <p>第一类</p> <a>1.衬衫</a> <a>2.T恤</a> <a>3.牛仔裤</a> <a>4.休闲裤</a> <a>5.短裤</a> <a>6.针织衫</a> <a>7.西服</a> <a>8.西裤</a> <a>9.嘻哈裤</a> <a>10.西服套装</a> <a>11.马甲/背心</a> <a name="setColor">12.羽绒服</a> <a>13.棉服</a> <a>14.夹克</a> <p>更多</p> </dd> </dl> </div> <div class="tag_More" style="display:block"> <dl> <dd> <p>第二类</p> <a>1.衬衫</a> <a>2.T恤</a> <a>3.牛仔裤</a> <a name='setColor'>4.休闲裤</a> <a>5.短裤</a> <a>6.针织衫</a> <a>7.西服</a> <a>8.西裤</a> <a>9.嘻哈裤</a> <a>10.西服套装</a> <a>11.马甲/背心</a> <a>12.羽绒服</a> <a>13.棉服</a> <a>14.夹克</a> <p>更多</p> </dd> </dl> </div>> </div></div><script type="text/javascript"> //找到男装下第一类衣服中的第一个p元素，并改变颜色 //可以通过子类选择器 p:first-child 筛选出第一个p元素 $("#menu_con div.tag dd > p:first-child").css('color','#9932CC');</script><script type="text/javascript"> //找到男装下第一类衣服把a元素从顺序1-4加上颜色 //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素 //注意了index是从0开始计算，所以选在1-4,为对应的index就是4 $("#menu_con div.tag dd :eq(0)> a:lt(4) ").css('color','red');</script><script type="text/javascript"> //找到男装所有a元素中属性名name="setColor"的元素，并设置颜色 //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素 $("#menu_con a[name=setColor]").css('color','blue');</script><script type="text/javascript"> //不分男女，选中第一类衣服中第9个a元素，并改变颜色 //这里用了nth-child 选择的他们所有父元素的第n个子元素 $('#menu div.tag dd a:nth-child(10)').css('color','#66CD00');</script><script type="text/javascript"> //找到女装下第一类衣服，把a元素中包含文字"更多"的节点，改变颜色 $("#menu_female div.tag a:contains('更多')").css('color','#C71585');</script></body></html>

上一篇：Struts框架（一）——简介

下一篇：2.11.2 footer 元素和 hgroup 元素