jQuery笔记

选择器

一、基础选择器

  1. var allEle=$('*')——查找文档中的每一个元素

  2. $('.class')——选择给定样式类名的所有元素。

    1
    2
    3
    4
    5
    6
    7
    <body>
        <div class="class1 class2" id="div1">class1 class2</div>
        <div class="class1 class3">class1 class3</div>
        <script>
            $('.class1').text('选中了');//选中所有包含'class1'的元素
        </script>
    </body>

    一个元素可以有多个类；其中只有一个必须匹配。

  3. $('tagName')——根据给定（html）标记名称选择所有的元素。

    1
    $('div').css({width: '100',height: '100',backgroundColor: 'grey'})//同时选中上面两个div

  4. $('#id')——选择一个具有给定id属性的单个元素。

    1
    2
    3
    4
    $('#div1')//选中id为div1的div
    <div id="myID.entry[1]">id="myID.entry[1]"</div>
    $("#myID\\.entry\\[1\\]")
    //（当ID中包含点号、冒号等字符，需要用\转义）

  5. $('selector1,selector2,selectorN,..')——组合选择器->将每一个选择器匹配到的元素合并后一起返回。

    1
    2
    3
    4
    5
    <div>div</div>
    <p class="myClass">p class="myClass"</p>
    <p class="notMyClass">p class="notMyClass"</p>
    <span>span</span>
    $("div,span,p.myClass")//将同时选中div、span和class为'myClass'的p标签三个标签，返回的顺序与dom元素本身在文件中的顺序相关

二、基础过滤选择器

  1. $(':eq(index)')——在匹配的集合中选择索引值为index的元素。index从0开始

    • $(':eq(-index)')——‘-index’表示倒数第index个
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <body>
      <ul class="nav">
       <li>List 1, item 1</li>
       <li>List 1, item 2</li>
       <li>List 1, item 3</li>
    </ul>
    <ul class="nav">
      <li>List 2, item 1</li>
      <li>List 2, item 2</li>
      <li>List 2, item 3</li>
    </ul>
     
    <script>
    /* applies yellow background color to a single <li> */
    $("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" );
     //直选中第一个li

    /* applies italics to text of the second <li> within each <ul class="nav"> */
    $("ul.nav").each(function(index) {
      $(this).find("li:eq(1)").css( "fontStyle", "italic" );
    });
    //每个class为nav的ul的第二个元素 

    /* applies red text color to descendants of <ul class="nav"> */
    /* for each <li> that is the second child of its parent */
    $("ul.nav li:nth-child(2)").css( "color", "red" );
    </script>

  2. $('div:even')——选择索引值为偶数的元素，从 0 开始计数。

  3. $('div:odd')——选择索引值为奇数元素，从 0 开始计数。

  4. $('div:first')——选择第一个匹配的元素被选中的元素按照他们在文档中出现的顺序。

    • 被选中的元素按照他们在文档中出现的顺序。
    • 相反于：:eq(0)[索引等于0]、:lt(1)[索引小于1]

  5. $(':last')——选择最后一个匹配的元素。

  6. $(':lt(index)')——选择匹配集合中所有索引值小于给定index参数的元素。

  7. $(':gt(index)')——选择匹配集合中所有大于给定index（索引值）的元素*

    • index: 从0开始计数的索引值。
    • -index: 从0开始计数的索引值。 从最后一个元素开始反向计数。

  8. $(':focus')——选择当前获取焦点的元素。

  9. $(':not(selector)')——选择所有元素去除不匹配给定的选择器的元素。

    • 所有的选择器可以放置在 :not()中，例如 :not(div a) 和 :not(div,a)。

  10. $(:header)—— 选择所有标题元素，像h1, h2, h3 等.

  11. $(:root)——选择该文档的根元素。在HTML中，文档的根元素为<html>

  12. $(':lang(language)')——选择指定语言的所有元素。language为语言代码

    1
    2
    3
    4
    <html lang="en">
    $(':lang(en)').css({
        border: '1px solid blue'
    })//这种情况会选中页面中的每个元素

  13. $(':animated')—— 选择所有正在执行动画效果的元素.

  14. $(':target')——与锚点相关

三、属性选择器

$("tag[attrName='value']")

$('tag[attrName|="value"]')——匹配前缀，需要”-“

$("tag[attrName*='value']")——属性名中包含”value”

