jquery学习笔记

一、核心

1.找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。

$("div > p");

2.设置页面背景色

$(document.body).css( "background", "black" );

3.隐藏一个表单中所有元素。

$(myForm.elements).hide();

4.在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。

$("input:radio", document.forms[0]);

5.在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。

$("div", xml.responseXML);

6.动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。

$("<div><p>Hello</p></div>").appendTo("body");

7.创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。

// 在 IE 中无效:

$("<input>").attr("type", "checkbox");

// 在 IE 中有效:

$("<input type='checkbox'>");

8.动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。

$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

 9.创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

二、选择器

1.获取匹配的第一个元素

 $('li:first');

2.获取最后一个元素

$('li:last')

3.去除所有与给定选择器匹配的元素

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

4.匹配所有索引值为偶数的元素，从 0 开始计数    查找表格的1、3、5...行（即索引值0、2、4...）

$('tr:even')

5.匹配所有索引值为奇数的元素，从 0 开始计数    查找表格的2、4、6行（即索引值1、3、5...）

$('tr:odd')

6.匹配一个给定索引值的元素  从 0 开始计数

$('tr:eq(1)')

7.匹配所有大于给定索引值的元素   即索引值是1....，也就是比0大

$('tr:gt(0)')

8.匹配所有小于给定索引值的元素  即索引值是0和1，也就是比2小

$('tr:lt(2)')

9.匹配如 h1, h2, h3之类的标题元素

$(':header').css("background","#eee");

10.匹配所有正在执行动画效果的元素   只有对不在执行动画效果的元素执行一个动画特效

