当前位置: 代码迷 >> Web前端 >> “轻”量级“赛手”JQuery(强大功能)
  详细解决方案

“轻”量级“赛手”JQuery(强大功能)

热度:157   发布时间:2012-10-10 13:58:11.0
“轻”量级“选手”JQuery(强大功能)

???jQuery?是一个JavaScript?库,它有助于简化?JavaScript?及?Asynchronous?JavaScript?+?XML?(Ajax)?编程。与类似的?JavaScript?库不同,jQuery?具有独特的基本原理?jQuery使用户能更方便地处理HTML?documentsevents、实现动画效果,并且方便地为网站提供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>

?

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

  相关解决方案