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

Longmanfei · 发表于 2013-2-7 23:38:51

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

		自动登录	找回密码
密码			立即注册

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

浏览过的版块