JQuery：
开发出来的JavaScript的脚本包。
非侵入性的脚本。
一、找对象。
基本的结构。
<script language="javascript"> $(document).ready(function () { //写代码 //HTML文档在浏览器中加载完成时触发 }); </script>
$,表示选择；document表示该页面；ready()，表示当HTML文档加载完成时触发
<body onload="">
</body>
onload事件是页面所有内容加载完成时触发
选择器。
1、基本选择器
标签选择器。
class选择器。
ID选择器。
逗号隔开——并列
空格隔开——后代
>号隔开——子级选择
//设置所有div的样式 $("div").css("backgroundcolor", "blue"); //class="show"的标签的子级标签中，id="ddd"的标签的样式 $(".show,#ddd").css("border", "solid red 1px").css("height","100px"); //class="show"的标签的子级标签中，所有div的样式 $(".show div").css("border", "solid red 1px").css("height","100px"); //class="show"的标签的子级标签中，第一级div的样式 $(".show>div").css("border", "solid red 1px").css("height", "100px");
2、过滤选择器
$("基本选择:过滤选择")
1）基本过滤——根据元素在HTML中的实际位置进行过滤。
:first
:last
:eq(n)
:gt(n)
:lt(n)
:odd
:even
:not(选择器)
//首个class="show"的标签的样式 $(".show:first").css("border", "solid red 1px").css("height", "100px"); //最后一个class="show"的标签的样式 $(".show:last").css("border", "solid red 1px").css("height", "100px"); //第2个class="show"的标签的样式。（从0开始计数） $(".show:eq(2)").css("border", "solid red 1px").css("height", "100px"); //索引号大于2的class="show"的标签的样式。（从0开始计数） $(".show:gt(2)").css("border", "solid red 1px").css("height", "100px"); //索引号小于2的class="show"的标签的样式。（从0开始计数） $(".show:lt(2)").css("border", "solid red 1px").css("height", "100px"); //第奇数个class="show"的标签的样式。（从1开始计数） $(".show:odd").css("border", "solid red 1px").css("height", "100px"); //第偶数个class="show"的标签的样式。（从1开始计数） $(".show:even").css("border", "solid red 1px").css("height", "100px"); //不是首个class="show"的标签的样式。 $(".show:not(:first)").css("border", "solid red 1px").css("height", "100px");
2）属性过滤——根据元素中的属性进行过滤。[]
[属性名]
[属性名=值]
[属性名!=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
//class="show"，并且含有属性为aaa的标签的样式 $(".show[aaa]").css("border", "solid red 1px").css("height", "100px"); //class="show"，并且属性aaa="hello"的标签的样式 $(".show[aaa=hello]").css("border", "solid red 1px").css("height", "100px"); //class="show"的标签中，属性aaa不是"hello"的标签的样式（包括没有属性aaa的标签） $(".show[aaa!=hello]").css("border", "solid red 1px").css("height", "100px"); //class="show"的标签中，属性aaa以"h"开头的标签的样式 $(".show[aaa^=h]").css("border", "solid red 1px").css("height", "100px"); //class="show"的标签中，属性aaa以"o"结尾的标签的样式 $(".show[aaa$=o]").css("border", "solid red 1px").css("height", "100px"); //class="show"的标签中，属性aaa中含有"o"的标签的样式 $(".show[aaa*=o]").css("border", "solid red 1px").css("height", "100px"); //input标签中，type=text的标签的样式 $("input[type=text]").css("border", "solid red 1px");
（三）内容过滤——根据开始标签和结束标签中间的内容进行筛选。
:contains(字符串)——元素中如果包含“字符串”，就选出该元素。
:has(选择器)——元素中包含对应选择器的子元素，就选中该元素。
//文字内容含有"good"、class="show"的标签的样式 $(".show:contains(good)").css("border", "solid red 1px").css("height", "100px"); //子级、后代级中含有id="dd"标签、class="show"的标签的样式 $(".show:has(#dd)").css("border", "solid red 1px").css("height", "100px"); //所有含有id="dd"的div标签的样式 $("div:has(#dd)").css("border", "solid red 1px").css("height", "100px");
例子：
//id="GridView1"的页眉的样式 $("#GridView1 tr:first").css("background-color", "navy").css("color", "white"); //id="GridView1"的大于第1行的奇数行的样式 $("#GridView1 tr:gt(0):odd").css("background-color", "yellow"); //id="GridView1"的大于第1行的偶数行的样式 $("#GridView1 tr:gt(0):even").css("background-color", "pink");
.hasclass
二、操作
1、元素本身的操作：添加，复制，替换，清空
empty()：把元素内容全部清空，元素开始结束标记保留
remove()：彻底删除元素，包括开始结束标记。
append(元素):在子元素的末尾追加
prepend(元素)：在子元素的开头追加。
replaceWith(元素)：
clone()：
//清空选择标签内的所有内容 $(".ul").empty(); //移除选择标签（包括选择标签的开始结束标记） $("ul").remove(); //ul标签中追加子元素（在后面追加） $("ul").append("<li>葡萄</li>"); //ul标签中追加子元素（在前面追加） $("ul").prepend("<li>葡萄</li>") //将ul的最后一个子元素添加到ol中（ul中将移除该子元素） $("ol").append($("ul li:last")); //将ul的最后一个子元素添加到ol中（ul中保留该子元素） $("ol").append($("ul li:last").clone()); //用ul的第一个子元素替换ol的最后一个子元素（ul中将移除该子元素） $("ol li:last").replaceWith($("ul li:first")); //用ul的第一个子元素替换ol的最后一个子元素（ul中保留该子元素） $("ol li:last").replaceWith($("ul li:first").clone());
2、元素属性的操作
1）读属性:attr("属性名")
//获取最后一个class="show"的标签的aaa属性 var s = $(".show:last").attr("aaa"); //alert(s);
2）添加、修改属性:attr("属性名","属性值")
//为最后一个class="show"的标签添加或修改属性 $(".show:last").attr("bbb", "不许打瞌睡！").attr("aaa", "kokokokokookoko");
3）移除属性:removeAttr("属性名")
//移除属性 $("#Button1").removeAttr("disabled");
3、元素样式的操作
1）内联样式
读取样式：css("样式名")
设置样式：css("样式名","样式的值")
2）操作样式表的class
addClass("样式表的class名")
removeClass("样式表的class名")
//为第1行添加名为head的class样式 $("#GridView1 tr:first").addClass("head"); $("#GridView1 tr:gt(0)").addClass("row1"); $("#GridView1 tr:gt(0):odd").addClass("row2"); //移除样式 $("#d2").removeClass("row1");
4、元素内容的操作
1）表单元素
文本类text,textarea,hidden,password 选择类radio,checkbox,select,file 按钮类submit,button,reset,image
（1）读内容
选择器.val();
//获取value值 var s = $("#Button1").val(); //alert(s);
（2）写内容
选择器.val(值);
//写value值 $("#Button1").val("修改后的按钮文字");
2）非表单元素
常规:容器类h1-h6,p,div,span,ul,ol,li，
常见:img a
表格:table tr td
（1）读内容
选择器.html()
选择器.text()
//获取第一个class="show"标签的内容（包括html标签） var s = $(".show:first").html(); //获取第一个class="show"标签的从容（不包括html标签） var s = $(".show:first").text(); //alert(s);
（2）写内容
选择器.html("内容")
选择器.text("内容")
//class="show"标签内添加i标签，i标签内容为“代码添加的文字” $("#dd").html("<i>代码添加的文字</i>") //class="show"标签内添加内容“<i>代码添加的文字</i>” $("#dd").text("<i>代码添加的文字</i>")
5、相关元素的操作
前：prev(),prevAll(),prevAll(选择器)
//选择标签的前一个标签（同级标签） $(".show[aaa=hello]").prev().css("border", "solid red 1px").css("height", "100px"); //选择标签的前面的所有class="show"的标签（同级标签） $(".show[aaa=hello]").prevAll().css("border", "solid red 1px").css("height", "100px");
后：next(),netxtAll(),nextAll(选择器)
//选择标签的后一个标签（同级标签） $(".show[aaa=hello]").next().css("border", "solid red 1px").css("height", "100px"); //选择标签的后面class="show"的标签（同级标签） $(".show[aaa=hello]").nextAll(".show").css("border", "solid red 1px").css("height", "100px");
内：find("选择器")
//find，在选择标签的第一级子级标签中查找 $(".show:first").find("div:last").css("border", "solid red 1px").css("height", "100px");
外：parent(),parents(),parents(选择器)
//查找选择标签的父级标签 $("#dd").parent().css("border", "solid red 1px").css("height", "100px"); //选择标签的所有父级标签中class="show"的标签的样式 $("#dd").parents(".show").css("border", "solid red 1px").css("height", "100px");
//$("input:disabled").css("background-color", "red"); //$("input[disabled=disabled]").css("background-color","blue");
JQuery事件：
click,dbclick,mouseover,mouseout,focus,blur,change,keyup,keydown,mouseup,mousedown
javascript事件名，把on去掉就是jquery的事件。
jquery的事件跟函数很象，只是括号中用得是function(){}
<script language="javascript"> $(document).ready(function () { $(".dd").click(function () { //为class="dd"的标签添加事件click alert("事件"); }) }); </script>
复合事件：
hover()——相当于把mouseover()和mouseout()组合起来。
<script language="javascript"> $(document).ready(function () { $(".dd").hover(function () { $(this).addClass("ddover") }, function () { $(this).removeClass("ddover"); }); //$(".dd").mouseover(function () { // $(this).addClass("ddover"); //}).mouseout(function () { // $(this).removeClass("ddover"); //}); }); </script>
toggle(,,,,,,)——点一下执行下一个函数，当执行到最后一个函数，再点就会执行第一个函数。
<script language="javascript"> $(document).ready(function () { $(".dd").toggle(function () { $(this).removeClass("ddover3"); $(this).addClass("ddover"); }, function () { $(this).removeClass("ddover"); $(this).addClass("ddover1"); }, function () { $(this).removeClass("ddover1"); $(this).addClass("ddover2"); }, function () { $(this).removeClass("ddover2"); $(this).addClass("ddover3"); }); $(".dd").hover(function () { $(this).addClass("ddover") }, function () { $(this).removeClass("ddover"); }); }); </script>
toggleClass()方法：用来切换样式。如果有这个样的class就去掉，如果没有的话就加上。
$(this).toggleClass("ddover");
阻止事件冒泡：
需要在事件的函数小括中加上一个参数,在这里叫abc .要阻止事件冒泡，就需要调abc的方法stopPropagation().
$(".dd").click(function (abc) { $(this).toggleClass("ddover"); abc.stopPropagation(); });
像超链接、按钮等在点击的都会有默认操作。
要阻止默认操作，需要在事件的函数小括中加上一个参数,在这里叫abc .要阻止事件冒泡，就需要调abc的方法preventDefault().
return false;具备阻止事件冒泡和默认操作的两个功能。
事件绑定与解除：
$(对象).bind("事件名",function(){事件的函数});
$(对象).unbind("事件名");
动画：
slideUp()
slideDown()
fadeIn()
fadeOut()
