???jQuery?是一个JavaScript?库,它有助于简化?JavaScript?及?Asynchronous?JavaScript?+?XML?(Ajax)?编程。与类似的?JavaScript?库不同,jQuery?具有独特的基本原理?jQuery使用户能更方便地处理HTML?documents、events、实现动画效果,并且方便地为网站提供AJAX交互.。
?????下面我们简但介绍一下,其中的?简单选择器?和属性的应用
????????/**????
???????????层次元素关系
???????????????1、祖先关系???空格符号
???????????????2、父子关系???大于符号
???????????????3、紧跟的关系??+符号
???????????????4、紧跟后的所有兄弟关系??~符号
???????????CSS样式
???????????????1、css("");带有一个参数是获取其属性的值
???????????????2、css("","");为其对象设置一个指定的属性和属性值
???????????????3、css(properties);把一个“名/值对”对象设置为所有匹配元素的????????????样式属性?{"":"","":""...};
?????????
???????*/??
???????/**
???????????简单选择器
??????????????1、:first?匹配的第一个
??????????????2、:last?匹配的最后一个
??????????????3、:lt(index)?小于某个的
??????????????4、:gt(index)?大于某个的;
??????????????5、:eq(index)?等于某个??相当于过滤器中的.eq(index)
??????????????6、:even?奇数行??
??????????????7、:odd??偶数行
??????????????8、:header?匹配h1,h2?h3?等标题
??????????????9、:not?除去匹配的(剩下的)
??????????过滤器:
????????????????.eq(index)匹配某个
??????????属性中html代码
?????????????.html()返回整个html文本
??????????属性的文本
?????????????.text();返回这个html代码中的文本内容?如果是多个就组合文本内容并返回
*/
/**页面载入事件处理*/
$(function(){
//获取class类别选择器JQuery对像集合中的第一个对象
alert($("#tbdy tr:first").html());
//属性:.html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
//获取class选择器对象集合中的最后一个对象
//属性:.text();结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
alert($(".rdc:last").text());
/** even匹配的是索引是:0 2 4 但行数是1,3 5......
:even 选择奇数行并且为其添加背景颜色为红色*/
$("tr:even").css("background","red"); //很轻松的就能实现隔行换色效果
/** :odd 选择偶数行并且为其添加背景颜色为蓝色*/
$("tr:odd").css("background","blue");
/**$("tr")取得所有的行的JQuery对象的集合
.eq(index)匹配一个给定索引值的元素的Jquery对象
.css("","")为Jquery对象添加一个样式属性和属性值
对象链式操作*/
$("tr:eq(1)").css("background","green");
$("tr").eq(1).css("background","yellow");
/**集合 List --->get(index)--->具体的对象--->具体对象的方法*/
/**取得所有行的Jquery对象集合索引值小于1的所有的tr对象样式设置为green*/
$("tr:lt(1)").css("background","green")
$("tr:gt(1)").css("background","black")
//匹配不是最后一行的样式背景颜色统一设置为红色
$("tr:not(:last)").css("background","red");
//匹配标题
alert($(":header").html());
});
<body>
<div align="center">
<div>
<h1>简单选择器的应用------过滤器</h1>
</div>
<div>
<table border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr id="thed">
<th>
序号
</th>
<th>
名称
</th>
<th>
邮箱
</th>
</tr>
</thead>
<tbody id="tbdy">
<tr class="rdc">
<td>
1001
</td>
<td>
Longmanfei </td>
<td>
Longmanfei@qq.com
</td>
</tr>
<tr>
<td>
1002
</td>
<td>
l_j
</td>
<td>
Longmanfei@qq.com
</td>
</tr>
<tr class="rdc">
<td>
1003
</td>
<td>
m_j
</td>
<td>
Longmanfei@qq.com
</td>
</tr>
<tr>
<td>
1004
</td>
<td>
x_j
</td>
<td>
Longmanfei@qq.com
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
?
这是皮毛的皮毛?,不积跬步无以至千里,不积小流无以成江河。所以我们从小事做起,就相当于正在完成一件大事。