JQuery语法知识

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

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

3.取得第 index 个位置上的元素
$("img").get(0);

4.返回ID值为foobar的元素的索引值。
html代码：<div id="foobar"><div></div><div id="foo"></div></div>
$("div").index($('#foobar')[0]) // 0
$("div").index($('#foo')[0]) // 2
$("div").index($('#foo')) // -1

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

6.计算文档中所有图片数量
$("img").length;

7.计算文档中所有图片数量
$("img").size();

8.当DOM加载完成后，执行其中的函数。
$(function(){
// 文档就绪
});

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

10.隐藏一个表单中所有元素。
$(myForm.elements).hide()

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

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

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

14.在一个div上存取数据
$("div").data("blah", "hello"); // blah设置为hello

15.选取所有div以及内部的p，并加上border类
$("div").find("p").andSelf().addClass("border");

16.动态生成一个元素并添加至匹配的元素中
$("p").add("<span>Again</span>")

17.查找DIV中的每个子元素，返回一个集合
$("div").children()

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

19.找到每个段落的后面紧邻的同辈元素。
$("p").next()
 
20.给第一个div之后的所有元素加个类
$("div:first").nextAll().addClass("after");

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

22.给最后一个之前的所有div加上一个类
$("div:last").prevAll().addClass("before");

23.获取匹配的第二个元素
$("p").eq(1)

24.保留带有select类的元素
$("p").filter(".selected")

25.保留子元素中不含有ol的元素。
$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

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

27.查找所有不可见的 tr 元素
$("tr:hidden")

28.查找所有可见的 tr 元素
$("tr:visible")

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

30.根据给定的元素名匹配所有元素
$("div");

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

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

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

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

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

36.匹配所有跟在 label 后面的 input 元素
$("label + input")

37.找到所有与表单同辈的 input 元素
$("form ~ input")

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

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

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

41.查找所有含有 id 属性的 div 元素
$("div[id]")

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

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

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

45.查找表格的第一行
$("tr:first")

46.给页面内所有标题加上背景色
$(":header").css("background", "#EEE");

47.$("tr:last")
$("tr:last")

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

49.查找表格的2、4、6行（即索引值1、3、5...）
$("tr:odd")

50.查找所有按钮.
$(":button")

51.查找所有复选框
$(":checkbox")
………………

52.查找所有选中的复选框元素
$("input:checked")

53.查找所有可用的input元素
$("input:enabled")

54.匹配所有选中的option元素
$("select option:selected")

1.取得第一个段落的color样式属性的值。
$("p").css("color"); 

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

3.将所有段落的字体颜色设为红色并且背景为蓝色
$("p").css({ "margin-left": "10px", "background-color": "blue" });

4.获取高度
$("p").height();
$(document).height();

5.把所有段落的高设为 20:
$("p").height(20);

6.获取第一段的宽
$("p").width();

7.获取当前窗口的宽
$(window).width();

8.将所有段落的宽设为 20:
$("p").width(20);

9.任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。
$("p").blur( function () { alert("Hello World!"); } );

10.给所有的文本框增加输入验证
$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});

11.将页面内所有段落点击后隐藏。
$("p").click( function () { $(this).hide(); });

12.给页面上每个段落的双击事件绑上 "Hello World!" 警告框
$("p").dblclick( function () { alert("Hello World!"); });

13.在服务器端记录JavaScript错误日志:
$(window).error(function(msg, url, line){
  jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});

14.当页面加载后将 id 为 'login' 的元素设置焦点:
$(document).ready(function(){
  $("#login").focus();
});

15.使人无法使用文本框:
$("input[type=text]").focus(function(){
  this.blur();
});

16.让人每次改变页面窗口的大小时很郁闷的方法:
$(document).resize(function(){
  alert("Stop it!");
});

17.当页面滚动条变化时，执行的函数
$(window).scroll( function() { /* ...do something... */ } );

18.当文本框中文本被选中时执行的函数:
$(document).select( function () { /* ...do something... */ } );

19.阻止表单提交
$("form").submit( function () {
  return false;
} );

20.页面卸载的时候弹出一个警告框:
$(document).unload( function () { alert("Bye now!"); } );

