讨论班jQuery学习

Posted hengzhistudiofront-end

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了讨论班jQuery学习相关的知识,希望对你有一定的参考价值。

遍历

jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)html 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

结构关系举例:

技术分享图片

 图中的关系:

  • <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
  • <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
  • 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
  • 两个 <li> 元素是同胞(拥有相同的父元素)。
  • 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。

技术分享图片 祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

 


祖先

parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

 1 <script>
 2 $(document).ready(function(){
 3   $("span").parent().css({"color":"red","border":"2px solid red"});
 4 });
 5 </script>
 6 
 7 ……
 8 
 9 <div class="ancestors">
10   <div style="width:500px;">div (曾祖父元素)
11     <ul>ul (祖父元素)  
12       <li>li (父元素)
13         <span>span</span>
14       </li>
15     </ul>   
16   </div>
17 </div>

技术分享图片

parents() 方法

parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

 

 1 <script>
 2 $(document).ready(function(){
 3   $("span").parents().css({"color":"red","border":"2px solid red"});
 4 });
 5 </script>
 6
 7 
 8 <body class="ancestors">body (曾曾祖父元素)
 9   <div style="width:500px;">div (曾祖父元素)
10     <ul>ul (祖父元素)  
11       <li>li (父元素)
12         <span>span</span>
13       </li>
14     </ul>   
15   </div>
16 </body>

 

技术分享图片

parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

 

 1 <script>
 2 $(document).ready(function(){
 3   $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
 4 });
 5 </script>
 6 
 7 <body class="ancestors"> body (曾曾祖父元素)
 8   <div style="width:500px;">div (曾祖父元素)
 9     <ul>ul (祖父元素)  
10       <li>li (父元素)
11         <span>span</span>
12       </li>
13     </ul>   
14   </div>
15 </body>

 

技术分享图片

 


后代

children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

 1 <script>
 2 $(document).ready(function(){
 3     $("div").children().css({"color":"red","border":"2px solid red"});
 4 });
 5 </script>
 6 
 7 <body>
 8 <div class="descendants" style="width:500px;border:2px solid blue">div (当前元素) 
 9   <p>p (儿子元素)
10     <span>span (孙子元素)</span>     
11   </p>
12   <p>p (儿子元素)
13     <span>span (孙子元素)</span>
14   </p> 
15 </div>

技术分享图片

可以使用可选参数来过滤对子元素的搜索。

1 $(document).ready(function(){
2   $("div").children("p.1");
3 });

例子返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素。

find() 方法

find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

 1 <script>
 2 $(document).ready(function(){
 3   $("div").find("span").css({"color":"red","border":"2px solid red"});
 4 });
 5 </script>
 6 
 7 <div class="descendants" style="width:500px;border:2px solid blue">div (当前元素) 
 8   <p>p (儿子元素)
 9     <span>span (孙子元素)</span>     
10   </p>
11   <p>p (儿子元素)
12     <span>span (孙子元素)</span>
13   </p> 
14 </div>

技术分享图片

 1 <script>
 2 $(document).ready(function(){
 3   $("div").find("*").css({"color":"red","border":"2px solid red"});
 4 });
 5 </script>
 6 
 7 <div class="descendants" style="width:500px;border:2px solid blue">div (当前元素) 
 8   <p>p (儿子元素)
 9     <span>span (孙子元素)</span>     
10   </p>
11   <p>p (儿子元素)
12     <span>span (孙子元素)</span>
13   </p> 
14 </div>

技术分享图片

 


同胞

siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。(可使用选择器做过滤)

 1 <script>
 2 $(document).ready(function(){
 3   $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
 4 });
 5 </script>
 6 
 7 <div>div (父元素)
 8   <p>p</p>
 9   <span>span</span>
10   <h2>h2</h2>
11   <h3>h3</h3>
12   <p>p</p>
13 </div>

技术分享图片

next() 方法

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

 1 <script>
 2 $(document).ready(function(){
 3     $("h2").next().css({"color":"red","border":"2px solid red"});
 4 });
 5 </script>
 6 
 7 <div>div (父元素)
 8   <p>p</p>
 9   <span>span</span>