$("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000); });

11.触发每一个匹配元素的focus事件

$("#login:focus");

 12.匹配包含给定文本的元素  查找所有包含 "John" 的 div 元素

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

13.匹配所有不包含子元素或者文本的空元素  查找所有不包含子元素或者文本的空元素

$("td:empty")

14.匹配含有选择器所匹配的元素的元素  给所有包含 p 元素的 div 元素添加一个 text 类

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

15.匹配含有子元素或者文本的元素

   $("td:parent")

16.匹配所有不可见元素，或者type为hidden的元素

   $("input:hidden")

17.匹配所有的可见元素

$("tr:visible")

18.匹配包含给定属性的元素。

$("div[id]")


19.匹配给定的属性是某个特定值的元素/匹配所有不含有指定的属性，或者属性不等于特定值的元素

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


20.匹配给定的属性是以某些值开始的元素

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

21.匹配给定的属性是以某些值结尾的元素

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

22.复合属性选择器，需要同时满足多个条件时使用。

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

23.匹配其父元素下的第N个子或奇偶元素':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使 用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)'

$("ul li:nth-child(2)")

24.匹配第一个子元素

$("ul li:first-child")

25.匹配最后一个子元素

$("ul li:last-child")

26.如果某个元素是父元素中唯一的子元素，那将会被匹配.如果父元素中含有其他元素，那将不会被匹配。

$("ul li:only-child")

27.匹配所有 input, textarea, select 和 button 元素

$(":input")

28.匹配所有的单行文本框

$(":text")

29.匹配所有密码框

$(":password")

30.匹配所有单选按钮

$(":radio")

31.匹配所有复选框

$(":checkbox")

32.匹配所有提交按钮

$(":submit")

33.匹配所有图像域

$(":image")

34.匹配所有重置按钮

$(":reset")

35.匹配所有按钮

$(":button")

36.匹配所有文件域

$(":file")

37.匹配所有不可见元素，或者type为hidden的元素

$("tr:hidden")

38.匹配所有可用元素

$("input:enabled")

39.匹配所有可用元素

$("input:enabled")

40.匹配所有不可用元素

$("input:disabled")

41.匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

$("input:checked")

42.匹配所有选中的option元素

$("select option:selected")

三、属性

1.设置或返回被选元素的属性值。

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

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

2.从每一个匹配的元素中删除一个属性

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

3.获取在匹配的元素集中的第一个元素的属性值。选中复选框为true，没选中为false

$("input[type='checkbox']").prop("checked");

4.要删除的属性名

removeProp(name)

5.为每个匹配的元素添加指定的类名。

$("p").addClass("selected"); $("p").addClass("selected1 selected2");

6.从所有匹配的元素中删除全部或者指定的类。

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

7.如果存在（不存在）就删除（添加）一个类。

$("p").toggleClass("selected");

8..html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

$('p').html();

$("p").html("Hello <b>world</b>!");

$("p").html(function(n){ return "这个 p 元素的 index 是：" + n; });

9.取得所有匹配元素的内容。

$('p').text();

$("p").text("Hello world!");

10.获得匹配元素的当前值。

$("input").val();

$("input").val("hello world!");

$('input:text.items').val(function() { return this.value + ' ' + this.className; });

三、筛选

1.获取第N个元素

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

2.获取第一个元素

$('li').first()

3.获取最后个元素

$('li').last()

4.检查当前的元素是否含有某个特定的类

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

5.筛选出与指定表达式匹配的元素集合。

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

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

6.is

7.将一组元素转换成其他数组

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

8.保留包含特定后代的元素，去掉那些不含有指定后代的元素。

$('li').has('ul').css('background-color', 'red');

9.删除与指定表达式匹配的元素

$("p").not( $("#selected")[0] )

10.选取一个匹配的子集

$("p").slice(0, 1).wrapInner("<b></b>");选择第一个p元素

11.$("div").children()

12.从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。

$("li:first").closest(["ul", "body"]);

13.搜索所有与指定表达式匹配的元素。

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

14.取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

$("p").next()

15.查找当前元素之后所有的同辈元素。

$("div:first").nextAll().addClass("after");给第一个div之后的所有元素加个类

16.查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

$('#term-2').nextUntil('dt').css('background-color', 'red');

17.取得一个包含着所有匹配元素的唯一父元素的元素集合。

$("p").parent()

18.取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

$("span").parents()

19.查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

$('li.item-a').parentsUntil('.level-1') .css('background-color', 'red');

20.取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

$("p").prev()

21.查找当前元素之前所有的同辈元素

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

22.查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

$('#term-2').prevUntil('dt').css('background-color', 'red');

23.取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

$("div").siblings()

24.添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。

$("p").add("span")

25.加入先前所选的加入当前元素中

$("div").find("p").andSelf().addClass("border");

26.查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

$("iframe").contents().find("body")
  .append("I'm in an iframe!");

27.选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素

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

四、文档处理

1.向每个匹配的元素内部追加内容。

$("p").append("<b>Hello</b>");

2.把所有匹配的元素追加到另一个指定的元素元素集合中。

$("p").appendTo("div");

3.向每个匹配的元素内部前置内容。

$("p").prepend("<b>Hello</b>");

4.把所有匹配的元素前置到另一个、指定的元素元素集合中。

$("p").prependTo("#foo");

5.在每个匹配的元素之后插入内容。

$("p").after("<b>Hello</b>");

6.在每个匹配的元素之前插入内容。

$("p").before("<b>Hello</b>");

7.把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

$("p").insertAfter("#foo");

8.把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

$("p").insertBefore("#foo");

9.把所有匹配的元素用其他元素的结构化标记包裹起来。

$("p").wrap("<div class='wrap'></div>");

10.这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

$("p").unwrap()

11.将所有匹配的元素用单个元素包裹起来

$("p").wrapAll("<div></div>");

12.将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

$("p").wrapInner("<b></b>");

13.将所有匹配的元素替换成指定的HTML或DOM元素。

$("p").replaceWith("<b>Paragraph. </b>");

14.用匹配的元素替换掉所有 selector匹配到的元素。

$("<b>Paragraph. </b>").replaceAll("p");

15.删除匹配的元素集合中所有的子节点。

$("p").empty();

16.从DOM中删除所有匹配的元素。

$("p").remove();

17.从DOM中删除所有匹配的元素。

$("p").detach();

18.克隆匹配的DOM元素并且选中这些克隆的副本。

$("b").clone().prependTo("p");

五、css

1.获取匹配元素在当前视口的相对偏移。

$("p:last").offset({ top: 10, left: 30 });

2.获取匹配元素相对滚动条顶部的偏移。

$("div.demo").scrollTop(300);

3.获取匹配元素相对滚动条左侧的偏移。

$("div.demo").scrollLeft(300);

4.取得匹配元素当前计算的高度值（px）。

$("p").height();

5.取得第一个匹配元素当前计算的宽度值（px）。

$("p").width(20);

6.获取第一个匹配元素内部区域高度（包括补白、不包括边框）。innerHeight

   获取第一个匹配元素内部区域高度（包括补白、不包括边框）。innerWidth

7.获取第一个匹配元素外部高度（默认包括补白和边框）。outerHeight

获取第一个匹配元素外部宽度（默认包括补白和边框）。outerWidth

六、事件

1.在DOM加载完成时运行的代码

$(document).ready(function(){
  // 在这里写你的代码...
});
简写

$(function($) {
  // 你可以在这里继续使用$作为别名...
});

2.on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。


$("p").on("click", function(){
alert( $(this).text() );
});

 3.在选择元素上移除一个或多个事件的事件处理函数。

$("p").off()

4.为每个匹配元素的特定事件绑定事件处理函数。

$("p").bind("click", function(){
  alert( $(this).text() );
});

5.为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$("p").one("click", function(){
  alert( $(this).text() );
});

6.在每一个匹配的元素上触发某类事件。

$("form:first").trigger("submit")


7.发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

triggerHandler

8.bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

$("p").unbind()

9.jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

 $('.clickme').live('click', function() { alert("Live handler called."); });

$('body').append('<div class="clickme">Another target</div>');

10.从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)

