第5章 筛选函数

最新推荐文章于 2024-05-28 11:44:38 发布
最新推荐文章于 2024-05-28 11:44:38 发布
阅读量378 收藏
点赞数
文章标签： javascript xhtml java ViewUI
原文链接：http://www.cnblogs.com/netEagle/articles/1502326.html
版权

在第一、二章，详细讲解了JQuery的selector和filter，通过selector可以十分方便的从HTML文档中查找一批HTML元素，通过filter可以实现查找过滤，我们不妨将selector比做SQL中的Select语句，那么filter就相当于Where子句，本章的筛选则相当于子查询。

初学者对selector filter和JQuery筛选往往分不清楚，selector filter被用在selector expression（选择器表达式）中，是selector的组成部分，而JQuery筛选则是JQuery对象的函数。但两者的作用大同小异，都是为了更精确的得到需要的HTML元素。

 

1. 过滤函数

“过滤函数”这个名字很形象，用于获取JQuery对象中所包装的HTML元素的原一个子集。所有的过滤函数（JQuery 1.3.2中共8个）都要通过JQuery对象进行调用，绝大部分的过滤函数也都又返回JQuery对象，所以支持Chain的代码风格，如同Java中：

StringBuffer str = new StringBuffer();

str.append(“Hello”).append(“,”).append(“JQuery”).append(“.”).……

又如同C#中：

StringBuilder str = new StringBuilder();

str.Append(“Haha”).Append(“!”).……

又如LINQ中：

String[] linqObject = new string[]{……};

linqObject.Where(……).Count(……).……

 

1) eq(index)

获取JQuery对象中第index（从0开始）个元素，用JQuery对象包装后返回。使用语法：

jQuery(“selector”).eq(index)

参数index：从0开始的小标，表示获取第index个HTML元素。

返回值：JQuery对象，将第index个HTML元素包装。

eq(index)函数于:eq(index)的作用可以说是一模一样，jQuery(“selector”).eq(index)可以写作jQuery (“selector:eq(index)”)，两者没有区别。

前面我们学习过JQuery对象的get(index)函数，该函数于eq(index)差别很大。get(index)函数返回JQuery对象中的第index个HTML元素，返回值就直接是该HTML元素，而eq(index)函数返回的则是第index个元素的JQuery包装，返回值是JQuery对象。

有如下HTML代码：

<p> This is just a test.</p> <p> So is this</p>

编写如下JQuery代码：

$("p").eq(1)

结果为：

<p> So is this</p>

 

2) hasClass(class)

检查当前JQuery对象中包含的HTML元素是否有特定的样式类，如果有则返回true。该函数会检查JQuery对象中的所有HTML元素，只要有一个元素有特定的样式类，就返回true。使用语法：

jQuery(“selector”).hasClass(class)

参数class：要查的样式类名称。

返回值：bool。

该函数通常使用于仅包含一个HTML元素的JQuery对象，用于检查该HTML元素是否有特定的样式类，根据返回结果（bool）做特定的处理，有如下HTML代码：

<div>

<div class="item-style">

<h2>ASP.NET</h2>

</div>

<div>

<span>JavaScript</span>

</div>

<div class="item-style">

<h3>Silverlight</h3>

</div>

</div>

编写如下JQuery代码：

<script type="text/javascript">

jQuery(function() {

$("div").each(function(index) {

if ($(this).hasClass("item-style")) {

$(this).css("color", "red");

} else {

$(this).css("color", "blue");

}

});

});

</script>

在所有的div中，对包含样式item-style的将字体设置为红色，没有包含该样式的将字体设置为蓝色，运行结果如下（图5-1）：

wps_clip_image-1964

图5-1

 

3) filter(selector)

筛选出JQuery对象中与指定的selector相匹配的HTML元素，并使用JQuery对象进行封装。该函数十分类似SQL语句中的子查询，如：

SELECT N.Isbn, N.Name, N.Author, N.Picture FROM

(

SELECT ROW_NUMBER() OVER(ORDER BY Isbn ASC) AS ROWID,

Isbn, [Name], Author, Picture

FROM Books

) AS N

WHERE ROWID BETWEEN @StartIndex + 1 AND @StartIndex + @MaxRecords

使用语法：

jQuery(“selector”).filter(“selector”)