$("tag[attrName~='value']")——匹配单词”value”

  1. $("tag[attrName='value']")——选择指定属性是给定值的元素。

    1
    2
    3
    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <input type="radio" name="newsletter" value="Cold Fusion" />
    $('input[value="Hot Fuzz"]')//选中第一个

  2. $('tag[attrName|="value"]')——选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。

    • value: 一个属性值，可以是一个不带引号的一个单词或带一个引号的字符串。
    1
    2
    3
    4
    5
    6
    7
    <a href="example.html" hreflang="en">Some text</a> 
    <a href="example.html" hreflang="en-UK">Some other text</a>
    <a href="example.html" hreflang="english">will not be outlined</a>
    <script>
    	$('a[hreflang|="en"]').css('border','3px dotted green');
    	//选中前两个a标签
    </script>

  3. $("tag[attrName*='value']")——选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）

    1
    2
    3
    4
    5
    6
    7
    8
    <input name="man-news" />
    <input name="milkman" />
    <input name="letterman2" />
    <input name="newmilk" />
    <script>
        $('input[name*="man"]').val('has man in it!');
    	//选中所有name属性名中包含"man"的元素
    </script>

  4. $("tag[attrName~='value']")——选择指定属性用空格分隔的值中包含一个给定值的元素。【选择包含”value”这个单词的元素】

    1
    2
    3
    4
    5
    6
    <input name="man-news" />
    <input name="milk man" />//选中这个
    <input name="letterman2" />
    <input name="newmilk" />
    <script>
        $('input[name~="man"]').val('mr. man is in it!');</script>

  5. $("tag[attrName^='value']")——选择指定属性是以给定字符串开始的元素

  6. $("tag[attrName$='value']")——选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。

    1
    2
    3
    4
    5
    6
    7
    <input name="newsletter" />
    <input name="milkman" />
    <input name="newsboy" />
    <script>
        $('input[name^="news"]').val('news here!');//选中第一、三个
    	$('input[name$="letter"]').val('a letter');//选中第一个
    </script>

  7. $("tag[attrName!='value']")——选择不存在指定属性，或者指定的属性值不等于给定值的元素。

  8. $("tag[attrName]")——选择所有具有指定属性的元素，该属性可以是任何值。

    1
    $('div[id]')//选择所有具有id属性的div

  9. $("tag[attrName][filter][...]")——复合筛选

四、子元素过滤

  1. :first-child——选择所有父级元素下的第一个子元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div>
        <span>John,</span>
        <span>Karl,</span>
        <span>Brandon</span> 
    </div>
    <div>
        <p>p标签</p>
        <span>Glen,</span>
        <span>Tane,</span>
        <span>Ralph</span>
    </div>
    $("div span:first-child")//选择所有div元素下的第一个子元素，这个元素必须是span，否则不选中
    //或者说选择若干个span元素，他必须是他父元素下的第一个子元素
    //或者说，满足下面两个条件
    //1、是一个span元素；
    //2.是父元素的第一个子元素

  2. :last-child——选择所有父级元素下的最后一个子元素。【同上】

  3. :nth-child(index/even/odd/equation)——选择的他们所有父元素的第n个子元素。

    • index: 每个相匹配子元素的索引值，从1开始，也可以是字符串 even 或 odd，或一个方程式( 例如 :nth-child(even), :nth-child(4n) )。
    • 【同上】

  4. :nth-last-child(index/even/odd/equation)——选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。【同上】

    https://www.jquery123.com/nth-last-child-selector/

  5. :first-of-type ——选择所有相同的元素名称的第一个兄弟元素。

    • 选择器匹配元素应该满足下面两个条件：
    • $("span:first-of-type")
      1. 是一个span元素
      2. 是父元素下面第一个出现的

  6. :last-of-type——选择的所有元素之间具有相同元素名称的最后一个兄弟元素。【同上】

  7. :nth-of-type(index/even/odd/equation)——选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。

    • index: 每个相匹配子元素的索引值，从最后一个开始(1)，也可以是字符串 even 或 odd，或一个方程式( 例如 :nth-last-of-type(even), :nth-last-of-type(4n))

    • 【同上】

  8. :nth-last-of-type(index/even/odd/equation)——选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。

    • 【同上】

  9. :only-child——如果某个元素是其父元素的唯一子元素，那么它就会被选中。

  10. :only-of-type——选择所有具有相同的元素名称的元素。这个元素在所有兄弟元素中是唯一的

    • 如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。
    • $("button:only-of-type")

五、内容过滤

  1. :contains(text)——选择所有包含指定文本的元素。
    • text: 用来查找的一个文本字符串。这是区分大小写的。
  2. :empty—— 选择所有没有子元素的元素（包括文本节点）。
  3. :has(selector)—— 选择元素其中至少包含指定选择器匹配的一个元素。
    • 如果表达式 $('div:has(p)') 匹配一个 <div>，那么应有一个<p>存在于 <div> 后代元素中的任何地方，不是直接的子元素也可以。
  4. :parent——选择所有含有子元素或者文本的父级元素。
    • 需要注意的一件重要的事情是:parent (和 :empty)所涉及的子元素，包括文本节点。

六、层级

  1. parent > child——选择所有指定“parent”元素中指定的”child”的直接子元素。
  2. ancestor descendant——选择给定的祖先元素的所有后代元素。
    • $("form input")选中form下面的所有input标签
  3. prev + next——选择与“next”匹配且紧跟在同级“prev”之后的所有兄弟元素。
    • $( "label + input" )选择所有紧跟在label标签后面的input标签，label和input标签应该是兄弟
  4. prev ~ siblings——*匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。
    • $("#prev ~ div")查找所有跟在 id 为 #prev 的元素后面的所有 类型为div的兄弟元素

七、表单

八、可见性过滤

DOM操作

