JQuery 2
例如隔行变色引入jQuery完成
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
?$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
</script>
?
jQuery选择器
$(selector)
$("#showDiv")id选择器
$(".SomeClass")类别选择器
$("p:odd")奇数行的<p>标记
$("td:nth-child(1)")所有表格的第一个单元格,即第一列
$("li>a")子选择器,返回<li>标记的所有子元素<a>,不包括孙标记
$("a[href$=pdf]")属性选择器,选择所有超链接,并且href的属性是以pdf结尾的
$.trim(sString);去除首尾空格的$.trim()方法
?
解决window.onload函数的冲突
jQuery中的ready()方法能够自动将其中的函数在页面加载完成后运行,且同一个页面中可以使用ready()多次
$(function(){
?code;
});
?
创建DOM元素
$(function(){???????//ready()函数
?var oNewP = $("<p>这是一个感人肺腑的故事</p>");??//创建DOM元素
?oNewP.insertAfter("#myTarget");????//insertAfter()方法
});
?
扩展jQuery
$.fn.方法名 = function(){}
?
解决$的冲突
jQuery.noConflict();
这时在jQuery中不在使用$,而必须使用jQuery
?
圆角矩形
border-radius:20px;???
-moz-border-radius:20px;??
-webkit-border-radius:20px;??
浏览器兼容性测试
http://tools.css3.info/selectors-test/test.html
?
使用选择器
属性选择器
$("a[title]").addClass("myClass");
$("a[href=10-9.html]").addClass("myClass");
$("a[href^=http://]").addClass("myClass");以http://开头的超链接
$("a[href$=html]").addClass("myClass");以html结尾的超链接
$("a[href*=xj]").addClass("myClass");任意匹配
$("li:has(a)").addClass("myClass");包含选择器,包含了超链接的所有<li>标记
?
位置选择器
:first :last 第一个元素、最后一个元素
:first-child :last-child 第一个子元素、最后一个子元素
:only-child 所有没有兄弟的元素
:nth-child(n) 第n个子元素(从1开始)
:nth-child(odd|even) 所有奇数号或偶数号的元素
:nth-child(nX+Y) 利用公式来计算子元素的位置
:odd或者:even 对整个页面而言的奇数号或偶数号的元素
:eq(n) 页面中的第n个元素(从0开始)
:gt(n) 第n个元素之后的所有元素
:lt(n) 第n个元素之前的所有元素
?
过滤选择器
反向过滤:not(filter),filter参数必须是过滤选择器,不是p:hidden应该是:hidden
input:not(:radio) 表示<input>标记中所有的非radio元素
//迭代使用选择器
$(":input:not(:checkbox):not(:radio)").addClass("myClass");
注意:input和input区别
?
管理选择结果
获取元素的个数
var i = $("div").size()+1;?//获取div块的数目
$(document.body).append($("<div>"+i+"</div>"));?//添加一个div块
提取元素
var aDiv = $("div").get();?//转化为div对象数组
aDiv.reverse();??//反序,传给处理函数
获取指定元素的位置
var index = $("div").index($("li[title=xj]"));
?
添加、删除、过滤元素
add()方法添加属性
not()方法去除元素集中的元素,参数不包括特定的元素
$("li[title]").not("img[title*=xj]") 错
$("li[title]").not("[title*=xj]") 对
$("div").filter("[class*=middle]")
filter()方法可接受函数作为参数
查找过滤新元素集合
$("p").find("span")相当于$("span",$("p"))
检测是否包含指定的元素
var bHasImage=$("div").is("img")
?
end()方法控制jQuery链
$("p").find("span").addClass("myClass1").end().addClass("myClass2");往回设置为$("p")
andSelf()方法控制jQuery链
$("div").find("p").addClass("myBackground").andSelf().addClass("myBorder");将<div>和<p>组合在一起