参数selector：标准的选择器列表（用逗号分隔）。

返回值：JQuery对象。

值得注意的是，filter(selector)函数的参数selector是一个标准的选择器列表，即每一个选择器可是“选择器”、“过滤器”的任意组合。有如下HTML代码：

<div>

<p>Hello</p>

<p>Hello Again</p>

<p class="selected">And Again</p>

</div>

编写如下JQuery代码：

$("p").filter(".selected")

执行结果为：

<p class="selected">And Again</p>

将JQuery代码改写为：

$("p").filter(".selected, :first")

执行结果为：

<p>Hello</p>, <p class="selected">And Again</p>

 

4) filter(function)

根据函数返回值从JQuery对象中筛选出部分HTML元素，并用JQuery对象包装结果。filter(function)会对JQuery对象中的所有HTML元素调用一次function，如果function返回true，则保留该元素，否则将元素从结果中移除。语法如下：

jQuery(“selector”).filter(function)

参数function：用于对JQuery对象进行筛选的函数。

返回值：JQuery对象。

参数function可以带一个参数（index），表示当前HTML元素的索引（从0开始），有如下HTML代码：

<div>

<p>

<span>Hello</span>

</p>

<p>How are you?</p>

</div>

编写如下JQuery代码：

$("p").filter(function(index) {

return $("span", this).length == 0;

});

找出不包含<span>元素的p元素，执行结果为：

<p>How are your?</p>

 

5) is(selector)

检查当前JQuery对象中的所有HTML元素，是否匹配特定的selector，如果匹配返回true，否则返回false。使用语法：

jQuery(“selector”).is(“selector”)

参数selector：标准的选择器（可以使“选择器”、“过滤器”的组合）。

返回值：bool。

该函数会检查JQuery对象中所有的HTML元素，只要有一个于selector匹配，就返回true。有如下HTML代码：

<div>

<div class="item-style">

<h2>ASP.NET</h2>

</div>

<div>

<span>JavaScript</span>

</div>

<div class="item-style">

<h3>Silverlight</h3>

</div>

</div>

编写JQuery代码：

<script type="text/javascript">

jQuery(function() {

$("div").each(function(index) {

if ($(this).is(".item-style")) {

$(this).css("color", "red");

} else {

$(this).css("color", "blue");

}

});

});

</script>

在所有的div中，对包含样式item-style的将字体设置为红色，没有包含该样式的将字体设置为蓝色，运行结果如下（图5-2）：

wps_clip_image-3903

图5-2

细心的朋友应该已经看出，该函数可以实现hasClass函数的功能。不错，在JQuery框架中，同样的一种功能往往会后多种实现方式，根据你的习惯，你可以任意的使用。但在不同的应用场景，使用不同的用法会带来更大的灵活性。

 

6) map(function)

将JQuery对象中的所有HTML元素转换成于这些元素相关的（如：元素的value属性）数组，参数function便是用来处理该转换，比如，我们可以将页面中所有的input 元素的值构成一个数组，就可以使用包含input元素的JQuery对象的map函数，转换为元素值的数组，语法如下：

jQuery(“selector”).map(function)

参数function：用于执行转换，函数返回值就是要转变的结果，函数上下文（this）就是当前HTML元素。

返回值：JQuery对象。

有如下HTML代码：

<div>

<form>

  <input type="text" name="name" value="Eagle"/>

  <input type="text" name="password" value="123"/>

  <input type="text" name="url" value="http://www.eagle.com/"/>

</form>

</div>

要获取所有表单项的值，并将所有的值组成一个数组，编写如下JQuery代码：

<script type="text/javascript">

jQuery(function() {

var arr = $("input").map(function() {

return $(this).val();

}).get();

});

</script>

上述代码中，$(“input”)获取页面中所有的表单项，map函数将每一个input元素转变为该元素的值（代码：return $(this).val()），在map返回的JQuery对象（该对象封装的值文本元素，注意：文本元素也是页面中的元素部分），JQuery对象的get()方法进行拆箱，获取所有的文本元素，最为数组返回。

 

7) not(selector)

筛选出JQuery对象中与指定的selector不相匹配的HTML元素，并使用JQuery对象进行封装。该函数如filter(selector)使用方法相同，但结果相反，这里不再详述。

 

