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