chapter2 jQuery

 

jQuery

 

jQuery库是一个非常优秀的JavaScript库。他的优势主要体现在如下几点：

1、 jQuery也是一个纯粹的JavaScript代码库，完全可以在其他的web应用中使用。

2、 jQuery也能兼顾主流浏览器标准能跨浏览器运行。

3、 与其他js库不同的是，jQuery采用了另一种更优雅的解决方法，在使用jQuery库之后，开发者操作的对象不再是原始的DOM元素，而是jQuery对象

4、 jQuery还提供了一些工具方法用来简化数组、字符串的操作。而且jQuery库对Ajax也提供了良好的支持。

 

使用jQuery

使用jQuery不需要增加额外的环境变量、配置文件，只需要在HTML页面导入jQuery的JavaScript文件即可。

<script type="text/javascript" src="/jquery_beforeclass/js/jquery-1.3.1.js"></script>

 

 

获取jQuery对象

jQuery核心函数

jQuery()函数获取jQuery对象的根本途径，该函数主要有如下用法： demo01.html

  <script type="text/javascript">

        //获取所有DIV元素的DOM对象

        $("div").append("新增的内容");

        //使用HTML文字创建一个DOM对象，并将其添加到body元素内

        $("<input type='button' value='单击我' />").appendTo(document.body);

        //直接将DOM对象包装成jQuery对象

        $(document.getElementById("lee"))

        .css("background-color","#aaffaa")

        .css("border","1px solid black");

        //指定页面加载完成后执行指定的函数

        $(function(){

            alert("页面加载完成");

        });

    </script>

 

 

以CSS选择器获取DOM元素   demo02.html

<script type="text/javascript">

    //获取id为java的元素

    $("#java").append("<b>是id为java的元素</b>");

   

    //获取所有包含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>");

   

    //获取ul之内id为workflow的元素

    $("ul #workflow").append("<br/><b>位于ul之内，id为workflow的子元素</b>");

   

    //获取ul之内id为ajax的直接子元素

    $("ul>#ajax").append("<b>ul之内，id为ajax的子元素</b>")

    .css("border","2px solid black");

   

    //获取id为ajax元素之后所有的LI元素

    $("#ajax~li").css("background-color","#ff5555");

    </script>

 

 

选择器的附加限定词   demo03.html

<script type="text/javascript">

    //访问ul元素下的第一个li子元素

    $("ul>li:first").append("<b>是ul元素之内的第一个li子元素</b>")  ;

   

    //访问ul元素之内没有id属性的li子元素

    $("ul>li:not([id])").append("<b>是ul元素之内,没有id属性li子元素</b>");

   

    //访问ul元素之内索引为公偶数的li子元素，并为他们添加背景色（从0开始）

    $("ul>li:even").css("background-color","#ccffcc");

   

    //访问ul元素之内索引大于4的li子元素，（元素索引从0开始）

    $("ul>li:gt(4)").append("<br/><b>是ul元素之内、索引大于4的li子元素</b>")

    .css("border","1px dashed black");

   

    //访问ul元素内li元素中有包含span标签的元素

    $("ul>li:has('span')").append("<br/><b>是ul元素之内、且包含span元素的li子元素</b>");

   

    //访问li元素内可见的span元素

    $("li>span:visible").append("<b>是li元素之内，且可见的span子元素</b>")

    .css("background-color","#bbbbbb");

</script>

除以上使用过的限定词以外还有：

:eq(index) : 匹配索引相等的HTML元素

:header : 返回匹配指定的选择器，且必须是h1,h2,h3之类的标题元素

:contains(text) : 返回匹配指定选择器，具包含text文本的html元素包装成的jQuery对象

:empty : 返回匹配指定选择器，具不包含任何内容（字符串也不行）

:first-child : 返回匹配指定选择器中的第一个子元素

:last-child : 返回匹配指定选择器中的最后一个子元素

:only-child : 返回匹配指定选择器且是其父类元素的唯一子元素的HTML对象

 

表单相关的选择器   demo04.html

<script type="text/javascript">

    //获取所有input、textarea、select和button并为其设置值为test

    $(":input").val("test");

   

    //将所有指定了selected的表单元素改变背景色

    $(":selected").css("background-color","red");

   

    //返回所有指定了checked的表单元素

    $(":checked").width("40").css("border","2px dotted black");

</script>

:text 返回所有type=”text”的input元素

:password 返回所有type=”password”的input元素

:radio返回所有type=”radio”的input元素

:checkbox返回所有type=”checkbox”的input元素

:submit返回所有type=”submit”的input元素

:image返回所有type=”image”的input元素

:reset返回所有type=”reset”的input元素

:button返回所有按钮元素包括type=”button”的input元素

:file返回所有文本域的元素

:hidden 返回所有不可见的元素以及指定了type=”hidden”的input元素

:enabled 返回所有可用的（未指定 disabled=”disabled”）的表单元素

:disabled 返回所有不可以（指定了 disabled=”disabled”）的表单元素