jQuery应用之（二）使用jQuery管理选择结果（荐）

使用jQuery选择出来的元素与数组非常类似，可以通过jQuery提供的一系列方法对其进行处理，包括长度、查找某个元素，截取某个段落等。

1.获取元素的个数。

在jQuery中可以通过size()方法获取选择器中元素的个数，它类似数组中的length属性，返回整数值，例如：

$("img").size()

获取页面中，所有图片<img>的数目

如下是一个实例，通过不断的点击添加div块并计算页面中的<div>块。

<style>div {border: 1px solid #003a75;background-color: #FFFF00;margin: 5px;padding: 20px;text-align: center;height: 20px;width: 20px;float: left;}}</style><script type="text/javascript">document.onclick = function() {var i = $("div").size() + 1; //获取div的数目，（此时还没有div块）
                $(document.body).append($("<div>" + i + "</div>")); //添加一个div块
                $("#number").html(i);}</script>
页面中一共有<span id="number">0</span>个DIV块。单击鼠标添加

2.提取元素

在jQuery中选择器中，如果想提取某个元素，最直接的方法是采用方括号加序号的形式，例如；

$("img[title]")[1]

获取了所有设置了title属性的img标记中的第二个元素。jQuery也提供了get(index)方法来提取元素，以下的代码与上面的完全等效

$("img[title]")get(1)

get方法在不设置任何参数时，可以将元素转化为一个元素对象的数组，如下的例子：

