首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQuery 二

2013-07-08 
JQuery 2例如隔行变色引入jQuery完成script languagejavascript srcjquery.min.js/scriptscrip

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>组合在一起

热点排行