8) slice(start, [end])

获取JQuery对象中下标从start到end的所有HTML元素，即取出JQuery对象中一个连续的子集，使用语法：

jQuery(“selector”).slice(start, [end])

参数start：开始下标（从0开始），如果指定的参数小于0，则与0等效。

参数end：结束下标，参数为可选参数，如果不指定，则表示直到JQuery对象介绍。

返回值：JQuery对象。

该函数相当于多个eq(index)的组合，如o.slice(1,3)，等效的JQuery代码为jQuery(o.eq(1), o.eq(2), o.eq(3))，其中o为JQuery对象。

 

2. 查找函数

“查找函数”于“过滤函数”及其相似，如果说“过滤函数”是获取JQuery对象的子集，那么“查找函数”则是获取JQuery对象的相关HTML元素的集合。

JQuery 1.3.2中共13个查找函数，功能包含了HTML元素操作的各个方面，另外，这13个函数的返回值都是JQuery对象类型，同样支持Chain编码风格。

 

1) add(expression)

用于链接多个selector所返回的HTML元素，并将最终结果封装成JQuery对象返回。现在有两个JQuery对象jQuery(“div”)、jQuery(“p”)，分别封装了div和p元素，要将这两个JQuery对象合成一个，就可以使用add(selector)函数，jQuery(“div”).add(“p”) 或 jQuery(“p”).add(“div”)。使用语法：

jQuery(“selector”).add(expression)

参数selector：标准的选择器、JQuery对象、HTML元素、HTML元素数组、HTML内容。

返回值：JQuery对象。

该函数的参数十分灵活，有如下几种用法：

1. 标准的选择器，追加该选择器返回的结果（追加到原始JQuery对象，即add函数的调用者）。

2. JQuery对象，直接追加该JQuery对象（到……）。

3. HTML元素，直接追加该HTML元素（到……）。

4. HTML元素数组，直接追加该HTML元素数据（到……）。

5. HTML内容，将该HTML内容创建为HTML元素后追加（到……）。

有如下HTML代码：

<div>

<ol>

<li>.NET 2.0</li>

<li>.NET 3.0</li>

<li>.NET 3.5</li>

</ol>

<ul>

<li>WinForm</li>

<li id="wpf">WPF</li>

<li>Silverlight</li>

</ul>

</div>

要获取有序列表中所有的列表项，和ID为wpf的无序列表项，并修改其字体颜色，JQuery代码如下：

<script type="text/javascript">

jQuery(function() {

$("ol>li").add("#wpf").css(“color”,”Red”);

});

</script>

或：

<script type="text/javascript">

jQuery(function() {

$("ol>li").add($("#wpf")).css("color", "red");

});

</script>

或：

<script type="text/javascript">

jQuery(function() {

$("ol>li").add(document.getElementById("wpf")).css("color", "red");

});

</script>

上述三种方法运行结果完全一样，如下图5-3：

wps_clip_image-6528

图5-3

另外，代码jQuery(“selector”).add(“<li>New Item</li>”)的作用等价于jQuery(“selector”).add (jQuery(“<li>New Item</li>”))。在jQuery的核心方法中，jQuery(html)表示创建html元素，但被创建的HTML元素并没有直接放在网页（DOM）中，所以网页时不会显示出来的（将HTML元素添加到页面中的方法在下一章详细讲解）。

 

2) children([selector])

获取JQuery对象中所有HTML元素的子元素，并使用JQuery对象进行封装。请注意，该函数不是用于获取当前JQuery对象中HTML元素的子集，而是每个HTML元素的子元素。使用语法：

jQuery(“selector”).childred([selector])

参数selector：子元素选择器，可选。如果没有提供，则获取所有的子元素。

返回值：JQuery对象。

值得注意的是，该函数于:nth-child(index)过滤器不同，:nth-child(index)过滤器用于获取元素子集。有如下HTML代码：

<div>

<p>Hello</p>

<div>

<span>Hello Again</span>

</div>

<p>And Again</p>

</div>

编写如下JQuery代码：

$("div").children()

执行结果为：

<span>Hello Again</span>

很显然，children用于找出div的子元素。

带参数的children函数也很简单，再看如下HTML代码：

<div>

<span>Hello</span>

<p class="selected">Hello Again</p>

