jQuery使用手册之二 DOM操作


Posted in Javascript onMarch 24, 2007

属性
我们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多方法来进行操作,如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法,方便大家快速对DOM对象进行操作
herf()   herf(val)
说明:对jQuery对象属性herf的操作。
例子:
未执行jQuery前

<href="1.htm" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
   alert($(
"#test").href());
   $(
"#test").href("2.html");
}
运行:先弹出对话框显示id为test的连接url,在将其url改为2.html,当弹出对话框后会看到转向到2.html
同理,jQuery还提供类似的其他方法,大家可以分别试验一下:
herf()  herf(val)   html()  html(val)   id()  id (val)  name()  name (val)   rel()  rel (val)
src()    src (val)   title()  title (val)   val()  val(val)

操作
after(html)  在匹配元素后插入一段html
<href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){  
       $(
"#test").after("<b>Hello</b>");  
}
执行后相当于:
<href="#" id="test" onClick="jq()">jQuery</a><b>Hello</b>

after(elem)  after(elems)  将指定对象elem或对象组elems插入到在匹配元素后
jQuery使用手册之二 DOM操作<id="test">after</p><href="#" onClick="jq()">jQuery</a>
jQuery代码及功能
function jq(){  
     $(
"a").after($("#test"));  
}
执行后相当于
jQuery使用手册之二 DOM操作<href="#" onClick="jq()">jQuery</a><id="test">after</p>

append(html)在匹配元素内部,且末尾插入指定html
<href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){ 
     $("#test").append("
<b>Hello</b>");  
}
执行后相当于
<href="#" onClick="jq()">jQuery<b>Hello</b></a>
同理还有append(elem)  append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解!

appendTo(expr)  与append(elem)相反

jQuery使用手册之二 DOM操作<id="test">after</p><href="#" onClick="jq()">jQuery</a>
jQuery代码及功能
function jq(){  
      $(
"a"). appendTo ($("#test"));  
}
执行后相当于
<id="test">after<href="#" onClick="jq()">jQuery</a> </p>

clone() 复制一个jQuery对象
<id="test">after</p><href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){  
     $(
"#test").clone().appendTo($("a"));  
}
复制$("#test")然后插入到<a>后,执行后相当于
<id="test">after</p><href="#" onClick="jq()">jQuery</a><id="test">after</p>

empty() 删除匹配对象的所有子节点
jQuery使用手册之二 DOM操作<div id="test">
jQuery使用手册之二 DOM操作  
<span>span</span>
jQuery使用手册之二 DOM操作  
<p>after</p>
jQuery使用手册之二 DOM操作
</div>
jQuery使用手册之二 DOM操作
<href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){  
    $(
"#test").empty();  
}
执行后相当于
<div id="test"></div><href="#" onClick="jq()">jQuery</a>

insertAfter(expr)   insertBefore(expr)
     按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem),insertBefore(expr)相当于after (elem)

prepend (html)  prepend (elem)  prepend (elems)   在匹配元素的内部且开始出插入
通过下面例子区分append(elem)  appendTo(expr)  prepend (elem)

<id="a">p</p>
<div>div</div>
执行$("#a").append($("div")) 后相当于
<id="a">

  

<div>div</div>
</p>
执行$("#a").appendTo($("div")) 后 相当于
<div>
   div
   
<id="a">p</p>
</div>
执行$("#a").prepend ($("div")) 后 相当于
<id="a">
   
<div>div</div></p>

remove()  删除匹配对象
注意区分empty(),empty()移出匹配对象的子节点,remove(),移出匹配对象

wrap(htm) 将匹配对象包含在给出的html代码内

<p>Test Paragraph.</p> <href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){  
      $(
"p").wrap("<div class='wrap'></div>"); 
}
执行后相当于
<div class='wrap'><p>Test Paragraph.</p></div>

wrap(elem) 将匹配对象包含在给出的对象内
<p>Test Paragraph.</p><div id="content"></div>
<href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){  
      $(
"p").wrap( document.getElementById('content') );
}
执行后相当于
<div id="content"><p>Test Paragraph.</p></div>

