【jQuery】

        jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高

的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。


一、选择器


事例代码:

<!DOCTYPE html>
<
html lang="en">
<
head>
  <
meta charset="UTF-8">
  <
title>Title</title>
  <
style>
       
.r{
          background-color: #00a2ca;
       }
  </style>
</
head>
<
body>
  <
script src="jquery-2.2.3.js"></script>
  <
div id="i1">123</div>
  <
div id="i2">456</div>
  <
div class="c1">1</div>
  <
div class="c1">2</div>
  <
div class="c1">3</div>
  <
div class="c1">4</div>
  <
script>
 
$("#i1").text('test');
  $(".c1").addClass('r');
  $("div");
  </script>
</
body>
</
html>

【基本选择器】


1.   $("#myDiv");    查找 ID 为"myDiv"的元素。

    HTML 代码:

        <div id="notMe"><p>id="notMe"</p></div>

        <div id="myDiv">id="myDiv"</div>

    jQuery 代码:

        $("#myDiv");

    结果:

        [ <div id="myDiv">id="myDiv"</div> ]

    

     $("#i1").text('test')  //赋值

    

2.    $("div"); 查找一个 DIV 元素

    HTML 代码:

        <div>DIV1</div>

        <div>DIV2</div>

        <span>SPAN</span>

    jQuery 代码:

        $("div");

    结果:

        [ <div>DIV1</div>, <div>DIV2</div> ]



3.    $(".myClass"); 查找所有类是 "myClass" 的元素.

    HTML 代码:

        <div class="notMe">div class="notMe"</div>

        <div class="myClass">div class="myClass"</div>

        <span class="myClass">span class="myClass"</span>

    jQuery 代码:

        $(".myClass");

    结果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]


4.    $("*")  找到每一个元素

    HTML 代码:

        <div>DIV</div>

        <span>SPAN</span>

        <p>P</p>

    jQuery 代码:

        $("*")

    结果:

        [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]