<p>And Again</p>

</div>

编写如下JQuery代码：

$("div").children(".selected")

执行结果为：

<p class="selected">Hello Again</p>

 

3) closest([selector])

获取JQuery对象中每一个HTML元素于指定selector想匹配的最近的一个父元素。这句话读起来比较绕口，首先JQuery会对包装的每一个HTML元素进行循环，针对每一个HTML元素，就从该元素本身开始，根据指定的selector逐级向上级元素匹配，并返回最先匹配的元素，closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素，如果什么都没找到则返回一个空的jQuery对象。使用语法：

jQuery(“selector”).closest([selector])

参数selector：用于匹配父元素的选择器，没有传递该参数表示直接查找父元素。

返回值：JQuery对象。

调用closest函数的jQuery对象中有多少个HTML元素，往往返回的JQuery对象中也有多少个HTML元素，除非没有与指定selector匹配的父元素。

closest函数对于处理事件委派非常有效，有如下HTML代码：

<style type="text/css">

.item-style{

color:Red;

font-size:1.2em;

}

span{

color:Blue;

font-size:12px;

}

</style>

……

<div>

<ol>

<li>.NET 2.0</li>

<li>.NET <span>3.0</span></li>

<li>.NET 3.5</li>

</ol>

<ul>

<li>WinForm</li>

<li>WPF</li>

<li>Silverlight</li>

</ul>

</div>

当用鼠标点击每一个LI时，让该LI添加或移除item-style样式，一种做法可以为每一个LI注册onclick事件，但这样既繁琐、又不利于程序的扩展，closest函数可以解决这种问题。现在只对列表外面的div标签注册onclick事件：

<div οnclick=”setItemStyle();”>

……

</div>

编写如下JQuery代码：

<script type="text/javascript">

function setItemStyle() {

$(event.srcElement).closest("li").toggleClass("item-style");

}

</script>

上述JavaScript代码中，event是window对象的属性，表示当前事件，event的srcElement属性表示当前被点击的HTML元素。大家可能会很奇怪，为什么点击的是Li元素，而触发的事件却是在div元素上注册呢？因为网页中事件是会冒泡的，Li元素接收到事件后，自己没有处理功能，就将事件向上级元素传递（和closest函数的查找方式一样），最后被div捕获了事件。找到事件源（srcElement）后，从事件源开始向上搜索到Li元素，并在Li元素上切换item-style样式。

在浏览器中运行该页面，并点击.NET 3.0和Silverlight两项，执行后的结果如下图5-4：

wps_clip_image-8789

图5-4

 

4) contents()

查找JQuery对象中HTML元素的所有子节点（包括内容节点），而children()函数查找的是JQuery对象中HTML元素的所有子元素（不包括内容节点）。另外，contents()函数还会对iframe的内容进行查找。使用语法：

jQuery(“selector”).contents()

返回值：jQuery对象。

有如下HTML代码：

<div id="container">

Hello,<span>Frank</span>. Welcome to JQuery.

</div>

编写如下JQuery代码：

var count = $("#container").contents().size();

运行后count的值为3，表示包含三个子节点，第一个为“Hello,”文本型节点，第二个为“<span>Frank </span>”HTML元素节点，第三个为“.Welcome to JQuery.”文本型节点。

将JQuery代码改写为：

var count = $("#container").children().size();

运行后count的值为1，只包含一个“<span>Frank</span>”HTML元素。

 

5) find(selector)

在当前JQuery对象所包含的HTML元素中，进一步搜索特定selector所匹配的子元素，find函数会搜索每个HTML元素所有层次的子元素。使用语法：

jQuery(“selector”).find(“selector”)

参数selector：标准选择器，用于搜索子元素。

返回值：JQuery对象。

与find(selector)函数相似的函数有filter(selector)和children([selector])函数，一定要注意三者的区别：

l filter(selector)：查找JQuery对象所包含的HTML元素的子集（而不是子元素）。

l children([selector])：查找JQuery对象所包含的HTML元素的子元素，但不继续搜索子元素的子元素。

l find(selector)：查找JQuery对象所包含的HTML元素的所有层次的子元素。

有如下HTML代码：

<div>

<ol>

<li class="style">.NET 2.0</li>

<li>.NET <span class="style">3.0</span></li>