function aClick() {
      $("div").show().fadeOut("slow");
  }
  $("#unbind").click(function () {
      $("#theone").die("click", aClick)
  });

11.指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

描述: delegate这个方法可作为live()方法的替代，使得每次事件绑定到特定的DOM元素。

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

12.删除由 delegate() 方法添加的一个或多个事件处理程序。

$("p").undelegate();

13.调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

$("p").blur( function () { alert("Hello World!"); } );

14.触发每个匹配元素的change事件

$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});

15.dblclick事件会在元素的同一点双击时触发。

$("p").dblclick( function () { alert("Hello World!"); });


16.在每一个匹配元素的error事件中绑定的处理函数。

$(window).error(function(){
  return true;
});

17.触发每一个匹配元素的focus事件。

使人无法使用文本框:

$("input[type=text]").focus(function(){
  this.blur();
});

18.当一个元素，或者其内部任何一个元素获得焦点的时候会触发这个事件。这跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

获得焦点后会触发动画:

$("p").focusin(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

19.当一个元素，或者其内部任何一个元素失去焦点的时候会触发这个事件。这跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

20.在页面内对键盘按键做出回应

$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // ...
  }
});

21.计算在输入域中的按键次数：

$("input").keydown(function(){
  $("span").text(i+=1);
});

22.keyup事件会在按键释放时触发。

$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

23.mousedown事件在鼠标在元素上点击后会触发

$("button").mousedown(function(){
  $("p").slideToggle();
});

24.当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

25.当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

26.mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

27.mouseout事件在鼠标从元素上离开后会触发

$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

28.mouseup事件会在鼠标点击对象释放时

29.当文档窗口改变大小时触发

$(window).resize(function(){
  alert("Stop it!");
});

30.当滚动条发生变化时触发

$(window).scroll( function() { /* ...do something... */ } );

31.触发每一个匹配元素的select事件

$(":text").select( function () { /* ...do something... */ } );

32.提交本页的第一个表单:

$("form:first").submit();

33.页面卸载的时候弹出一个警告框:

$(window).unload( function () { alert("Bye now!"); } );

七、效果

show、hide、toggle、slideDown、slideUp、slideToggle、fadeIn、fadeOut、fadeTo、fadeToggle、animate、stop、delay

jQuery.fx.off关闭页面上所有的动画。

jQuery.fx.interval设置动画的显示帧速。

八、ajax