设置样式
| 语法 |
描述 |
| $("*") |
选取所有的元素 |
| $("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("<b>增加的内容</b>");
//被选元素的头部增加
$(selector).prepend("<b>在你前面增加内容</b>");
//其他的一些方法
var txt2 = $("<p></p>").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);
