| 标题 | 使用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>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>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>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>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></div> <div></div> <div></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></div> <div></div> <div></div> <div></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()使用，是不是很惬意？ 以上就是本文的全部内容了，虽然有点长，但是还是建议小伙伴们仔细读一下，希望大家能够喜欢。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。