遍历、组合
add(expr)  在原对象的基础上在附加符合指定表达式的jquery对象
<p>Hello</p><p><span>Hello Again</span></p>
<href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
     
var f=$("p").add("span");    
     
for(var i=0;i < $(f).size();i++){
     alert($(f).eq(i).html());}
}
执行$("p")得到匹配<p>的对象,有两个,add("span")是在("p")的基础上加上匹配<span >的对象,所有一共有3个,从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合,分别是[<p>Hello</p>],[<p><span>Hello Again</span></p>],[<span>Hello Again</span>]。

add(el)  在匹配对象的基础上在附加指定的dom元素。
        $("p").add(document.getElementById("a"));

add(els)  在匹配对象的基础上在附加指定的一组对象,els是一个数组

jQuery使用手册之二 DOM操作<p>Hello</p><p><span>Hello Again</span></p>
jQuery代码及功能:
function jq(){
     
var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
     
for(var i=0;i < $(f).size();i++){
             alert($(f).eq(i).html());}
}
注意els是一个数组,这里的[ ]不能漏掉。

ancestors ()  一依次以匹配结点的父节点的内容为对象,根节点除外(有点不好理解,看看下面例子就明白了)

<div>
    
<p>one</p>
    
<span>
    
<u>two</u>
    
</span>
</div>
jQuery代码及功能:
function jq(){
     
var f= $("u").ancestors();
     
for(var i=0;i < $(f).size();i++){
      alert($(f).eq(i).html());}
}
第一个对象是以<u>的父节点的内容为对象,[ <u>two</u> ]
第一个对象是以<u>的父节点的父节点(div)的内容为对象,[<p>one</p><span><u>two</u></span> ]
一般一个文档还有<body>和<html>,依次类推下去。

ancestors (expr)  在ancestors()的基础上之取符合表达式的对象
如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象:
[ <p>one</p><span><u>two</u></span>  ]

children()  返回匹配对象的子介点

<p>one</p>
<div id="ch">   
     
<span>two</span>
</div>
jQuery代码及功能:
function jq(){
    alert($(
"#ch").children().html());
}
$("#ch").children()得到对象[ <span>two</span> ].所以.html()的结果是”two”

children(expr)  返回匹配对象的子介点中符合表达式的节点

<div id="ch">   
      
<span>two</span>
      
