JQuery学习备份
时间：2011-01-11 来源：大奇异果
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);
});
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);
});
相关阅读 更多 +