class属性

  1. .addClass( className )——为每个匹配的元素添加指定的样式类名

    • .addClass( function(index, currentClass) )
    • 这个函数返回一个或更多用空格隔开的要增加的样式名。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合中的当前元素。currentClass表示元素当前class

  2. .removeClass( [className ] )—— 移除集合中每个匹配元素上一个，多个或全部样式。每个匹配元素移除的一个或多个用空格隔开的样式名。|不给参数默认清除全部类

    • .removeClass( function(index, class) )
    • 一个函数，返回一个或多个将要被移除的样式名。index 参数表示在所有匹配元素的集合中当前元素的索引位置。class 参数表示原有的样式名。

  3. .toggleClass( className )——在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。

    • .toggleClass( className, switch )【switch为true时一直添加】
    • .toggleClass( function(index, class, switch) [, switch ] )
    • 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

  4. .hasClass( className )——确定任何一个匹配元素是否有被分配给定的（样式）类。

    • 如果匹配元素上有指定的样式，那么.hasClass() 方法将返回 true ， 即使元素上可能还有其他样式。 举个例子, 给上文的HTML加上下面的代码将返回 true：

css属性

  1. .css()——获取匹配元素集合中的第一个元素的样式属性的值 或 设置每个匹配元素的一个或多个CSS属性。
    • 设置CSS属性
    • 获取CSS属性
    • .css( propertyName, value )(属性名，属性值)
    • .css( propertyName, function(index, value) )(属性名，返回属性值的函数)this 是当前元素。接收index 参数表示元素在匹配集合中的索引位置
    • .css(properties)(一个 属性-值 配对的对象)
  2. .height()获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。
  3. .width()为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度。
  4. .innerHeight()为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border
  5. .innerWidth()为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。
  6. .outerWidth()获取元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。（注：返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。）
  7. .outerHeight()获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。
  8. .offset()在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。 设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。
  9. .position()获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 )
  10. .scrollLeft()获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。设置每个匹配元素的垂直滚动条位置

DOM元素操作

DOM 插入并包裹现有内容
  1. 复制.clone()创建一个匹配的元素集合的深度拷贝副本。
  2. .unwrap()将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
  3. .wrap()在每个匹配的元素外层包上一个html元素。
  4. .wrapInner()在匹配元素里的内容外包一层结构。wrap和wrapInner接受函数作为参数，函数返回值为html元素或HTML结构
  5. .wrapAll()在所有匹配元素外面包一层HTML结构。
DOM 插入现有元素内
  1. .append()在每个匹配元素里面的末尾处插入参数内容。【具有剪切功能】
  2. .appendTo()将匹配的元素插入到目标元素的最后面（译者注：内部插入）。
  3. .html()获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容。
  4. .prepend()将参数内容插入到每个匹配元素的前面（元素内部）。
  5. .prependTo()将所有元素插入到目标前面（元素内）。
  6. .text()得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。
DOM 插入现有元素外
  1. .after()在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
  2. .before()根据参数设定，在匹配元素的前面插入内容（译者注：外部插入）
  3. .insertAfter()在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。
  4. .insertBefore()在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。
DOM 移除
  1. .detach()从DOM中去掉所有匹配的元素。
    • .detach() 方法和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。
  2. .empty()从DOM中移除集合中匹配元素的所有子节点。
  3. .remove()将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。）
    • 和 .empty()相似。.remove() 将元素移出DOM。 当我们想将元素自身移除时我们用 .remove()，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。要删除的元素不删除数据和事件的情况下，使用.detach()来代替。
DOM替换
  1. .replaceAll(targrt)用集合的匹配元素替换每个目标元素。target被替换
  2. .replaceWith()用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。谁调用谁被替换
通用属性操作

这些方法用于获取和设置 DOM 元素的属性。

  1. .attr()获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。
    • .attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值， 我们需要依靠jQuery的 .each()或者.map()方法循环。
  2. .prop()获取匹配的元素集中第一个元素的属性（property）值为匹配的元素设置一个或多个属性（properties）。
  3. .removeAttr()为匹配的元素集合中的每个元素中移除一个属性（attribute）。
  4. .removeProp()为集合中匹配的元素删除一个属性（property）。
  5. .val()获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。

事件

表单事件

  1. .blur()为 “blur” 事件绑定一个处理函数，或者触发元素上的 “blur” 事件（注：此事件不支持冒泡）。
  2. .change()为JavaScript 的 “change” 事件绑定一个处理函数，或者触发元素上的 “change” 事件。
  3. .focus()为 JavaScript 的 “focus” 事件绑定一个处理函数，或者触发元素上的 “focus” 事件。
  4. .focusin()将一个事件函数绑定到”focusin” 事件。
  5. .focusout()将一个事件函数绑定到”focusout” 事件。
  6. .select()为 JavaScript 的 “select” 事件绑定一个处理函数，或者触发元素上的该事件。
  7. .submit()为 JavaScript 的 “submit” 事件绑定一个处理函数，或者触发元素上的该事件。

键盘事件

…

鼠标事件

…

浏览器事件

…

文档加载

…

绑定事件

** jQuery的选择器与CSS3基本一致 **