专业编程基础技术教程

网站首页 > 基础教程 正文

jQuery 管理和筛选选择器（jquery的选择器有哪些举例说明）

ccvgpt 2024-07-21 17:44:53 基础教程 12 ℃

获取元素的个数

$("img").size()

jQuery 管理和筛选选择器（jquery的选择器有哪些举例说明）

获取jQuery选择器中元素的个数：

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
document.onclick = function(){
    var i = $("div").size()+1; //获取div块的数目（此时还没有添加div块）
    $(document.body).append($("<div>"+i+"</div>")); //添加一个div块
    $("span").html(i); //修改显示的总数
}
</script>

HTML代码:

页面中一共有<span>0</span>个div块。点击鼠标添加div：

注意:$(document.body)可以简化为$("body")

jQuery1.8废弃了size() 用length代替

提取元素

$("img[title]")[1] 获取所有设置了title属性的img标记中的第2个元素

以下代码与上面完全等效

$("img[title]").get(1); //从0开始计数

另外，get()方法在不设置任何参数时，可以将元素转化为一个元素对象的数组。

jQuery提取选择器中的元素：

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function disp(divs){
    for(var i=0;i<divs.length;i++)
        $(document.body).append($("<div style='background:"+divs[i].style.background+";'>"+divs[i].innerHTML+"</div>"));
}
$(function(){
    var aDiv = $("div").get(); //转化为div对象数组
    disp(aDiv.reverse()); //反序，传给处理函数
});
</script>
<div style="background:#FFFFFF">1</div>
<div style="background:#CCCCCC">2</div>
<div style="background:#999999">3</div>
<div style="background:#666666">4</div>
<div style="background:#333333">5</div>
<div style="background:#000000">6</div>

注意：get([index])取得其中一个匹配的元素。index表示取得第几个匹配的元素。

这能够让你选择一个实际的DOM元素并且对他直接操作, 而不是通过jQuery函数。$("div").get(0)与$("div")[0]等价。

反过来index(element)方法可以查找元素element所处的位置

例如：var iNum = $("li").index($("li[title=isaac]")[0]);

用index()方法获取元素的序号

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
    //click()添加点击事件
    $("div").click(function(){
    //将块本身用this关键字传入，从而获取自身的序号
    var index = $("div").index(this);
    $("span").html(index.toString());
    });
});
</script>
<div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
点击的div块序号为：<span></span>
查找元素的索引值
HTML 代码:
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>

jQuery 代码:

$('li').index(document.getElementById('bar')); //1, 传递一个DOM对象, 返回这个对象在原先集合中的索引位置

$('li').index($('#bar')); //1, 传递一个jQuery对象

$('li').index($('li:gt(0)')); //1, 传递一组jQuery对象, 返回这个对象中第一个元素在原先集合中的索引位置

$('#bar').index('li'); //1, 传递一个标记, 返回#bar在所有li中的索引位置

$('#bar').index(); //1, 不传递参数, 返回这个元素在同辈中的索引位置

index()注意的问题:

<ul>
<li>娱乐</li>
<img src="img/on.png"/>
<li>政治</li>
<img src="img/on.png"/>
<li>体育</li>
<img src="img/on.png"/>
<li>娱乐</li>
<li>娱乐</li>
</ul>
$("li").click(function(){
    //index内部是吧钙元素的所有兄弟进行排序
    //但是我们布局中经常会有一些多余的元素用来装饰 但是我不想让这些元素参与排序
    //jq内部也考虑到了这一点 他们改了
    console.log($(this).index()); //排序包括img和li(0 2 4 7 8)
    console.log($(this).index("li"));//我仅仅针对li进行排序
    //他沟通过(选择器)里面的参数进行过滤
})
children() 查询子元素
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]


parent() 查询父元素

<div><p>Hello</p><p>Hello</p></div>

jQuery 代码:

$("p").parent()

结果:

[ <div><p>Hello</p><p>Hello</p></div>]

siblings() 查询兄弟节点元素

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").siblings()

结果:

[ <p>Hello</p>, <p>And Again</p> ]

next() 查询紧邻的下一个元素

