JQuery:
开发出来的JavaScript的脚本包。
非侵入性的脚本。
一、找对象。
基本的结构。
<script language="javascript"> $(document).ready(function () { //写代码 //HTML文档在浏览器中加载完成时触发 }); </script>
$,表示选择;document表示该页面;ready(),表示当HTML文档加载完成时触发
<body οnlοad="">
</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()