10   <h2>h2</h2>
11   <h3>h3</h3>
12   <p>p</p>
13 </div>

技术分享图片

nextAll() 方法

nextAll() 方法返回被选元素的所有跟随的(后面的)同胞元素。

 1 <script>
 2 $(document).ready(function(){
 3     $("h2").nextAll().css({"color":"red","border":"2px solid red"});
 4 });
 5 </script>
 6 
 7 <div>div (父元素)
 8   <p>p</p>
 9   <span>span</span>
10   <h2>h2</h2>
11   <h3>h3</h3>
12   <p>p</p>
13 </div>

技术分享图片

nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

 1 <script>
 2 $(document).ready(function(){
 3     $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
 4 });
 5 </script>
 6 
 7 <div>div (父元素)
 8   <p>p</p>
 9   <span>span</span>
10   <h2>h2</h2>
11   <h3>h3</h3>
12   <h4>h4</h4>
13   <h5>h5</h5>
14   <h6>h6</h6>
15   <p>p</p>
16 </div>

技术分享图片

prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)。

 


过滤

三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法

first() 方法返回被选元素的首个元素。

 1 <script>
 2 $(document).ready(function(){
 3   $("div p").first().css("background-color","yellow");
 4 });
 5 </script>
 6 
 7 <h1>欢迎访问我的主页</h1>
 8 <div>
 9     <p>这是 div 中的一个段落。</p>
10 </div>
11 
12 <div>
13     <p>这是另外一个 div 中的一个段落。</p>
14 </div>
15 
16 <p>这是一个段落。</p>

技术分享图片

last() 方法

last() 方法返回被选元素的最后一个元素。

 1 <script>
 2 $(document).ready(function(){
 3     $("div p").last().css("background-color","yellow");
 4 });
 5 </script>
 6 
 7 <h1>欢迎访问我的主页</h1>
 8 <div>
 9     <p>这是 div 中的一个段落。</p>
10 </div>
11 
12 <div>
13     <p>这是另外一个 div 中的一个段落。</p>
14 </div>
15 
16 <p>这是一个段落。</p>

技术分享图片

eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。

 1 <script>
 2 $(document).ready(function(){
 3   $("p").eq(1).css("background-color","yellow");
 4 });
 5 </script>
 6 
 7 <h1>欢迎访问我的主页</h1>
 8 <p>菜鸟教程 (index 0).</p>
 9 <p>http://www.runoob.com (index 1)。</p>
10 <p>google (index 2).</p>
11 <p>http://www.google.com (index 3)。</p>

技术分享图片

filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

 1 <script>
 2 $(document).ready(function(){
 3    $("p").filter(".url").css("background-color","yellow");
 4 });
 5 </script>
 6 
 7 <h1>欢迎访问我的主页</h1>
 8 <p>菜鸟教程 (index 0).</p>
 9 <p class="url">http://www.runoob.com (index 1)。</p>
10 <p>google (index 2).</p>
11 <p class="url">http://www.google.com (index 3)。</p>

技术分享图片

not() 方法

not() 方法返回不匹配标准的所有元素。

提示:not() 方法与 filter() 相反

 1 <script>
 2 $(document).ready(function(){
 3    $("p").not(".url").css("background-color","yellow");
 4 });
 5 </script>
 6 
 7 <h1>欢迎访问我的主页</h1>
 8 <p>菜鸟教程 (index 0).</p>
 9 <p class="url">http://www.runoob.com (index 1)。</p>
10 <p>google (index 2).</p>
11 <p class="url">http://www.google.com (index 3)。</p>

技术分享图片

 

以上是关于讨论班jQuery学习的主要内容,如果未能解决你的问题,请参考以下文章

基础班学习心得

web前端开发JQuery常用实例代码片段(50个)

扩招|大数据与机器学习文献讨论班成员招募

jQuery应用 代码片段

jQuery 将 div 切片成动画片段

Visual Studio 2012-2019的130多个jQuery代码片段。