码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习笔记

时间:2016-10-09 17:29:44      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

1: $ = jQuery    $() = jQuery()

2:CSS选择符(多个选择器组合用”,"隔开)

  ①,属性选择符 $(‘a[href^="mailto:"]‘)表示href以“mailto:”开头的a元素。同样$表示结尾,*表示通配符。属性可以写多个,如$(‘a[href$=".pdf"][href*="strive"]‘)表示href以.pdf结束且含有strive的a元素

  ②,层次选择器

    1,祖先后代选择器(空格)。$(“ancestor descendant”). 返回符合条件的所有的后代元素。

    2,父子选择器( > )。$(“parent > child”)。返回所有符合条件的子元素。(子元素只有一辈,后代元素有很多辈)。

    3,隔壁选择器 (+)(后向)。$(“prev + next”)。返回同辈中 紧邻在prev元素之后的next元素。注意:只返回一个next,且要求prev和next同辈。 【效果类似next()方法】

    4,邻居选择器(~)(后向)。$(“prev ~ siblings”)。返回在prev元素之后所有同辈元素。 【效果类似nextAll()方法】

    

3: 自定义选择符 

  用在CSS选择器后面,进一步筛选,语法类似CSS中的伪类,以冒号(:)开头。
  几个自定义选择符, ①, :eq(n) 第n个,从0开始计数

            ②, :even/:odd 偶/奇

              ③, :nth-child(),参数可为数字或者odd/even,这是jQuery中唯一从1开始计数的选择器。(注意:浏览器选择时是从右向左的)

              ④, :contains() 参数为字符串,但是不用加引号,区分大小写

           ⑤, :not() 否定式伪类选择符. 参数为选择符,不用加引号。如:not(.classname)。

           ⑥, :has()。参数为选择符,不用加引号。

4: DOM遍历方法

  ①  filter()方法。筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式(同多个CSS选择器).参数可接受函数

  ②  next()方法。返回下一个紧邻的同辈元素,(效果类似于CSS选择符中的隔壁选择器)

       nextAll()方法。返回后面所有的同辈元素,(效果类似于CSS选择符中的邻居选择器)

     prev()方法。返回前一个紧邻的同辈元素,

       prevAll()方法。返回前面所有的同辈元素,

    siblings()方法。返回所有的同辈元素。

   parent()方法。返回唯一的父元素,

      parents()方法。返回所有的直系祖先元素,(父元素只有一个,祖先元素可有很多)

      children()方法。返回所有的子元素。(注意:只返回子元素,子元素之后的后代元素不选择【可用CSS选择符中的后代选择器】)

   find()方法。搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

   

  ③  addBack()方法。jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个DOM遍历方法被调用时,新的元素集合推入到堆栈中。 如果还需要包含先前的元素集合,.addBack() 可以提供帮助。考虑一个页面,一个简单的列表就可以了:

                <ul>
                  <li>list item 1</li>
                  <li>list item 2</li>
                  <li class="third-item">list item 3</li>
                  <li>list item 4</li>
                  <li>list item 5</li>
                </ul>

                下面的代码的返回结果是后面3,4和5项是一个红色的背景:

                $(‘li.third-item‘).nextAll().addBack().css(‘background-color‘, ‘red‘);

           首先,初始选择位于第3项,初始化堆栈集合只包含这项。调用.nextAll() 后将第4和第5项推入堆栈。最后,调用.addBack() 合并这两个组元素在一起,创建一个jQuery对象,指向           所有三个项元素(按照文档中的顺序):{[<li.third-item>,<li>,<li> ]}

  ④:

 

jQuery学习笔记

标签:

原文地址:http://www.cnblogs.com/everest33Tong/p/5942761.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!