jQuery 学习（二）

主要学习jQuery对象的获取：

一、jQuery核心函数--jQuery()：

     以例子为主，首先是页面：

<div id="yzw" onclick="test();">你好，JQuery!</div>

  

具体 js的写法：

  

//页面初始化加载
$(function (){
            alert("页面加载完毕");
            //获取所有的<div.../> 标签对应的DOM对象
            $("div").append("新增的内容");
            //使用HTML字符串创建一个DOM对象，并将其放入body元素内
            $("<input type='button' value='按钮'/> ").appendTo(document.body);
            //直接将一个DOM对象包装称jQuery对象
            $(document.getElementById('yzw')).css("background-color","#fffff").css("border","1px solid balck");
 });

 

其中 $(function (){

    

}); 函数用于页面初始化，非常常用。

 

二、以CSS访问器访问DOM元素

   具体方法太多，只书写了一些常用的实例：

页面元素：

<ul>
       <li id="java">java</li>
       <li id="javaee" class="test">javaee</li>
       <li id="ajax">ajax</li>
       <li id="xml">xml</li>
       <li id="ejb">ejb</li>
       <li ><span id="workflow">workfolw</span></li>
    </ul>

 

响应的js:

 

           //以CSS选择器访问DOM元素
           $("#java").append("<b> 是 id为java的元素");
           //获取所有包含id属性的<li.../>元素，为他们增加背景颜色
           $("li[id]").css("background-color","#bbbbff");
           //获取class属性为test的元素，并为他们增加边框
           $(".test").css("border","3px dotted black");
           //同时获取id 为 xml,workflow的元素
           $("#xml,#workflow").append("<b>获得id 为xml,workflow 的元素</b>");
           //同时获取id 为xml,workflow的元素
           $("ul #workflow").append("<br/><b>位于ul之内的，id为workflow的元素");
           //
           $("ul>#ajax").append("<b>ul之内，id为ajax的子元素</b>");
           //获取id为ajax之后的所有li元素
           $("#ajax~li").css("background-color","#ff5555");

 三、选择器和附加限定词混合使用

   html页面和以前一样

   js如下：

  

//访问ul中li的第一个元素
            $("ul>li:first").append("<b>是ul元素之内的第一个li子元素</b>");
            //访问ul元素之内没有id属性的li子元素
            $("ul>li:not([id])").append("<b>是ul之内没有id属性的元素</b>");
            $("ul>li:even").append("ul元素中索引为奇数的li子元素").css("background-color","yellow");
            $("ul>li:gt(4)").append("<br/><b>是ul元素之内，索引大于4的li子元素</b>").css("border","1px dashed black");
            //访问ul元素之内且包含span元素的li子元素
            $("ul>li:has('span')").append("<br/><b>是ul元素之内，且包含span元素的li子元素</b>");
            //访问li元素之内且可见的span子元素
            $("li>span:visible").append("<br/><b>是ul元素之内，且可见的span子元素</b>").css("background-color","#bbbbbb");

 

还有一些比较特殊的附件限定词：

  

//访问页面中的第1、4、7...个li元素
            $("li:nth-child(3n+1)").css("border","1px dashed black");
            //
            $("span:only-child").append("<b>是作为父元素唯一子元素的span元素</b>");
            // 测试：first和：first-child之间的关系
            alert($("ul>li:first").html()==$("ul>li:first-child").html());   //返回true

 

以上介绍到此。