jQuery操作-CSDN博客

jQuery库可以通过一行简单的标记被添加到网页中，jQuery是一个JavaScript函数库。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

jQuery库包含以下特性：

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities

一、jQuery入门

有两个版本的jQuery可供下载：

Production version --> 用于实际的网站中，已被精简和压缩，后缀名为：min.js
Development version --> 用于测试和开发，未压缩，是可读的代码，后缀名为：.js

这两个版本都可以从http://jquery.com/download/ 官网下载。

下面我们主要使用jQuery的1.x版本来进行介绍，主要是因为新版本的jQuery对IE6、7、8已经不兼容了。

1、jQuery的语法

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

基础语法：$(selector).action()

$符号定义jQuery
选择符(selector)"查询"和"查找"HTML元素
jQuery的action()执行对元素的操作

示例：

$(this).hide() -->隐藏当前元素
$("p").hide() -->隐藏所有<p>标签元素
$("p.test").hide() -->隐藏所有class="test"的<p>标签元素
$("#test").hide() -->隐藏所有id="test"的元素

2、jQuery选择器

基本选择器：

#id选择器

jQuery #id选择器通过HTML元素的id属性选取指定的元素。页面中元素的id应该是唯一的，所以要在页面中选取唯一的元素需要通过#id选择器。

 
        <div id= 
        "i1" 
        > 
       
        <p>wu.wu.wu......</p> 
       
        </div> 
       
        //#id选择器的语法 
       
        $( 
        "#i1" 
        )

元素选择器

jQuery元素选择器基于元素名选取元素，下面例子查找出页面所有的<p>元素。

 
        <div>DIV1</div> 
       
        <div>DIV2</div> 
       
        <span>SPAN</span> 
       
        //元素选择器： 
       
        $( 
        "div" 
        ); 
       
        //结果为对象： 
       
        [ <div>DIV1</div>, <div>DIV2</div> ]

.class选择器

jQuery类选择器可以通过指定的class查找元素。

 
        <div class= 
        "notMe" 
        >div class= 
        "notMe" 
        </div> 
       
        <div class= 
        "myClass" 
        >div class= 
        "myClass" 
        </div> 
       
        <span class= 
        "myClass" 
        >span class= 
        "myClass" 
        </span> 
       
        //class类选择器 
       
        $( 
        ".class" 
        ); 
       
        //结果： 
       
        [ <div class= 
        "myClass" 
        >div class= 
        "myClass" 
        </div>, <span class= 
        "myClass" 
        >span class= 
        "myClass" 
        </span> ]

更多示例

语法	描述	实例
$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的 <p> 元素	在线实例
$("p:first")	选取第一个 <p> 元素	在线实例
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素	在线实例
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素	在线实例
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素	在线实例
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素	在线实例
$("tr:even")	选取偶数位置的 <tr> 元素	在线实例
$("tr:odd")	选取奇数位置的 <tr> 元素	在线

层级选择器：

 
        <form> 
       
        <label>Name:</label> 
       
        <input name= 
        "name"  
        /> 
       
        <fieldset> 
       
        <label>Newsletter:</label> 
       
        <input name= 
        "newsletter"  
        /> 
       
        </fieldset> 
       
        </form> 
       
        <input name= 
        "none"  
        />

$("from input")：在给定的祖先元素下匹配所有的后代元素；
$("parent > child")：在给定的父元素下匹配所有的子元素；
$(“prev + next")：匹配所有紧接在prev元素后的next元素；
$("prev ~ siblings")：匹配prev元素之后的所有siblings元素。

基本筛选器：

$('xx:first'); ：获取第一个元素；
:not(selector)：去除所有与给定选择器匹配的元素；
$("tr::even")：匹配所有索引值为偶数的元素，从0开始计数；
$("tr:odd")：匹配所有索引值为奇数的元素，从0开始计数；
$("tr:eq(1)")：匹配一个给定索引值的元素；
$("tr:gt(0)")：匹配所有大于给定索引值的元素。

选择器属性：

[attribute=value]：匹配给定的属性是某个特定值的元素。

示例：查找所有name属性是newsletter的input元素

 
   
        //HTML代码： 
       

           
       
 
        <input type= 
        "checkbox"  
        name= 
        "newsletter"  
        value= 
        "Hot Fuzz"  
        /> 
       
 
        <input type= 
        "checkbox"  
        name= 
        "newsletter"  
        value= 
        "Cold Fusion"  
        /> 
       
 
        <input type= 
        "checkbox"  
        name= 
        "accept"  
        value= 
        "Evil Plans"  
        /> 
       

           
       
 
        //jQuery代码： 
       
 
        $( 
        "input[name='newsletter']" 
        ).attr( 
        "checked" 
        ,  
        true 
        ); 
       

           
       
 
        //结果： 
       
 
        [ <input type= 
        "checkbox"  
        name= 
        "newsletter"  
        value= 
        "Hot Fuzz"  
        checked= 
        "true"  
        />, <input type= 
        "checkbox"  
        name= 
        "newsletter" 
        value= 
        "Cold Fusion"  
        checked= 
        "true"  
        /> ] 
       
 
 