21.鼠标悬停的表格加上特定的类
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

22.当每个段落被点击的时候，弹出其文本。
$("p").bind("click", function(){
  alert( $(this).text() );
});

23.当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){
  alert( $(this).text() );
});

24.提交第一个表单，但不用submit()
$("form:first").trigger("submit")

25.把所有段落的所有事件取消绑定
$("p").unbind()

26.将段落的click事件取消绑定
$("p").unbind( "click" )

27.在DOM加载完成时运行的代码，可以这样写：
$(document).ready(function(){
  // 在这里写你的代码...
});

28.为匹配的元素加上 'selected' 类
$("p").addClass("selected");

29.$("p").removeClass("selected");
$("p").removeClass("selected");

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

31.为匹配的元素切换 'selected' 类
$("p").toggleClass("selected");

32.获取第一个标签里的内容
$("div").html();

33. 用于设定div内容的值
$("div").html("<p>Hello Again</p>");

34.获取文本框中的值
$("input").val();

35.设定文本框的值
$("input").val("hello world!");

36.把src属性的值设置为title属性的值。
$("img").attr("title", function() { return this.src });

37.为所有图像设置src属性。
$("img").attr("src","test.jpg");

38.返回文档中第一个图像的src属性值。
$("img").attr("src");

39.为所有图像设置src和alt属性。
$("img").attr({ src: "test.jpg", alt: "Test Image" });

40.将文档中图像的src属性删除
$("img").removeAttr("src");

41.取得所有匹配元素的内容。
$("p").text();

42.设置所有匹配元素的文本内容
$("p").text("<b>Some</b> new text.");

43.去掉字符串起始和结尾的空格。
$.trim(" hello, how are you? ");

44.过滤数组中小于 0 的元素。
去掉字符串起始和结尾的空格。

45.隐藏所有段落
$("p").hide()

46.用600毫秒的时间将段落缓慢的隐藏
$("p").hide("slow");

47.用200毫秒将段落迅速隐藏，之后弹出一个对话框。
$("p").hide("fast",function(){
   alert("Animation Done.");
 });

48.显示所有段落
$("p").show()

49.用缓慢的动画将隐藏的段落显示出来，历时600毫秒。
$("p").show("slow");

50.切换所有段落的可见状态。
$("p").toggle()

51.用600毫秒缓慢的将段落淡入
$("p").fadeIn("slow");

52.用200毫秒快速将段落淡入，之后弹出一个对话框
$("p").fadeIn("fast",function(){
   alert("Animation Done.");
 });

53.用600毫秒缓慢的将段落淡出
$("p").fadeOut("slow");

54.用200毫秒快速将段落淡出，之后弹出一个对话框
$("p").fadeOut("fast",function(){
   alert("Animation Done.");
 });

55.用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度
$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);

56.用600毫秒缓慢的将段落滑上
$("p").slideUp("slow");

56.用200毫秒快速将段落滑上，之后弹出一个对话框
$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });

57.用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
$("p").animate({
   left: 50, opacity: 'show'
 }, { duration: 500 });

58.
// 开始动画
$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});

// 当点击按钮后停止动画
$("#stop").click(function(){
  $(".block").stop();
});

60.向所有段落中追加一些HTML标记。
$("p").append("<b>Hello</b>");

61.把所有段落追加到ID值为foo的元素中。
$("p").appendTo("#foo");

62.向所有段落中前置一些HTML标记代码。
$("p").prepend("<b>Hello</b>");

63.把所有段落追加到ID值为foo的元素中
<p>I would like to say: </p><div id="foo"></div>

64.把所有段落的子元素（包括文本节点）删除
$("p").empty();

65.从DOM中把带有hello类的段落删除
$("p").remove(".hello");

66.克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
从DOM中把带有hello类的段落删除

67.创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

68.在所有段落之后插入一些HTML标记代码。
$("p").after("<b>Hello</b>");

69.在每个匹配的元素之前插入内容。
$("p").before("<b>Hello</b>");

70.把所有的段落标记替换成加粗标记
$("<b>Paragraph. </b>").replaceAll("p");