2015.01.06 JQuery
jQuery是一个兼容多浏览器的javascript库。开发出来的JavaScript的脚本包。非侵入性的脚本。
下载地址：http://jquery.com/ （打不开网页需要翻*墙） 下载 jQuery 1.x 即可。
1.找对象。
基本的结构。
1 $(document).ready(function () { 2 // 写代码 3 //HTML文档在浏览器中加载完成时触发。 4 });
选择器：
一、基本选择器
标签选择器。
class选择器。
ID选择器。
逗号隔开——并列
空格隔开——后代
>号隔开——子级选择
1 <script language="javascript"> 2 $(document).ready(function () { 3 $(".show>div").css("border", "solid red 1px").css("height", "100px").css("margin", "10px"); 4 }) 5 </script>
1 <body> 2 <form id="form1" runat="server"> 3 <div> 4 <div class="show"></div> 5 <div class="show"></div> 6 <div class="show"></div> 7 </div> 8 <div class="show"> 9 <div> 10 <div></div> 11 </div> 12 <div></div> 13 </div> 14 </form> 15 </body>
二、过滤选择器
$("基本选择:过滤选择")
（一）基本过滤——根据元素在HTML中的实际位置进行过滤。
1 $(".show:first").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//取class为show的第一个
1 $(".show:last").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//取class为show的最后一个
1 $(".show:eq(2)").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//取class为show的第二个(0开始)
1 $(".show:odd").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//取class为show的奇数
1 $(".show:even").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//取class为show的偶数
1 $(".show:not(:first)").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的排除第一个
（二）属性过滤——根据元素中的属性进行过滤。[]
[属性名]——
[属性名=值]——
[属性名!=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
1 <form id="form1" runat="server"> 2 <div> 3 <div class="show" aaa="hello"></div> 4 <div class="show" aaa="how are you"></div> 5 <div class="show" aaa="ko"></div> 6 </div> 7 <div class="show"> 8 <div> 9 <div></div> 10 </div> 11 <div></div> 12 </div> 13 </form>
1 $(".show[aaa]").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的带有aaa属性的
1 $(".show[aaa=hello]").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的带有aaa属性并且属性为hello的
1 $(".show[aaa^=h]").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的带有aaa属性并且属性以h开头的
1 $(".show[aaa$=o]").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的带有aaa属性并且属性以o结尾的
1 $(".show[aaa*=o]").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的带有aaa属性并且属性包含o的
1 $("input[type=text]").css("border", "solid blue 1px");//对文本框起作用
（三）内容过滤——根据开始标签和结束标签中间的内容进行筛选。
:contains(字符串)——元素中如果包含“字符串”，就选出该元素。
:has(选择器)——元素中包含对应选择器的子元素，就选中该元素。
1 <form id="form1" runat="server"> 2 <div> 3 <div class="show" aaa="hello">hello world</div> 4 <div class="show" aaa="how are you">hello</div> 5 <div class="show" aaa="ko">good afternoon</div> 6 </div> 7 <div class="show"> 8 <div id="d1"> 9 <div id="dd"></div> 10 </div> 11 <div id="d2" class="row1"></div> 12 </div> 13 </form>
1 $(".show:contains(good)").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的内容里包含“good”的
1 $("div:has(#dd)").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//包含dd子元素的元素
1 $("input:disabled").css("background-color","green");//控件状态为不可用的背景色变为绿色
1 $("input[disabled=disabled]").css("background-color", "green");//控件状态为不可用的背景色变为绿色
下面的需要加个GridView和样式表：
1 $("#GridView1 tr:first").addClass("head");//在GridView1的第一行(表头)增加样式表里面的.head样式
1 $("#GridView1 tr:gt(0)").addClass("row1");//在GridView1的第0行以后都加"row1"class
1 $("#GridView1 tr:gt(0):odd").addClass("row1");//在GridView1的第0行以后奇数行都加"row1"class
1 $("#GridView1 tr:gt(0):even").css("background-color", "pink");//在GridView1的第0行以后偶数行都加"row1"class
2.操作
一、元素本身的操作：添加，复制，替换，清空
empty()：把元素内容全部清空，元素开始结束标记保留
remove()：彻底删除元素，包括开始结束标记。
append(元素):在子元素的末尾追加
prepend(元素)：在子元素的开头追加。
replaceWith(元素)：
clone()：
二、元素属性的操作
1.读属性:attr("属性名")
var s = $(".show:last").attr("aaa");
2.添加、修改属性:attr("属性名","属性值")
$(".show:last").attr("bbb", "不许打瞌睡！").attr("aaa","kokokokokookoko");
3.移除属性:removeAttr("属性名")
1 $(".show:last").attr("bbb", "卧槽哦！").attr("aaa", "kokokoko");//为class为show的最后一个添加属性bbb为"卧槽哦！"，修改aaa属性为"kokokoko"
1 $("#Button1").removeAttr("disabled");//移除Button1中的属性"disabled"
三、元素样式的操作
（一）内联样式
读取样式：css("样式名")
设置样式：css("样式名","样式的值")
（二）操作样式表的class
addClass("样式表的class名")
removeClass("样式表的class名")
1 $("#d2").removeClass("row1");//移除id为d2的class"row1"
四、元素内容的操作
（一）表单元素
文本类text,textarea,hidden,password 选择类radio,checkbox,select,file 按钮类submit,button,reset,image
1.读内容
选择器.val();
var s = $("#Button1").val();
2.写内容
选择器.val(值);
$("#Button1").val("修改后的按钮文字");
1 var s = $("#Button1").val("修改后的文字");//把按钮Button1上的Text改为"修改后的文字"
（二）非表单元素
常规:容器类h1-h6,p,div,span,ul,ol,li，
常见:img a
表格:table tr td
1.读内容
选择器.html()
选择器.text()
2.写内容
选择器.html("内容")
选择器.text("内容")
1 $(".show:last").html("kkkkkkkkkkkkk");//把class为show的最后一个的html改为"kkkkkkk"
五、相关元素的操作
前：prev(),prevAll(),prevAll(选择器)
后：next(),netxtAll(),nextAll(选择器)
内：find("选择器")
外：parent(),parents(),parents(选择器)
1 $(".show[aaa=hello]").next().css("border", "solid red 1px").css("height", "100px").css("margin", "10px"); 2 $(".show[aaa=hello]").nextAll(".show").css("border", "solid red 1px").css("height", "100px").css("margin", "10px"); 3 $(".show[aaa=hello]").prevAll().css("border", "solid red 1px").css("height", "100px").css("margin", "10px"); 4 $(".show:first").find("div:last").css("border", "solid red 1px").css("height", "100px").css("margin", "10px"); 5 $("#dd").parents(".show").css("border", "solid red 1px").css("height", "100px").css("margin", "10px"); 6 $("ul").empty(); 7 $("ul").remove(); 8 $("ul").append("<li>葡萄</li>"); 9 $("ul").prepend("<li>葡萄</li>") 10 $("ol").append($("ul li:last").clone()); 11 $("ol li:last").replaceWith($("ul li:first"));