5.    $("div,span,p.myClass") 找到匹配任意一个类的元素。

    HTML 代码:

        <div>div</div>

        <p class="myClass">p class="myClass"</p>

        <span>span</span>

        <p class="notMyClass">p class="notMyClass"</p>

    jQuery 代码:

        $("div,span,p.myClass")

    结果:

        [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

    


【层级选择器】


1.   $("form input") 找到表单中所有的 input 元素

    HTML 代码:

        <form>

          <label>Name:</label>

          <input name="name" />

          <fieldset>

              <label>Newsletter:</label>

              <input name="newsletter" />

         </fieldset>

        </form>

        <input name="none" />

    jQuery 代码:

        $("form input")

    结果:

        [ <input name="name" />, <input name="newsletter" /> ]


2.    $("form > input"); 匹配表单中所有的子级input元素。

    HTML 代码:

        <form>

          <label>Name:</label>

          <input name="name" />

          <fieldset>

              <label>Newsletter:</label>

              <input name="newsletter" />

         </fieldset>

        </form>

        <input name="none" />

    jQuery 代码:

        $("form > input")

    结果:

        [ <input name="name" /> ]

//注:1、2 的区别  一个是查找表单下所有符合的,一个是查找子集中所有符合的。


【基本筛选器】


1.    $('li:first');获取匹配的第一个元素,$('li:last');获取匹配的最后个元素

    HTML 代码:

        <ul>

            <li>list item 1</li>

            <li>list item 2</li>

            <li>list item 3</li>

            <li>list item 4</li>

            <li>list item 5</li>

        </ul>

    jQuery 代码:

        $('li:first');

        $('li:last');

    结果:

        [ <li>list item 1</li> ] [ <li>list item 5</li> ]


2.    $("input:not(:checked)"); 查找所有未选中的 input 元素

    HTML 代码:

        <input name="apple" />

        <input name="flower" checked="checked" />

    jQuery 代码:

        $("input:not(:checked)")

    结果:

        [ <input name="apple" /> ]


3.      $("tr:eq(1)");查找第二行

    HTML 代码:

        <table>

          <tr><td>Header 1</td></tr>

          <tr><td>Value 1</td></tr>

          <tr><td>Value 2</td></tr>

        </table>

    jQuery 代码:

        $("tr:eq(1)")

    结果:

        [ <tr><td>Value 1</td></tr> ]


4.  $("tr:gt(0)");查找第二第三行,即索引值是1和2,也就是比0大

    HTML 代码:

        <table>

          <tr><td>Header 1</td></tr>

          <tr><td>Value 1</td></tr>

          <tr><td>Value 2</td></tr>

        </table>

    jQuery 代码:

        $("tr:gt(0)")

    结果:

        [ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]



5.  $("tr:lt(2)");查找第一第二行,即索引值是0和1,也就是比2小

    HTML 代码:

        <table>

          <tr><td>Header 1</td></tr>

          <tr><td>Value 1</td></tr>

          <tr><td>Value 2</td></tr>

        </table>

    jQuery 代码:

        $("tr:lt(2)")

    结果:

        [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

    

【内容选择器】


1.    $("div:contains('John')");查找所有包含 "John" 的 div 元素

    HTML 代码:

        <div>John Resig</div>

        <div>George Martin</div>

        <div>Malcom John Sinclair</div>

        <div>J. Ohn

    jQuery 代码:

        $("div:contains('John')")

    结果:

        [ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]


2.    $("td:empty");查找所有不包含子元素或者文本的空元素

    HTML 代码:

        <table>

          <tr><td>Value 1</td><td></td></tr>

          <tr><td>Value 2</td><td></td></tr>

        </table>

    jQuery 代码:

        $("td:empty")

    结果:

        [ <td></td>, <td></td> ]


3.    $("div:has(p)").addClass("test");给所有包含 p 元素的 div 元素添加一个 text 类

    HTML 代码:

        <div><p>Hello</p></div>

        <div>Hello again!</div>

    jQuery 代码:

        $("div:has(p)").addClass("test");

    结果:

        [ <div class="test"><p>Hello</p></div> ]


4.    $("td:parent");查找所有含有子元素或者文本的 td 元素

    HTML 代码:

        <table>

          <tr><td>Value 1</td><td></td></tr>

          <tr><td>Value 2</td><td></td></tr>

        </table>

    jQuery 代码:

        $("td:parent")

    结果:

        [ <td>Value 1</td>, <td>Value 2</td> ]


【属性选择器】


1.    查找所有 name 属性是 newsletter 的 input 元素

    HTML 代码:

        <input type="checkbox" name="newsletter" value="Hot Fuzz" />

        <input type="checkbox" name="newsletter" value="Cold Fusion" />

        <input type="checkbox" name="accept" value="Evil Plans" />

    jQuery 代码:

        $("input[name='newsletter']").attr("checked", true);

    结果:

        [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]


2.    $("input[name^='news']");查找所有 name 以 'news' 开始的 input 元素

    HTML 代码:

        <input name="newsletter" />

        <input name="milkman" />

        <input name="newsboy" />

    jQuery 代码:

        $("input[name^='news']")

    结果:

        [ <input name="newsletter" />, <input name="newsboy" /> ]


3.    $("input[name$='letter']");查找所有 name 以 'letter' 结尾的 input 元素

    HTML 代码:

        <input name="newsletter" />

        <input name="milkman" />

        <input name="jobletter" />

    jQuery 代码:

        $("input[name$='letter']")

    结果:

        [ <input name="newsletter" />, <input name="jobletter" /> ]


4.    $("input[name*='man']");查找所有 name 包含 'man' 的 input 元素

    HTML 代码:

        <input name="man-news" />

        <input name="milkman" />

        <input name="letterman2" />

        <input name="newmilk" />

    jQuery 代码:

        $("input[name*='man']")

    结果:

        [ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]


二、筛选器


【筛选】


1.    $("li").eq(1)、$("li").eq(-2);获取匹配的第二个元素和倒数第二个元素

    HTML 代码:

        <ul>

            <li>list item 1</li>

            <li>list item 2</li>

            <li>list item 3</li>

            <li>list item 4</li>

            <li>list item 5</li>

        </ul>

    jQuery 代码:

        $("li").eq(1)

        $("li").eq(-2)

    结果:

        [ <li>list item 2</li> ] [ <li>list item 4</li> ]


2.    $('li').first()、$('li').last();获取匹配的第一个元素和最后一个元素

    HTML 代码:

        <ul>

            <li>list item 1</li>

            <li>list item 2</li>

            <li>list item 3</li>

            <li>list item 4</li>

            <li>list item 5</li>

        </ul>

    jQuery 代码:

        $('li').first()

        $('li').last()

    结果:

        [ <li>list item 1</li> ] [ <li>list item 5</li> ]

    

【查找】


1.  $("div").children()、$("div").children(".selected");查找DIV中的每个子元素,在每个div中

            查找 .selected 的类。

    HTML 代码:

        <p>Hello</p>

        <div>

        <span >Hello Again</span>

        </div>

        <p>And Again</p>

        <div>

        <span>Hello</span>

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

        <p>And Again</p>

        </div>

    jQuery 代码:

        $("div").children()

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

    结果:

        [ <span>Hello Again</span> ] [ <p class="selected">Hello Again</p> ]


2.    $("p").find("span");从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。

    HTML 代码:

        <p>

        <span>Hello</span>,how are you?

        </p>

    jQuery 代码:

        $("p").find("span")

    结果:

        [ <span>Hello</span> ]


3.    $("p").next();找到每个段落的后面紧邻的同辈元素。

    HTML 代码:

        <p>Hello</p>

        <p>Hello Again</p>

        <div>

        <span>And Again</span>

        </div>

    jQuery 代码:

        $("p").next()

    结果:

        [ <p>Hello Again</p>, <div><span>And Again</span></div> ]


4.    $("div:first").nextAll().addClass("after");查找当前元素之后所有的同辈元素。

    HTML 代码:

        <div></div><div></div><div></div><div></div>

    jQuery 代码:

        $("div:first").nextAll().addClass("after");

    结果:

        [ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

    

5.    $("p").parent();查找每个段落的父元素

    HTML 代码:

        <div>

        <p>Hello</p>

        <p>Hello</p>

        </div>

    jQuery 代码:

        $("p").parent()

    结果:

        [ <div><p>Hello</p><p>Hello</p></div>]


    $("p").parent(".selected");查找段落的父元素中每个类名为selected的父元素。

    HTML 代码:

        <div>

        <p>Hello</p>

                </div>

                <div class="selected">

        <p>Hello Again</p>

                </div>

    jQuery 代码:

        $("p").parent(".selected")

    结果:

        [ <div class="selected"><p>Hello Again</p></div> ]


    $("span").parents();找到每个span元素的所有祖先元素。

    $("span").parents("p");找到每个span的所有是p元素的祖先元素。


6.    $("p").prev();找到每个段落紧邻的前一个同辈元素。

    HTML 代码:

        <p>Hello</p>

        <div>

        <span>Hello Again</span>

        </div>

        <p>And Again</p>

    jQuery 代码:

        $("p").prev()

    结果:

        [ <div><span>Hello Again</span></div> ]

    

    $("p").prev(".selected");找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

    HTML 代码:

        <div>

        <span>Hello</span>

        </div>

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

        <p>And Again</p>

    jQuery 代码:

        $("p").prev(".selected")

    结果:

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

    

7. 给最后一个之前的所有div加上一个类

    HTML 代码:

        <div></div><div></div><div></div><div></div>

    jQuery 代码:

        $("div:last").prevAll().addClass("before");

    结果:

        [ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]



8.    $("div").siblings();找到每个div的所有同辈元素。

    HTML 代码:

        <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

    jQuery 代码:

        $("div").siblings()

    结果:

        [ <p>Hello</p>, <p>And Again</p> ]

    

    $("div").siblings(".selected");找到每个div的所有同辈元素中带有类名为selected的元素。

    HTML 代码:

        <div>

             <span>Hello</span>

        </div>

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

        <p>And Again</p>

    jQuery 代码:

        $("div").siblings(".selected")

    结果:

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

    

三、属性


【属性】


1.attr(name|properties|key,value|fn);设置或返回被选元素的属性值。

    参数name 描述:返回文档中所有图像的src属性值。

    jQuery 代码:

        $("img").attr("src");

    

    参数properties 描述: 为所有图像设置src和alt属性。

    jQuery 代码:

        $("img").attr({ src: "test.jpg", alt: "Test Image" });

    

    参数key,value 描述:为所有图像设置src属性。

    jQuery 代码:

        $("img").attr("src","test.jpg");

    

    参数key,回调函数 描述: 把src属性的值设置为title属性的值。

    jQuery 代码:

        $("img").attr("title", function() { return this.src });


2.     removeAttr(name);从每一个匹配的元素中删除一个属性

    $("img").