<span id="sp">three</span>
</div>
jQuery代码及功能
function jq(){
    alert($(
"#ch").children(“#sp”).html());
}
$("#ch").children()得到对象[<span>two</span><span id="sp">three</span> ].
$("#ch").children(“#sp”)过滤得到[<span id="sp">three</span> ]

parent ()  parent (expr)取匹配对象父节点的。参照children帮助理解

contains(str)  返回匹配对象中包含字符串str的对象

jQuery使用手册之二 DOM操作<p>This is just a test.</p><p>So is this</p>
jQuery代码及功能:
function jq(){
    alert($(
"p").contains("test").html());
}
$("p")得到两个对象,而包含字符串”test”只有一个。所有$("p").contains("test")返回 [ <p>This is just a test.</p> ]

end() 结束操作,返回到匹配元素清单上操作前的状态.

filter(expr)   filter(exprs)   过滤现实匹配符合表达式的对象 exprs为数组,注意添加“[ ]”

<p>Hello</p><p>Hello Again</p><class="selected">And Again</p>
jQuery代码及功能:
function jq(){
    alert($(
"p").filter(".selected").html())
}
$("p")得到三个对象,$("p").contains("test")只返回class为selected的对象。

find(expr)  在匹配的对象中继续查找符合表达式的对象

<p>Hello</p><id="a">Hello Again</p><class="selected">And Again</p>
Query代码及功能:
function jq(){
    alert($(
"p").find("#a").html())
}
在$("p")对象中查找id为a的对象。

is(expr)  判断对象是否符合表达式,返回boolen值

<p>Hello</p><id="a">Hello Again</p><class="selected">And Again</p>
Query代码及功能:
function jq(){
    alert($(
"#a").is("p"));
}
在$("#a ")是否符合jquery表达式。
大家可以用$("#a").is("div");  ("#a").is("#a")多来测试一下

next()  next(expr)  返回匹配对象剩余的兄弟节点

<p>Hello</p><id="a">Hello Again</p><class="selected">And Again</p>
jQuery代码及功能
function jq(){
        alert($(
"p").next().html());
        alert($(
"p").next(".selected").html());
}
$("p").next()返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]两个对象
$("p").next(".selected)只返回 [<p class="selected">And Again</p> ]一个对象

prev ()  prev (expr)  参照next理解

not(el)  not(expr)  从jQuery对象中移出匹配的对象,el为dom元素,expr为jQuery表达式。

<p>one</p><id="a">two</p>
<href="#" onclick="js()">jQuery</a>
jQuery代码及功能:
function js(){
     alert($(
"p").not(document.getElementById("a")).html());
     alert($(
"p").not(“#a”).html());
}
$("p")由两个对象,排除后的对象为[<p>one</p> ]

siblings ()  siblings (expr)  jquery匹配对象中其它兄弟级别的对象

<p>one</p>
<div>
  
<id="a">two</p>
</div>
<href="#" onclick="js()">jQuery</a>
jQuery代码及功能:
function js(){
       alert($(
"div").siblings().eq(1).html());
}
$("div").siblings()的结果实返回两个对象[<p>one</p>,<a href="#" onclick="js()">jQuery</a> ]
alert($("div").siblings(“a”)返回一个对象[<a href="#" onclick="js()">jQuery</a> ]

其他
addClass(class)   为匹配对象添加一个class样式
removeClass (class)   将第一个匹配对象的某个class样式移出

attr (name)   获取第一个匹配对象的属性

<img src="test.jpg"/><href="#" onclick="js()">jQuery</a> 
jQuery代码及功能:
function js(){
     alert($(
"img").attr("src"));
}
返回test.jpg

attr (prop)   为第一个匹配对象的设置属性,prop为hash对象,用于为某对象批量添加众多属性

<img/><href="#" onclick="js()">jQuery</a>
jQuery代码及功能:
function js(){
     $(
"img").attr({ src: "test.jpg", alt: "Test Image" }); 
}
运行结果相当于<img src="test.jpg" alt="Test Image"/>

attr (key,value)   为第一个匹配对象的设置属性,key为属性名,value为属性值

<img/><a href="#" onclick="js()">jQuery</a>
jQuery代码及功能
function js(){
     $(
"img").attr(“src”,”test.jpg”); 
}
运行结果相当于<img src="test.jpg"/>

removeAttr (name)   将第一个匹配对象的某个属性移出

<img alt="test"/><href="#" onclick="js()">jQuery</a>
jQuery代码及功能:
function js(){
     $(
"img"). removeAttr("alt"); 
}
运行结果相当于<img />

toggleClass (class)   将当前对象添加一个样式,不是当前对象则移出此样式,返回的是处理后的对象

<p>Hello</p><class="selected">Hello Again</p><href="#" onclick="js()">jQuery</a>
$("p")的结果是返回对象 [<p>Hello</p>,<p class="selected">Hello Again</p> ]
$("p").toggleClass("selected")的结果是实返回对象 [ <p class="selected">Hello</p>, <p>Hello Again</p> ]
Javascript 相关文章推荐
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
全面解析bootstrap格子布局
May 22 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
jQuery使用手册之一
Mar 24 #Javascript
5 cool javascript apps
Mar 24 #Javascript
用JQuery 实现的自定义对话框
Mar 24 #Javascript
JQuery 简便实现页面元素数据验证功能
Mar 24 #Javascript
AutoSave/自动存储功能实现
Mar 24 #Javascript
用 javascript 实现的点击复制代码
Mar 24 #Javascript
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 #Javascript
You might like
德生9700DX电路分析
2021/03/02 无线电
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
Bootstrap CSS布局之列表
2016/12/15 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
python实现挑选出来100以内的质数
2015/03/24 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
Shell如何接收变量输入
2012/09/24 面试题
中英文自我评价常用句型
2013/12/19 职场文书
优良学风班申请材料
2014/02/13 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
六年级学生评语大全
2014/12/26 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2015年营业员工作总结
2015/04/23 职场文书
书法社团活动总结
2015/05/07 职场文书
走近毛泽东观后感
2015/06/04 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL