jquery选择器写法 jQuery 选择器 (prev ~ siblings)

jquery选择器写法

jQuery选择器是jQuery中最重要的部分，它可以帮助我们快速地找到页面上的元素。它使用CSS语法来查找元素，并且可以使用多种方式来查找元素。

// 通过标签名选择
$("div")  // 选择所有div标签
$("p")    // 选择所有p标签

// 通过id选择
$("#myDiv")  // 选择id为myDiv的元素

// 通过class选择
$(".myClass")  // 选择class为myClass的元素

jQuery还可以使用属性选择器来选择特定属性的元素，例如，可以使用[attribute=value]语法来选择特定属性和属性值的元素。此外，也可以使用:not()、:even、:odd、:first、:last、:eq()、:gt()、:lt() 等伪类来对匹配到的元素进行进一步的过滤。

 
// 属性选择器 
$("[name='username']")   // 选中name为username的元素 
$("[type='text']")       // 选中type为text的元素 

 // 伪类选择器  
$("li:not(.active)")     // 除了class为active之外的li标签  
$("tr:even")             // 偶数行tr标签  
$("tr:odd")              // 奇数行tr标
jQuery 选择器 (prev ~ siblings)
jQuery 选择器 (prev ~ siblings)
 jQuery 选择器
定义和用法
jQuery的prev ~ siblings选择器用于匹配prev元素之后的所有同辈的siblings元素，将其封装为jQuery对象并返回。
注意： 选择器siblings的查找范围必须是"prev元素"之后的元素，并且是同辈元素(即与"prev元素"有同一个的父元素)。
语法
// 这里的prev表示具体的选择器
// 这里的siblings表示具体的选择器
jQuery( "prev ~ siblings" )
"~"号两侧的空格可以省略，但不建议省略，否则字符过于紧密可能影响阅读。
参数
参数
描述
prev
一个有效的选择器。
siblings
一个有效的选择器。
返回值
返回封装了位于"prev元素"之后的同辈元素中、符合选择器siblings的DOM元素的jQuery对象。
如果找不到任何相应的匹配，则返回一个空的jQuery对象。
实例
实例
以下面这段代码为例：

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Welcome</span>
        <span id="n4">Welcome</span>
    </p>
    <p id="n5" class="detail">
        <span id="n6" class="b codeplayer">To
            <span id="n7" class="a">.cn</span>
            <span id="n8"></span>
            <span id="n9"></span>
        </span>
    </p>
</div>


<script>
// 扩展jQuery对象，添加showTagInfo()方法
// 用于将jQuery对象所有匹配元素的标识信息追加到body元素内
// 每个元素的标识信息形如："tagName"或"tagName#id"
jQuery.fn.showTagInfo = function(){
	var tags = this.map( function(){
		return this.tagName + ( this.id ? "#" + this.id : "" ); 
	} ).get();
	$("body").append( tags.join("<br>") + "<br><br>" );
};

// 选择了id为n5的一个元素
$("p ~ p").showTagInfo();

// 选择了id为n9的一个元素
// n7虽然也是n8的同辈元素，但不在n8之后，而是之前，因此匹配不到
$("#n8 ~ span").showTagInfo();

// 选择了id分别为n4、n8、n9的三个元素
// n9属于n7的~siblings，也是n8的~siblings，同一个元素只计入一次
$("span ~ span").showTagInfo();
</script>

点击 "尝试一下" 按钮查看在线实例
 jQuery 选择器