jQuery使用手册(二)

<!----><!----><!----> <!---->

一：核心部分
$(expr)
说明：该函数可以通过 css 选择器， Xpath 或 html 代码来匹配目标元素，所有的 jQuery 操作都以此为基础
参数： expr ：字符串，一个查询表达式或一段 html 字符串
例子：
未执行 jQuery 前：

<!----><!----> <!---->< p > one </ p >
<!----><!----> <!----> < div >
<!----><!----> <!---->      < p > two </ p >
<!----><!----> <!----> </ div >
    < p > three </ p >  
    < a  href ="#"  id ="test"  onClick ="jq()"   > jQuery </ a >

jQuery 代码及功能：

function  jq(){  
    alert($("div > p").html());  
}

运行：当点击 id 为 test 的元素时，弹出对话框文字为 two ，即 div 标签下 p 元素的内容

function  jq(){
    $("<div><p>Hello</p></div>").appendTo("body");
}

运行：当点击 id 为 test 的元素时，向 body 中添加 “<div><p>Hello</p></div>”

$(elem)
说明：限制 jQuery 作用于一个特定的 dom 元素，这个函数也接受 xml 文档和 windows 对象
参数： elem ：通过 jQuery 对象压缩的 DOM 元素
例子：
未执行 jQuery 前：

< p > one </ p >
   < div >
      < p > two </ p >
   </ div >< p > three </ p >
< a  href ="#"  id ="test"  onClick ="jq()"> jQuery </ a >

jQuery 代码及功能：

function  jq(){
    alert($(document).find("div > p").html());
}

运行：当点击 id 为 test 的元素时，弹出对话框文字为 two ，即 div 标签下 p 元素的内容

function  jq(){
   $(document.body).background("black");
}

运行：当点击 id 为 test 的元素时，背景色变成黑色

$(elems)
说明：限制 jQuery 作用于一组特定的 DOM 元素
参数： elem ：一组通过 jQuery 对象压缩的 DOM 元素
例子：
未执行 jQuery 前：

<!----><!----> <!---->< form  id ="form1">
<!----><!----> <!---->      < input  type ="text"  name ="textfield">
<!----><!----> <!---->      < input  type ="submit"  name ="Submit"  value =" 提交 ">
<!----><!----> <!----> </ form >
<!----><!----> <!----> < a  href ="#"  id ="test"  onClick ="jq()"> jQuery </ a >

jQuery 代码及功能：

function  jq(){ 
   $(form1.elements ).hide(); 
}

运行：当点击 id 为 test 的元素时，隐藏 form1 表单中的所有元素。

$(fn)
说明： $(document).ready() 的一个速记方式，当文档全部载入时执行函数。可以有多个 $(fn) 当文档载入时，同时执行所有函数！
参数： fn (Function): 当文档载入时执行的函数！
例子：

$(  function (){
    $(document.body).background("black");
})

运行：当文档载入时背景变成黑色，相当于 onLoad 。

$(obj)
说明：复制一个 jQuery 对象，
参数： obj (jQuery): 要复制的 jQuery 对象
例子：
未执行 jQuery 前：

< p > one </ p >
< div >
    < p > two </ p >
</ div >
< p > three </ p >
< a  href ="#"  id ="test"  onClick ="jq()"> jQuery </ a >

jQuery 代码及功能：

function  jq(){
     var  f = $("div"); 
    alert($(f).find("p").html()) 
}

运行：当点击 id 为 test 的元素时，弹出对话框文字为 two ，即 div 标签下 p 元素的内容。

each(fn)
说明：将函数作用于所有匹配的对象上
参数： fn (Function): 需要执行的函数
例子：
未执行 jQuery 前：

< img  src ="1.jpg"/>
< img  src ="1.jpg"/>
< a  href ="#"  id ="test"  onClick ="jq()"> jQuery </ a >

jQuery 代码及功能：

function  jq(){
   $("img").each( function (){ 
         this .src = "2.jpg"; });
}

运行：当点击 id 为 test 的元素时， img 标签的 src 都变成了 2.jpg 。

eq(pos)
说明：减少匹配对象到一个单独得 dom 元素
参数： pos (Number): 期望限制的索引，从 0 开始
例子：
未执行 jQuery 前：

<!----><!----> <!---->< p > This is just a test. </ p >
<!----><!----> <!----> < p > So is this </ p >
<!----><!----> <!----> < a  href ="#"  id ="test"  onClick ="jq()"> jQuery </ a >

jQuery 代码及功能：

function  jq(){
    alert($("p").eq(1).html())
}

运行：当点击 id 为 test 的元素时， alert 对话框显示： So is this ，即第二个 <p> 标签的内容