</ol>

<ul>

<li class="style">WinForm</li>

<li>

<div class="style">

<span>Silverlight</span>

</div>

</li>

<li>

<div>

<span class="style">Flex</span>

</div>

</li>

</ul>

</div>

使用filter函数，编写JQuery代码：

$("li").filter(".style")

返回结果为：

<li class=”style”>.NET 2.0</li>

<li class="style">WinForm</li>

而嵌套更深的HTML元素并没有包含，因为filter不搜索子元素（即Li的子元素），只过滤搜索到得Li。

使用children函数，编写JQuery代码：

$("li").children(".style")

返回结果为：

<span class="style">3.0</span>

<div class="style">

<span>Silverlight</span>

</div>

显而易见，children函数仅仅搜索HTML元素的子元素这一级，嵌套更深的子元素并没有搜索到。

使用find函数，编写JQuery代码：

$("li").find(".style")

该函数返回了所有Li子元素中（不包括LI本身，只搜索子元素），所有层次的带样式style的HTML元素。

综上所分析，find函数其实是组合选择器的另一种写法，代码$("li").find(".style")的另一种写法为$(“li .style”)，执行结果完全一样。

 

6) next([selector])

获取JQuery对象中每一个HTML元素紧邻的后面的一个同辈元素，并使用JQuery对象封装。使用语法：

jQuery(“selector”).next([selector])

参数selector：标准选择器，用于匹配当前元素后面的同辈元素。

返回值：JQuery对象。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素。有如下HTML代码：

<style type="text/css">

#container{

width:600px;

}

.item-style{

border:solid 1px #98B5E2;

margin-bottom:5px;

}

.item-style .header{

background-color:#C1D2EE;

font-size:1.2em;

padding:5px;

cursor:pointer;

}

.item-style .content{

padding:10px;

color:Blue;

}

.item-style .hide{

display:none;

}

</style>

……

<div id="container">

<div class="item-style">

<div class="header">find(selector)</div>

<div class="content hide">

在当前JQuery对象所包含的HTML元素中，进一步搜索特定selector所匹配的子元素；

find(selector)函数会搜索每个HTML元素所有层次的子元素。

</div>

</div>

<div class="item-style">

<div class="header">filter(selector)</div>

<div class="content hide">

查找JQuery对象所包含的HTML元素的子集（而不是子元素）。

</div>

</div>

</div>

运行效果如下图5-5：

wps_clip_image-11516

图5-5

上图中只显示了“header（标题）”，要在点击“header（标题）”是展开“content（内容）”部分，再点一次折叠“content”部分，编写如下JQuery代码：

<script type="text/javascript">

jQuery(function() {

$(".item-style .header").click(function() {

$(this).next().toggleClass("hide");

});

});

</script>

在浏览器中打开页面，并点击第一个标题，运行结果如下图5-6：

wps_clip_image-11800

图5-6

代码出奇的简单，功能出奇的强大。

 

7) nextAll([selector])

匹配当前JQuery对象中每个HTML元素之后匹配特定selector的同辈元素，并包装成JQuery对象返回。next函数只返回该元素之后匹配特定selector的一个同辈元素，而nextAll函数则返回该元素之后匹配特定selector的所有同辈元素。使用语法：

jQuery(“selector”).nextAll(selector)

参数selector：标准选择器，用于匹配当前元素之后的所有元素，可选。如果该参数没有指定，则匹配当前元素之后的所有元素。

返回值：JQuery对象。

有如下HTML代码：

<ul>

<li>ASP.NET</li>

<li>JavaScript</li>

<li>Silverlight</li>

</ul>

要设置除第一个外的所有Li元素的样式，JQuery代码如下：

$(“li:first”).nextAll().addClass(“className”)

 

8) offsetParent()

返回JQuery对象中每个HTML元素的第一个用于定位的父元素（用于定位的元素指的是，position属性设置为relative或absolute的元素）。

 

9) parent([selector])

获取与特定selector相匹配的父元素，并使用JQuery对象包装，只查找每个HTML元素父元素这一级，所有共同的父元素不重复返回。使用语法：

jQuery(“selector”).parent([selector])

参数selector：父元素选择器，可选参数。如果没有提供参数，则直接返回父元素，如果提供的selector与父元素不匹配，则不返回任何元素。