找到每个段落的后面紧邻的同辈元素。

HTML 代码:

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next()

结果:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

prev() 查询紧邻的上一个元素

找到每个段落紧邻的前一个同辈元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("p").prev()

结果:

[ <div><span>Hello Again</span></div> ]

添加、删除、过滤元素

添加元素

$("img[alt]").add("img[title]");

等同于：

$("img[alt],img[title]");
$("img[alt]").add("img[title]").addClass("myClass");

等同于

$("img[alt],img[title]").addClass("myClass");

删除元素

$("li[title]").not("[title*=isaac]");
$("div").not(".green, #blueone").addClass("myClass");

去掉风格为.green #blueone 的类 并添加.myClass的类

注意：not()方法所接受的参数都不能包含特定的元素，只能是通用的表达式，例如下面是典型的错误代码：

$("li[title]").not("img[title*=isaac]")

正确的写法为：

$("li[title]").not("[title*=isaac]")

过滤元素

$("li").filter("[title*=isaac]");

此种方法与not()一样, 但是功能更强大。

以上代码等同于

$("li[title*=issac]")

filter语句还于jQuery语句的链接

如

$(function(){
		$("div").addClass("myClass1").filter("[class*=middle]").addClass("myClass2");
});

注意：filter("[class=middle]")语句得不到理想的效果 需要添加* ^ $(经过测试jQuery支持后匹配有问题,包括最新版本jquery2.0.1)

filter()另外一种类型的参数是函数，它可以让用户自定义筛选函数，该函数要求返回一个布尔型值,参数为index为元素所处的序号(从零还是计数)

如：

$(function(){
$("div").addClass("myClass1").filter(function(index){ //index为元素所处的序号(从零还是计数)
    return index == 1 || $(this).attr("id") == "fourth";
}).addClass("myClass2");
});

以上代码为整个<div>列表增加样式风格"myClass1",然后进行筛选，再为筛选出的元素单独增加样式风格"myClass2"。如果不采用jQuery链，将非常麻烦。

查询过滤新元素集合

$("p").find("span");

以上代码表示所有<p>标记的元素中搜索<span>标记,获得一个新的元素集合，等同于

$("span",$("p")); //注意顺序不能调换
如：
$(function(){
		$("p").find("span").addClass("myClass");
});

另外，还可以通过is()方法来检测是否包括指定的元素

var bHasuImage = $("div").is("img"); //返回值为Boolean;

采用jQuery链

在jQuery链中，后面的操作都是以前面的操作结果为对象的。如果希望操作对象为上一步的对象，则可以使用end()方法。

$(function(){
		$("p").find("span").addClass("myClass1").end().addClass("myClass2");
});

利用end()方法将操作对象往回设置为$("p")；

另外andSelf()方法控制jQuery链 将前面两个对象进行组合后共同处理。

$(function(){
		$("p").find("span").addClass("myClass1").andSelf().addClass("myClass2");
});

andSelf()方法将<p>和<span>组合在一起,添加样式风格，这个风格对<p>和<span>均有效；

小结:

删除元素.not()方法和过滤元素.filter()方法,所接受的参数都不能包含特定的元素,只能是通用表达式

$("li[title]").not("img[title*=isaac]")
$("li[title]").filter("img[title*=isaac]")

应当改写为:

$("li[title]").not("[title*=isaac]")
$("li[title]").filter("[title*=isaac]")

同时不能使用直接的等于匹配(=),只能使用前匹配(^=)、任意匹配(*=),

而后匹配($=)(有些书写的是&=),无论后匹配是$=还是&=,jQuery程序多次测试有问题;

综合实例:

保留子元素中不含有ol的元素。

HTML 代码:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代码:

$("p").filter(function(index) {
    return $("ol", this).length == 0;
});

结果:

[ <p>How are you?</p> ]

理解:$("ol", this)等同于$(this).find("ol"),this关键字代表遍历后的p标记

以上语句可改成:(添加了让DOM立即执行的函数)

$(function(){
    $("p").filter(function(index) {
    return $(this).find("ol").length == 0;
    }).addClass("myClass1");
});

Tags：

猜你喜欢

最近发表
标签列表