一.基本选择器
1.id选择器
//改变id为one的元素的背景色
$("#one").css("background","red");
2.标签选择器
//给所有的div标签都加上背景样式
$("div").css("background","red");
3.类选择器
//给class 为 one的所有元素的背景色为red色
$(".one").css("background","red");
4.*选择器
//给所有的标签加上背景色
$("*").css("background","red");
5.组合选择器
//给所有的div,id为one,class为two的标签加上背景色
$("div,#one,.two").css("background","red");
二.属性选择器
1.含有属性title 的div元素
$("div[title]").css("color","red");
2.属性title值等于test的div元素
$("div[title='test']").css("background","red");
3.属性title值不等于test的div元素(没有属性title的也将被选中)
$("div[title!='test']").css("background","red");
4.属性title值以te开始的div元素
$("div[title^='te']").css("background","red");
5.属性title值 以est结束 的div元素
$("div[title$='est']").css("background","red");
6.属性title值 含有es的div元素
$("div[title*='est']").css("background","red");
7.选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素
$("div[id][title*='es']").css("color","red");
8.选择隐藏域,含有title的属性的div,id为one,class为one的元素
$("input[type='hidden'],div[title],#one,.one").css("color":"red");
三.基本过滤器
1. 所有的div中的第一个div元素
$("div:first")
2. 所有的div中的最后一个div
$("div:last")
3. class不为one的所有div
$("div:not(.one)")
4.class不为one,并且title='aa'的所有div
$("div:not(.one)[title='aa']")
5.索引为偶数的div
$("div :even")
6.索引为奇数的div
$("div :odd")
7.索引大于3的所有div
$("div :gt(3)")
8.索引等于3的所有div
$("div :eq(3)")
9.索引小于3的所有div
$("div :lt(3)")
10.标题元素 h1,h2...
$(":header")
11.索引大于1小于6的所有div
$("div:lt(6):gt(1)")
四.子元素选择器
1.所有含有class='one'的div下的第一个子元素
$("div.one :nth-child(1)")
2. 所有含有class='one'的div下的最后一个子元素
$("div.one :last-child")
3.所有的第一个tr元素
$("table tr:nth-child(1)")
4.所有的含有class='one'下只包含一个子元素的div
$("div.one :only-child")
五.层级选择器
1.所有div下的所有div(包含孙子元素)
$("div div")
2.div下的子div元素
$("div>div")
3.id为one的下一个div元素
$("#one+div")
4.id为one的后面的所有兄弟元素
$("#one~div")
5.id为one的所有兄弟div元素(不包含自己)
$("#one".siblings("div"))
六.内容选择器
1. 文本中含有di的div
$("div :contains('di')")
2.不包含子元素和文本元素的div
$("div :empty")
3.改变含有class='mini'元素的所有div
$("div :has('.mini')")
4.含有子元素或者文本元素的div
$("div :parent")
5.不含有文本di的所有div
$("div :not(:contains('di')))
七.可见性
1.所有可见的div
$("div :visiable")
2.所有不可见的div
$("div :hidden")
八.表单
1.改变表单内可用 <input> 元素的值
$("input:enabled").val("哈哈");
2.获取所有checkbox属性选中的元素的值
$("input[type='checkbox']:checked").each(function(){
alert($(this).val());
});
3.获取下拉菜单中被选中的值
$("#select option:selected").each(function(){
alert($(this).text());
});
九.GET请求
$.get("../../AjaxPostServlet",
{ name: "John", time: "2pm" },
function(data){
alert("success"+data);
}
);
十.POST请求
$.post("../../AjaxPostServlet",
{ name: "John", time: "2pm" },
function(data){
alert("success"+data);
}
);
十一.Ajax请求
$.ajax({
type: "POST",
url: "../../AjaxPostServlet.action",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
},
error:function(data){
alert( "error: " + data );
}
});
总结:
1.点击事件
$("#id").click(function(){
});
2.遍历事件
$("div").each(function(){
$(this).css();
});
3.获取元素值
$("#id").val();
4.设置元素值
$("#id").val("15");
5.
$("#id").text("haha");
6.
/**
* <td><input type='checkbox'/><td>haha</td></td>
**/
var $checkbox = $("<td/>").attr("id",pid).append($("<input/>").attr("type","checkbox"));