JQuery的基本用法

一.基本选择器

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"));