jQuery 笔记

1. 选择器  http://www.runoob.com/jquery/jquery-selectors.html

 

2. toggle()  用来切换 hide() 和 show() 方法   http://www.runoob.com/try/try.php?filename=tryjquery_toggle

http://www.runoob.com/jquery/jquery-hide-show.html

$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

3. 淡入淡出   fadeIn  fadeOut  fadeToggle  fadeTo        http://www.runoob.com/jquery/jquery-fade.html

4. 滑动   slideDown   slideUp  slideToggle     http://www.runoob.com/jquery/jquery-slide.html

5. 动画     http://www.runoob.com/jquery/jquery-animate.html

 $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });

$("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });

$("div").animate({
    height:'toggle'
  });

6. 设置内容和属性  不止是值 可以是函数   http://www.runoob.com/jquery/jquery-dom-set.html

$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");
$("#test3").val("Dolly Duck");

$("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")"; 
  });

$("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")"; 
  });

attr() 方法也允许您同时设置多个属性

$("#w3s").attr({
    "href" : "http://www.w3cschool.cc/jquery",
    "title" : "W3Schools jQuery Tutorial"
  });

jQuery 方法 attr()，也提供回调函数(不止是值也可以是函数)

$("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });

7. 添加元素  

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

8. 删除元素  http://www.runoob.com/jquery/jquery-dom-remove.html

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

过滤被删除的元素    $("p").remove(".italic");

9. 操作 CSS  http://www.runoob.com/jquery/jquery-css-classes.html

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

10. 设置多个 CSS 属性    http://www.runoob.com/jquery/jquery-css.html

$("p").css({"background-color":"yellow","font-size":"200%"});
11.  遍历父   http://www.runoob.com/jquery/jquery-traversing-ancestors.html

$("span").parents("ul");//返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素

12. 遍历子孙    http://www.runoob.com/jquery/jquery-traversing-descendants.html

$("div").children("p.1");//返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
$("div").find("span");//返回属于 <div> 后代的所有 <span> 元素
$("div").find("*");//返回 <div> 的所有后代

13. 遍历同胞   http://www.runoob.com/jquery/jquery-traversing-siblings.html

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

14. 添加过滤的遍历   http://www.runoob.com/jquery/jquery-traversing-filtering.html

$("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素
$("div p").last();//选择最后一个 <div> 元素中的最后一个 <p> 元素
$("p").eq(1);//选取第二个 <p> 元素（索引号 1）
$("p").filter(".intro");//返回带有类名 "intro" 的所有 <p> 元素
$("p").not(".intro");//返回不带有类名 "intro" 的所有 <p> 元素

15. toArray 

//把 <li> 元素转换为数组，然后输出该数组元素的 innerHTML
$("button").click(function(){
x=$("li").toArray()
for (i=0;i<x.length;i++)
{
alert(x[i].innerHTML);
}
});