选择器简介
- JQuery选择器允许对HTML元素组成单个元素进行操作
- JQuery选择器基于元素的Id、类型、属性、属性值等(查找或选择)HTML元素。
- 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
- jQuery 中所有选择器都以美元符号开头：$()。
基本选择器
基本选择器是JQuery 中最常用的选择器，也是最简单的选择器，它通过元素id 、class 和标签名等来查找DOM 元素。
(在网页中，每个id 名称只能使用一次， class 允许重复使用)
- * 匹配所有元素 (集合元素) $(" * ")
- #id 根据给定的id匹配一个元素 (单个元素) $("#test") 选取id为test的元素
- element 根据给定的元素匹配元素(集合元素) $("p") 选取所有的<p>元素
- .class 根据给定的类名匹配元素(集合元素) $(".test") 选取所有class为test的元素
- selector1,selector2,.selectorN 将每个选择器匹配到的元素合并到一起返回(集合元素) $(div,span,p.myclass) 选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素。
层次选择器
如果想通过DOM 元素之间的层次关系来获取特定元素， 例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。
- $("ancestor descendant") 选取ancestor元素里的所有后代元素
$("div span") 返回div里所有<span>元素
$(".container p") 返回class为container的所有p元素。
- $("parent>child") 选取parent元素下的child子元素
$("div>span") 选取<div>元素下的元素名是<span>的子元素
$("#main> *") 选择id值为main的所有子元素
- $("prev+next") 选取紧接在prev元素后的next元素
$(".one+div") 选取class为one的下一个<div>同辈元素
$("label + input") 选择所有label元素的下一个input元素
- $("prev~siblings") 选取prev元素之后的所有siblings元素
$("#two~div") 选取id为two的元素后面的所有<div>同辈元素
$("#prev~#div1 ") 选择id为prev的元素后面所有id为div1的div同辈元素
注意！！！$("div span")和$("div>span")是有区别的
$("div span")会选取div里所有的<span>元素
而$("div>span")只会选取<div>直属的<span>子元素
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM 元素，过滤规则与css 中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
基本过滤选择器
基本过滤选择器：
1. :first
示例:$("p:first") 选取第一个<p>元素
2. :last
示例：$("p:last") 选取最后一个<p>元素
3.:even
示例:$("tr:even") 所有偶数<tr>元素
4.:odd
示例:$("tr:odd") 所有奇数 <tr> 元素
5.:eq(index)
示例:$("ul li:eq(3)") 列表中第四个元素(index从0开始)
6.:gt(no)
示例:$("ul li:gt(3)") 列出 index 大于 3 的元素
7.:lt(index)：选择器选取带有小于指定 index 值的元素
8.:not(selector)：去除所有与给定元素匹配的元素
9.:header：选择器选取所有标题元素
<script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
<script type="text/javascript">
// 1.
$(function(){
// 1.选择第一个div元素
$("#btn1").click(function(){
$("div:first").css("background-color","red");
});
// 2.选择最后一个div元素
$("#btn2").click(function(){
$("div:last").css("background-color","blue");
});
// 3.选择class不为 one 的所有 div 元素
$("#btn3").click(function(){
$("div:not(.one)").css("background-color","yellow");
});
// 4.索引值为偶数的div
$("#btn4").click(function(){
$("div:even").css("background-color","green");
});
// 5.索引为基数的div
$("#btn5").click(function(){
$("div:odd").css("background-color","pink");
});
// 6.选择索引值为大于 3 的 div 元素
$("#btn6").click(function(){
$("div:gt(3)").css("background-color","deeppink");
});
// 7.选择索引值为等于 3 的 div 元素
$("#btn7").click(function(){
$("div:eq(3)").css("background-color","blueviolet");
});
// 8.选择索引值为小于 3 的 div 元素
$("#btn8").click(function(){
$("div:lt(3)").css("background-color","brown");
});
// 9.选择所有的标题元素
$("#btn9").click(function(){
$(":header").css("background-color","#FF6500");
});
})
</script>内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
- :contains(text) :contains 选择器选取包含指定字符串的元素
- :empty 选择器选取空的元素
- :parent 选择包含文本元素或者子元素的元素
<script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
<script type="text/javascript">
$(function(){
// 1.选择 含有文本 'di' 的 div 元素
$("#btn1").click(function(){
$("div:contains('di')").css("background-color","red");
});
// 2.选择不包含子元素(或者文本元素) 的 div 空元素
$("#btn2").click(function(){
$("div:empty").css("background-color","blue");
});
// 3.选择含有子元素(或者文本元素)的div元素
$("#btn3").click(function(){
$("div:parent").css("background-color","green");
})
})
</script>可见性过滤选择器
可视化过滤选择器：
- $("div:hidden") 选择所有的被hidden的div元素
- $("div:visible") 选择所有的可视化的div元素
<script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
<script type="text/javascript">
$(function(){
// 选取所有可见的 div 元素
$("#btn1").click(function(){
$("div:visible").css("background-color","red");
});
// 选取隐藏的 元素
$("#btn2").click(function(){
$("input:hidden").attr("type","visible");
})
})
</script>属性过滤选择器
- $("div[id]") 选择所有含有id属性的div元素
- $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
- $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
- $("input[name^='news']") 选择所有的name属性以'news'开头的input元素
- $("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
- $("input[name*='man']") 选择所有的name属性包含'news'的input元素
- $("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
<script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
<script type="text/javascript">
$(function(){
// 1.选取含有 属性title 的div元素
$("#btn1").click(function(){
$("div[title]").css("background-color","red");
});
// 2.选取 属性title值等于'test'的div元素
$("#btn2").click(function(){
$("div[title='test']").css("background-color","blue");
});
// 3.选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)
$("#btn3").click(function(){
$("div[title!='test']").css("background-color","goldenrod");
});
// 4.选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function(){
$("div[title^='te']").css("background-color","green");
});
// 5.选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function(){
$("div[title$='est']").css("background-color","yellow");
});
// 6.选取 属性title值 含有'es'的div元素
$("#btn6").click(function(){
$("div[title*='es']").css("background-color","pink");
});
// 7.组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("#btn7").click(function(){
$("div[id][title*='es']").css("background-color","pink");
});
})
</script>
子元素过滤选择器
- $("div span:first-child") 返回所有的div元素的第一个子节点的数组
- $("div span:last-child") 返回所有的div元素的最后一个节点的数组
- $("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组
<script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
<script type="text/javascript">
//1. 选取每个class为one的div父元素下的第2个子元素
$(function(){
// 1. 选取每个class为one的div父元素下的第2个子元素
$("#btn1").click(function(){
// ！！！注意 加冒号前加空格，否则会有语法错误
$("div.one :nth-child(2)").css("background-color","red");
});
// 2.选取每个class为one的div父元素下的第一个子元素
$("#btn2").click(function(){
$("div.one :first-child").css("background-color","blue");
});
// 3.选取每个class为one的div父元素下的最后一个子元素.
$("#btn3").click(function(){
$("div.one :last-child").css("background-color","yellow");
});
// 4.如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$("#btn4").click(function(){
$("div.one :only-child").css("background-color","pink");
})
})
</script>表单选择器
为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。利用表单选择器，能够极其方便地获取到表单的某个或某些类型的元素。
- :input $(":input") 所有 <input> 元素
- :text $("input:text") 所有 type="text" 的 <input> 元素
- :password $(":password") 所有 type="password" 的 <input> 元素
- :radio $(":radio") 所有 type="radio" 的 <input> 元素
- :checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
- :submit $(":submit") 所有 type="submit" 的 <input> 元素
- :reset $(":reset") 所有 type="reset" 的 <input> 元素
- :button $(":button") 所有 type="button" 的 <input> 元素
- :image $(":image") 所有 type="image" 的 <input> 元素
- :file $(":file") 所有 type="file" 的 <input> 元素
<script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
<script>
$(function(){
//为账户和密码框添加默认值
$("input:text").val("admin");
$("input:password").val("123456");
//提交表单
$("input:submit").click(function(){
alert("注册成功");
})
})
</script>JQuery元素选择方法
在层次选择器中，第1 个和第2 个选择器比较常用，而后面两个因为在jQuery 里可以用更加简单的方法代替，所以使用的几率相对少些。
- 可以使用next（）方法来代替 $(＇prev + next＇）选择器。
- nextAll（）方法来代替 $(＇prev～siblings’）选择。
- siblings() 方法来补充 nextAll() 方法的不足。
选择方法：
- next() 等价于$(“prev + next”):他下一个兄弟元素
- nextAll() 等价于$(“prev～siblings”)：他后面的所有兄弟
- siblings() 类似$(“prev～siblings”)，但无关前后，选择所有同辈节点
- children() 获取匹配元素的所有子元素
- parent() 获取匹配元素的父元素
- parents() 获取匹配元素的所有父元素
<script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#menu1+li").css("background","#0050D0");
});
$("#btn2").click(function(){
$("#menu1").next().css("background","#0050D0");
});
$("#btn3").click(function(){
$("#menu2~li").css("background-color","#0050D0");
});
$("#btn4").click(function(){
$("#menu2").nextAll().css("background","#0050D0");
});
$("#btn5").click(function(){
$("#menu2").siblings().css("background","#0050D0");
});
//removeAttr():清除样式
$("#btn").click(function(){
$("*").removeAttr("style");
});
})
</script>
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