<style>div {border: 1px solid #003a75;background-color: #FFFF00;margin: 5px;padding: 20px;text-align: center;height: 20px;width: 20px;float: left;}}</style><script type="text/javascript">function displayleb(ndiv) {for (var i = 0; i < ndiv.length; i++)$(document.body).append($("<div style='background:"+ndiv[i].style.background + ";'>" + ndiv[i].innerHTML + "</div>"));}$(function(){var aDiv = $("div").get();//转化为div对象数组
                displayleb(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>

上面代码将页面本身的6个<div>块用get()方法转化为数组，然后用数组反序reverse()，并传给displayleb()函数，再将其一个个现在页面中。

get(index)方法可以获取指定位置的元素，反过来，index(element)方法可以查找元素的element所处的位置。例如

var iNum=$("li").index($(li[title=isaac]")[0])

以上取<li titile="isaac">标记在整个<li>标记列表所处的位置，并将该位置返回给整数iNum.如下举例index(element)方法的典型运用。

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

    <style>div {border: 1px solid #003a75;background-color: #FFFF00;margin: 5px;padding: 20px;text-align: center;height: 20px;width: 20px;float: left;}}</style><script type="text/javascript">$(function() {//div click()添加单击函数
                $("div").click(function() {//将本身通过this关键字传入，获取自身的序号。var index = $("div").index(this) + 1;$("#display").html(index.toString());})});</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>单击的是第<span id="display"></span>个div。

以上代码块本身用this关键字传入index()方法中，获取自身的序号，并且利用click()添加事件，将序号显示出来。

3.添加、删除、过滤元素

除了获取选择元素外，jQuery还提供了一系列的方法来修改元素集合，例如用add()的方法添加元素。

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

以上代码将设置了alt元素的图像和说呀设置了title属性的图像组合在一起，供别的方法统一调运。它完全等同于

$("img[alt],img[title]")

例如，可以讲组合后的元素集统一添加css属性。

$("img[alt]").add("img[title]").addClass("altcss")

与add()方法相反,not()方法可以去除元素集合中的某些元素形成集合

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

以上代码表示，选中所有设置了title属性的标记，但不包括title的值中包含"isaac"的<li>。

例：

<style>div {border: 1px solid #003a75;background-color: #FFFF00;margin: 5px;padding: 20px;text-align: center;height: 20px;width: 20px;float: left;}.altcss {border: 2px solid #000000;}}</style><script type="text/javascript">$(function() {$("div").not(".green, #blueone").addClass("altcss");});</script><div></div><div id="blueone"></div><div></div><div class="green"></div><div class="green"></div><div class="gray"></div><div></div>

以上的Jquery通过not()的方法去掉风格为"green"和"blueone"的<div>块，给剩下的div块加altcss样式。

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

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

正确的写法是：

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

除了add()和not()外，jQuery还提供了更强大的filter()方法来筛选元素。filter()可以接受两种类型的参数，一种与not()方法一样，接受通用的表达式。代码如下:

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

以上的代码表示:筛选出title值包含isaac字符串的li元素组合。

与

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

所筛选的组合相同。

<script type="text/javascript">$(function() {$("div").addClass("css1").filter("[class*=middle]").addClass("css2");});</script><div></div><div class="middle"></div><div class="middle"></div><div class="middle"></div><div class="middle"></div><div></div>

以上代码中其中4个class属性为middle，Jq先给所有的div块都添加了css1样式，然后通过filter()方法，把class中包含middle的div添加css2样式。

在filter()的参数中，不能直接的等于匹配(=),只能使用前匹配(^=)、后匹配(&=)，或者任意匹配(*=).

filter()另外一种类型的参数是函数，对于返回ture元素匹配保留，否则排除集合。函数参数功能十分强大，可以让用户自定义筛选函数。

例如：

<script type="text/javascript">$(function() {$("div").addClass("css1").filter(function(index) {return index == 1 || $(this).attr("id") == "fourth";}).addClass("css2");});</script>
<div id="first"></div><div id="second"></div><div id="third"></div><div id="fourth"></div><div id="fifth"></div>

以上jq执行:

将所有的div添加css1然后利用filter()返回的函数将div列表中第一个（index为1），id是fourth的div元素筛选出来，添加css2.

4.查询过滤新元素组

jq还提供了一些很有的用的方法组合，通过查询来获取新元素组合。例如find()方法。通过匹配选择器来筛选元素

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

表示查找到<p>标记下含有<span>标记的组合

完全等于

$("span",$("p"))

$(function(){$("p").find("span").addClass("css1");
});<p><span>Hello</span>, how are you?</p>

表示给Hello添加css1的样式.

另外，还可以通过is()方法来检测是否包含指定的元素，例如可以通过下面代码检测页面中<div>块中是否包含图片。

var himg = $("div").is("img");

试想下，is()还可以结合filter()使用，是不是很惬意？

转载于:https://www.cnblogs.com/ahthw/p/4231446.html

jQuery应用之（二）使用jQuery管理选择结果（荐）相关推荐

jQuery学习（二）—jQuery对象的获取
jQuery学习(二)-jQuery对象的获取
jQuery学习教程二十: jQuery 遍历 - 后代
后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...
jQuery选择器（二）
目录一.简述jQuery语法结构二.jQuery选择器 1.简述 2.基本选择器 1.1标签选择器 1.2类选择器 1.3ID选择器 1.4并集选择器 1.5全局选择器 3.层次选择器 1.1后代 ...
php表单复选传值,jQuery+SpringMVC中的复选框选择与传值实例_jquery
下面我就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例,具有很好的参考价值,希望对大家有所帮助. 一.checkbox选择在jQuery中,选中checkbox通用的两种方式 ...
jQuery基础修炼圣典—DOM篇（二）jQuery遍历
1.children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配 ...
跟我学jQuery(二) 初识jQuery
跟我学jQuery教程目录: 跟我学jQuery(一) 前言跟我学jQuery(二) 初识jQuery 跟我学jQuery(三) 无所不能的选择器1 跟我学jQuery(四) ...
jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件
jquery插件课程1 幻灯片.城市选择.日期时间选择.拖放.方向拖动插件一.总结一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...
jQuery学习（十二）—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结一.find方法作用:在元素1中查找元素2,类似于选择器中的后代选择器格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
lodop jquery.qrcode打印二维码
记录下lodop jquery.qrcode打印二维码:参考价值在me.CreateOneFormPage (): 具体去我的下载里边找demo: 方法具体代码如下: var LODOP; //声明为 ...
jQuery-w3school（2020.2.16）【二、jQuery教程】
二.jQuery教程 (一)jQuery简介 1.jQuery 是一个 JavaScript 库.jQuery 极大地简化了 JavaScript 编程. 2. jQuery 库可以通过一行简单的标记 ...

jQuery应用之（二）使用jQuery管理选择结果（荐）

jQuery应用之（二）使用jQuery管理选择结果（荐）相关推荐

最新文章

热门文章