返回值：JQuery对象。

有如下HTML代码：

<div id="container">

<ul>

<li>ASP.NET</li>

<li>JavaScript</li>

<li>Silverlight</li>

</ul>

<ol>

<li>WinForm</li>

<li>JSP Servlet</li>

<li>SQL Server</li>

</ol>

</div>

编写如下JQuery代码：

$(“li”).parent();

则返回结果为包含2个元素的JQuery对象，分别为UL和OL元素。

将JQuery代码改写为：

$(“li”).parent(“ol”);

返回结果为只包含一个ol元素的JQuery对象，因为第一个列表中LI的父元素为UL，与OL不匹配，所以不返回任何东西。

将JQuery代码改写为：

$(“li”).parent(“div”);

返回结果为一个空的JQuery对象。

 

10) parents([selector])

获取所有与特定selector相匹配的祖先元素，并用JQuery对象进行包装，相同的祖先元素不重复返回。使用语法：

jQuery(“selector”).parents([selector])

参数selector：标准的选择器，用于匹配祖先元素，可选。如果参数没提供，则返回所有的祖先元素，如果没有与selector匹配的祖先元素，则不返回任何元素。有如下HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>JQuery</title>

</head>

<body>

<div id="container">

<ul>

<li>ASP.NET</li>

<li>JavaScript</li>

<li>Silverlight</li>

</ul>

<ol>

<li>WinForm</li>

<li>JSP Servlet</li>

<li>SQL Server</li>

</ol>

</div>

</body>

</html>

编写如下JQuery代码：

$(“li”).parents();

返回结果为包含5个HTML元素的JQuery对象，即UL元素、OL元素、DIV元素、BODY元素、HTML元素，由此可见，返回了所有祖先元素。

将JQuery代码改写为：

$(“li”).parents(“ol”);

返回结果为包含OL元素的JQuery对象。

将JQuery代码改写为：

$(“li”).parents(“div”);

返回结果为包含DIV元素的JQuery对象，可见，parents函数不仅仅搜索父元素，同样也会搜索所有的祖先元素。

 

11) prev([selector])

获取JQuery对象中每一个HTML元素紧邻的前面的一个同辈元素，并使用JQuery对象封装。

该函数与next([selector])函数用法一样，这里不再详述。

 

12) prevAll([selector])

匹配当前JQuery对象中每个HTML元素之前匹配特定selector的同辈元素，并包装成JQuery对象返回。

该函数与nextAll([selector])用法一样，这里不再详述。

 

13) siblings([selector])

获取所有同辈元素，并包装成JQuery对象，相同的同辈元素不会重复出现，该函数比较简单，这里不再详述。

 

3. 串联函数
1) andSelf()

在查找到的新的JQuery对象中加入自身！这个解释十分抽象，我们使用如下代码进行说明。有HTML代码如下：

……

<style type="text/css">

.borderStyle{

border:solid 1px blue;

}

</style>

……

<div id="container">

<ul>

<li>ASP.NET</li>

<li>JavaScript</li>

<li>Silverlight</li>

</ul>

<ol>

<li>WinForm</li>

<li>JSP Servlet</li>

<li>SQL Server</li>

</ol>

</div>

……

要找出页面ID为container的DIV元素和它的子元素OL，并为他们添加样式borderStyle，JQuery代码如下：

<script type="text/javascript">

jQuery(function() {

$("#container").addClass("borderStyle");

$("#container").find("ol").addClass("borderStyle");

});

</script>

上面代码分别为DIV元素和OL元素添加样式，我们也可以使用andSelf函数将上述两行代码合为一行，代码如下：

<script type="text/javascript">

jQuery(function() {

$("#container").find("ol").andSelf().addClass("borderStyle");

});

</script>

上述代码中，andSelft的作用是：在包含OL元素的JQuery对象中加入ID为container的DIV元素。运行结果如下图5-7：

wps_clip_image-14853

图5-8

 

2) end()

用于返回上一级JQuery对象，该函数也比较抽象，我们同样在下面例子中学习，有如下HTML代码：

……

<style type="text/css">

.ulStyle{

font-weight:bold;

}

.olStyle{

font-style:italic;

}

</style>

……

<div id="container">

<ul>

<li>ASP.NET</li>

