JQuery学习备份

Q1:找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。
A1: $("div > p");

Q2:在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
A2: $("input:radio",document.forms[0]);

Q3:在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。
A3: $("div",XMLHttp.responseXML);

Q4:动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。
A4: $("<div><p>Hello</p></div>").appendTo("body");

Q5:创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
A5: $("<input type='checkbox'>");

Q6:设置页面背景色。
A6: $(document.body).css("background","black");

Q7:隐藏一个表单中所有元素。
A7: $(myform.elements).hide();

Q8:当DOM加载完成后，执行其中的函数。
A8: $(function(){}); 或者 $(document).ready(function(){});

Q9:使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
A9:jQuery(function($) {// 你可以在这里继续使用$作为别名...});

Q10:迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
A10: $("img").each(function()
{
             this.src = "test" + i + ".jpg";
        });

Q11:如果你想得到 jQuery对象，可以使用 $(this) 函数。
A11: $("img").each(function()
        {
          $(this).toggleClass("example");
        });

Q12:你可以使用 'return' 来提前跳出 each() 循环。
A12: $("button").click(function ()
        {
          $("div").each(function (index, domEle)
             {
                // domEle == this
                $(domEle).css("backgroundColor", "yellow");
                if ($(this).is("#stop"))
                  {
                    $("span").text("Stopped at div index #" + index);
                    return false;
                  }
               }
           );
});

Q13:计算文档中所有图片数量。
A13: $("img").size(); 或者 $("img").length();

Q14:选择文档中所有图像作为元素数组，并用数组内建的 reverse 方法将数组反向。
A14: $("img").get().reverse();

Q15:选择文档中所有图像的第一个元素图像。
A15: $("img").get(0)

Q16:返回ID值为foobar的元素的索引值。
A16: $("div").index($('#foobar')[0]) // 0
     $("div").index($('#foo')[0]) // 2
     $("div").index($('#foo')) // -1

Q17:在一个div上存取数据。
A17: $("div").data("blah"); // undefined
     $("div").data("blah", "hello"); // blah设置为hello
     $("div").data("blah"); // hello
     $("div").data("blah", 86); // 设置为86
     $("div").data("blah"); // 86
     $("div").removeData("blah"); //移除blah
     $("div").data("blah"); // undefined

Q18:在一个div上存取名/值对数据。
A18: $("div").data("test", { first: 16, last: "pizza!" });
     $("div").data("test").first //16;
     $("div").data("test").last //pizza!;

Q19:查找 ID 为"myDiv"的元素。
A19: $("#myDiv");

Q20:查找含有特殊字符的元素。
A20:
HTML 代码:
<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>
jQuery 代码:
#foo\\:bar
#foo\\[bar\\]
#foo\\.bar

Q21:查找一个 DIV 元素。
A21: $("Div")

Q22:查找所有类是 "myClass" 的元素.
A21:
HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码:
$(".myClass");

Q22:找到每一个元素。
A22: $("*");

Q23:找到匹配任意一个类的元素。
A23:
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> ]

Q24:找到表单中所有的 input 元素。
A24: $("form input");

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

Q26:匹配所有跟在 label 后面的 input 元素。
A26:$("label + input");

Q27:找到所有与表单同辈的 input 元素。
A27: $("form ~ input");

Q28:查找表格的第一行。
A28: $("tr:first");

Q29:查找表格的最后一行。
A29: $("tr:last");

Q30:查找所有未选中的 input 元素。
A30: $("input:not(:checked)");

Q31:查找表格的1、3、5...行（即索引值0、2、4...）。
A31: $("tr:even");

Q32:查找表格的0、2、4...行（即索引值1、3、5...）。
A32: $("tr:odd");

Q33:查找第二行。
A33: $("tr:eq(1)");

Q34:查找第二第三行，即索引值是1和2，也就是比0大。
A34: $("tr:gt(0)");

Q35:查找第一第二行，即索引值是0和1，也就是比2小。
A35: $("tr:lt(2)");

Q36:给页面内所有标题加上背景色。（匹配h1,h2之类标题）
A36: $(".header").css("background","#EEE");

Q37:只有对不在执行动画效果的元素执行一个动画特效。
A37:
HTML 代码:
<button id="run">Run</button><div></div>
jQuery 代码:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

Q38:查找所有包含 "John" 的 div 元素。
A39:
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> ]

Q40:查找所有不包含子元素或者文本的空元素。
A40:
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> ]

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

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

Q43:查找隐藏的 tr。(visible)
A43: $("tr:hidden");

Q44:匹配type为hidden的元素。(visible)
A44: $("input:hidden");

Q45:查找所有含有 id 属性的 div 元素。
A45: $("div[id]");

Q46:查找所有 name 属性是 newsletter 的 input 元素。
A46: $("input[name='newsletter']").attr("checked".true);

Q47:查找所有 name 属性不是 newsletter 的 input 元素。
A47: $("input[name!='newsletter']").attr("checked".true);

Q48:查找所有 name 以 'news' 开始的 input 元素。
A48: $("input[name^='news']");

Q49:查找所有 name 以 'letter' 结尾的 input 元素。
A49: $("input[name$='letter']");

Q50:查找所有 name 包含 'man' 的 input 元素。
A50: $("input[name*='man']");

Q51:找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的。
A51: $("input[id][name$='man']");

Q52:为匹配的元素切换 'selected' 类。
A52: $("p").toggleClass("selected");

Q53:访问第一个匹配元素p的样式属性。
A53: $("p").css("color");

Q54:将所有段落的字体颜色设为红色并且背景为蓝色。
A54: $("p").css({color:"red",background:"blue"});
注意：如果属性名包含 "-"的话，必须使用引号: $("p").css({ "margin-left": "10px", "background-color": "blue" });

Q55:将所有段落字体设为红色。
A55: $("p").css("color","red");

Q56:为匹配的元素加上 'selected' 类。(removeClass,toggleClass,)
A56: $("p").addClass("selected");

Q57:每点击三下加上一次 'selected' 类。
A57: var count = 0;
      $("p").click(function(){
        $(this).toggleClass("highlight", count++ % 3 == 0);
      });