jQuery使用手册(二)

本文介绍了jQuery库中的关键函数使用方法,包括通过CSS选择器、XPath或HTML代码匹配元素,限制jQuery作用范围至特定DOM元素及其操作示例,如元素显示、隐藏、追加等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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


jQuery 代码及功能:

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

运行:当点击 idtest 的元素时,弹出对话框文字为 two ,即 div 标签下 p 元素的内容

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

运行:当点击 idtest 的元素时,向 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 >
< href ="#"  id ="test"  onClick ="jq()"> jQuery </ a >

jQuery 代码及功能:

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

运行:当点击 idtest 的元素时,弹出对话框文字为 two ,即 div 标签下 p 元素的内容

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

运行:当点击 idtest 的元素时,背景色变成黑色

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

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

jQuery 代码及功能:

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

运行:当点击 idtest 的元素时,隐藏 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 >
< href ="#"  id ="test"  onClick ="jq()"> jQuery </ a >

jQuery 代码及功能:

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

运行:当点击 idtest 的元素时,弹出对话框文字为 two ,即 div 标签下 p 元素的内容。

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

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

jQuery 代码及功能:

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

运行:当点击 idtest 的元素时, img 标签的 src 都变成了 2.jpg

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

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

jQuery 代码及功能:

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

运行:当点击 idtest 的元素时, alert 对话框显示: So is this ,即第二个 <p> 标签的内容


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值