<li>JavaScript</li>

<li>Silverlight</li>

</ul>

<ol>

<li>WinForm</li>

<li>JSP Servlet</li>

<li>SQL Server</li>

</ol>

</div>

分别为container中的UL元素和OL元素添加ulStyle和olStyle样式，JQuery代码如下：

<script type="text/javascript">

jQuery(function() {

$("#container").find("ul").addClass("ulStyle");

$("#container").find("ol").addClass("olStyle");

});

</script>

上述代码中，使用2行代码分别找到UL和OL元素然后再添加样式，我们也可以使用end()函数合成一行代码来完成，JQuery代码如下：

<script type="text/javascript">

jQuery(function() {

$("#container").find("ul").addClass("ulStyle")

.end().find("ol").addClass("olStyle");

});

</script>

在上述代码中，第一个addClass函数对应的JQuery对象包含UL元素，所以不能在该JQuery对象上继续查找OL元素。这里使用end()函数返回上一级，包含UL元素的JQuery对象是由find(“ul”)函数查找到得，所以就是返回到find(“ul”)函数的调用者，即$(“#container”)，既然已经返回到了container，那么接着使用find(“ol”)当然可以找到OL元素。

andSelf()和end()函数在JQuery对象上下级间包含、转换时非常有用。

转载于:https://www.cnblogs.com/netEagle/articles/1502326.html

SHINE1996527
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
filter()“筛选”函数
qq_28660653的博客
09-08 1418
Python内建的filter()函数用于过滤序列。 和map()类似，filter()也接收一个函数和一个序列。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是True还是False决定保留还是丢弃该元素。 例如，在一个list中，删掉偶数，只保留奇数，可以这么写： def is_odd(n): return n % 2 == 1 list...
筛选数据函数
yiqin的专栏
03-07 871
用C语言实现将脚本调试过程中正确和错误数据分别放入到本地指定的文件中 将这个函数放在vuser_init()的上方 SelectData(char *status) { long filedes_right; //保存正确账号文件句柄 long filedes_wrong; //保存错误账号文件句柄 char *filepath="C:\\test"; //filepa
EXCEL条件筛选函数
George的博客
08-21 9959
=IF(ISNUMBER(SEARCH("烟感",B3168)),"001",IF(ISNUMBER(SEARCH("手报",B3168)),"002",IF(ISNUMBER(SEARCH("消火栓",B3168)),"003",IF(ISNUMBER(SEARCH("温感",B3168)),"004"))))
clearinterval函数不生效_函数周期表丨筛选丨表丨ALLSELECTED
weixin_29707757的博客
12-01 174
ALLSELECTED函数ALLSELECTED函数，被微软划分为“筛选”类函数，隶属于“表函数”。其用途，常常是用来计算或者显示明面上的筛选影响，而忽略其行上下文的影响。如果说，CALCULATE函数是DAX中最灵活的函数，那么ALLSELECTED函数就是DAX中最复杂，也是最难的函数。作为ALL函数系列家族中的一员，它并不像其他ALL系列函数那样，可以称得上是个性鲜明。举个例子：如果说其他A...
excel筛选查询函数
nameyuxiang的专栏
06-04 1248
查询特定列包含一些值函数操作
EXCEL实用函数
05-28
操作步骤：选择菜单“数据/筛选/高级筛选”，确认数据区域为“A2：B204”，并将条件区域置空，选中“选择不重复记录”和“将筛选结果复制到其他位置”，在“复制到”中输入“A206”，“确定”。最后将第2至205行删除...
php 数组操作(增加，删除，查询，排序)等函数说明第1/2页
12-17
如果满足，则生成新的数组，这个新的数组就是满足查询条件的，条件：查询，并不是查询某一个值，还有查询某一个值满足某个条件，举个例子：查询数组中某个值大于5的，全部筛选出来) 1、php中的数组实质上是map结构，...
EXCEL函数功能整理版
05-30
45 DOLLAR 或 RMB 该函数依照货币格式将小数四舍五入到指定的位数并转换成文本。使用的格式为 ($#,##0.00_);($#,##0.00)。 46 DSUM 返回数据清单或数据库的列中满足指定条件的数字之和。 47 OFFSET ...
EXCEL函数公式集
03-16
如何设置页脚首页为第5页 表格的页脚问题 无拘无束的页眉 打印表头 Excel打印中如何不显示错误值符号 对于一些不可打印的字符的处理 用那个函数可将个位数前面的零值显示出来? 如果你要在A3的前面插入100行 请问如何...
原生js实现商品筛选功能
01-21
本文实例为大家分享了js商品筛选功能的具体代码，供大家参考，具体内容如下 用到的知识：js基础、dom、第一种方法用到的是js中的数组方法，第二种方法用到的是json和for-in以及es6 实现步骤 1、根据数据结构生成HTML...
jquery 筛选函数 功能总结
大洋
03-27 448
1、删除除第一个元素下的其他同辈元素 &lt;table id='tb'&gt; &lt;tr&gt;1&lt;/tr&gt; &lt;tr&gt;2&lt;/tr&gt; &lt;tr&gt;3&lt;/tr&gt; &lt;tr&gt;4&lt;/tr&gt; &lt;tr&gt;5&lt;/tr
jquery 筛选 - 查找函数 使用总结
大洋
05-30 361
1、返回值:jQuery children：匹配子元素的集合 注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
expression select表达式动态构建
Swarb的博客：低头做事，抬头做人
03-12 1635
参考：http://blog.csdn.net/tastelife/article/details/7340205http://blog.csdn.net/sweety820/article/details/39203087源码：        private static Expression&lt;Func&lt;TSource, TResult&gt;&gt; CreateSelecter&...
Excel函数应用（3）--筛选&随机数
萝卜丝儿皮尔
09-05 2045
1.rand() 返回一个0~1之间的随机数 可由此改编成10~100之间的随机数函数INT( 90*rand()+10)。 如上图，利用随机函数生成一批随机数，这时，它们的共同属于一个数组。因此，无法更改其中个别数据，而且经常会发生一些意想不到的变化（每次更新其他单元格都会引起随机数整体的变化）。所以，考虑固定随机数。方法：选中之后【复制】—按值【粘贴】。 2.RANDBETWEEN(bott...
【Java.Web】利用Selector表达式过滤消息
王晓斌的专栏
10-09 1993
在创建一个Consumer的时候，Session接口还提供了另一个方法： MessageConsumer createConsumer(Destination destination, java.lang.String messageSelector) //Creates a MessageConsumer for the specified destination, using a me
「RocketMQ专题」@RocketMQMessageListener selectorExpression属性不支持EL表达式 tag不生效 问题发现及解决方案
你走过的路 风都是暖的
01-13 9347
@RocketMQMessageListener selectorExpression属性不支持EL表达式 tag不生效 问题发现及解决方案
【jquery】find() 方法,filter()方法和children()方法
weixin_30668887的博客
10-24 137
1,find() 方法 找到的是 所有的后代元素,即是子孙元素 2,filter()方法 这个方法通常会和find()方法比较.filter()方法 过滤的是集合本身.举个例子$('p').find('.tag'); $('p').filter('.tag'); 有什么区别呢,第一行语句是在p标签下面的子元素去找是否有类为tag的元素.返回的元素若不为...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 1186
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1078
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
js filter函数如何每次筛选都是用得原始数据
05-27
在 JavaScript 中，Array 的 filter() 方法可以用来筛选数组中的元素，该方法会返回一个新的数组，新数组中包含了符合筛选条件的元素。如果您想在每次筛选时都使用原始数据，可以将原始数据保存在一个变量中，并在每次筛选时使用该变量。以下是一个示例代码： ```javascript // 原始数据 const data = [1, 2, 3, 4, 5]; // 筛选函数 const filterFunc = (item) => item > 2; // 第一次筛选 const result1 = data.filter(filterFunc); console.log(result1); // [3, 4, 5] // 第二次筛选 const result2 = data.filter(filterFunc); console.log(result2); // [3, 4, 5] ``` 在这个示例中，我们首先定义了原始数据 `data` 和筛选函数 `filterFunc`。然后，我们使用 `filter()` 方法对数据进行第一次筛选，并将结果存储在变量 `result1` 中。接下来，我们再次使用 `filter()` 方法对数据进行筛选，并将结果存储在变量 `result2` 中。由于在每次筛选时都使用了原始数据 `data`，因此两次筛选的结果是相同的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值