JQuery

设置样式

语法	描述
$("*")	选取所有的元素
$("p.intro")	选取class为intro的p标签
$("p:first")	选取第一个p标签
$("ul li:first")	选取第一个ul元素的第一个li元素
$("ul li:first-child")	选取每个ul元素的第一个li元素
$("[href]")	选取带有href属性的元素
$("a[target='_blank']")	选取所有target属性值等于"_black"的a元素
$(":button")	选取所有type="button"的input元素和button元素
$("tr:even")	选取所有偶数位置的tr元素
$("tr:odd")	选取所有奇数位置的tr元素

$("p").css("background-color", "red");
$("#test").click(function(){
  $(this).hide(); 
});

$("p").show(); //显示
语法：
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
//一键切换隐藏和显示
$(selector).toggle(speed, callback);

淡入淡出
$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
$(selector).fadeToggle(speed, callback);
$(selector).fadeTo(speed, callback);

滑动
$(selectot).slideDown(speed, callback);
$(selector).slideUp(speed, callback);
$(selector).slideToggle(speed, callback);

动画效果
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

获取属性

$(selector).text()、.html()、val()
text()设置或者获取所选元素的文本内容
html()设置或者获取所选元素的内容
val()设置或者获取表单字段的值（value）

attr() 获取属性值
$("#w3s").attr("href")

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

改变html

//被选元素的尾部增加
$(selector).append("增加的内容");
//被选元素的头部增加
$(selector).prepend("在你前面增加内容");
//其他的一些方法
var txt2 = $("
").text("Text.");
var txt3 = document.createElement("p");
txt3.innerHTML = "Text...";
$("p").append(txt2, txt3);

//after、before
被选元素之前、之后插入

//删除元素
$("#div1").remove();  //删除它和它的子元素
$("#div1").remove(); //删除它的子元素
$("p").remove(".italic"); //删除p标签下所有class为italic的节点

操作css

$("h1,h2").addClass("blue");//给元素设置class='blue'

$("p").addClass("import blue");// class = "import blue"

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

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

//获取css属性
$("p").css("background-color");
//设置css属性
$("p").css("background-color":"yellow");

$("p").css({"background-color":"yellow",
              "font-size":200%
});

各种尺寸

$(selector).width()、height()方法只包括element的值
$(selector).innerWidth()、innerHeight()包括elemet+padding的值
$(selector).outerWidth()、outerHeight()包括element+padding+border的值
$(selecot).outerWidth(true) 、outerHeight(true)包括elemtn+padding+border + margin的值

获取节点

$("div").parent(); //获取div的直接父节点
$("div").parents(); //获取div的所有父节点，一直到html
$("div").parents('ul'); // 同上，但是必须还要是ul
$("span").parentsUntil("div");获取span到div之间的节点

$("div").children(); 获取div的所有直接子元素
$("div").children("p.1");

$("div").find("span"); //div的所有span元素

获取兄弟节点

$('h2').siblings(); //获取所有的兄弟节点
$("h2").siblings(''p");// 获取所有兄弟节点中的p元素

$("h2").next(); //h2的下一个兄弟节点

$("h2").nextAll(); //跟在h2后面的所有兄弟节点

$("h2").nextUntil("h6"); //h2-h6之间的所有兄弟节点

jQuery prev(), prevAll() & prevUntil() 方法

过滤

$("div p").first();
$("div p").last();
$("p").eq(1); //索引号为1的元素
$("p").filter(".intro");
$("p").not(".intro");

JQuery和AJAX

$(selector).load(URL, data, callback);
URL可以是文件地址，也可以是网址
data为传的参数，为键值对的形式
callback的原型为：
   function(responseTxt,statusTxt,xhr)
$("#div1").load("test.txt #p1" );
//将test.txt中class为p1的元素的值赋给id为div1

$.get(URL, data, callback);
function(data, status)

$.post(URL, data, callback);