???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>
?
这是皮毛的皮毛?,不积跬步无以至千里,不积小流无以成江河。所以我们从小事做起,就相当于正在完成一件大事。