jQuery 使用手册(二)


Posted in Javascript onSeptember 23, 2009

二:DOM操作
属性
我们以<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 使用手册(二)<id="test">after</p><href="#" onClick="jq()">jQuery</a>
jQuery代码及功能
function jq(){  
     $(
"a").after($("#test"));  
}
执行后相当于
jQuery 使用手册(二)<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 使用手册(二)<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 使用手册(二)<div id="test">
jQuery 使用手册(二)  
<span>span</span>
jQuery 使用手册(二)  
<p>after</p>
jQuery 使用手册(二)
</div>
jQuery 使用手册(二)
<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 使用手册(二)<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 使用手册(二)<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 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
微信小程序 开发之全局配置
May 05 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
jQuery 使用手册(一)
Sep 23 #Javascript
JavaScript 变量命名规则
Sep 23 #Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 #Javascript
jquery ajax 登录验证实现代码
Sep 23 #Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 #Javascript
javascript 必知必会之closure
Sep 21 #Javascript
用JavaScript隐藏控件的方法
Sep 21 #Javascript
You might like
PHP无限分类的类
2007/01/02 PHP
php mysql数据库操作类
2008/06/04 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
jQuery的一些注意
2006/12/06 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
Python的词法分析与语法分析
2013/05/18 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
ubuntu上安装python的实例方法
2019/09/30 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
基于matplotlib xticks用法详解
2020/04/16 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
晨会主持词
2014/03/17 职场文书
质检员岗位职责
2015/02/03 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年中个人总结范文
2015/03/10 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
德劲DE1108畅想
2021/04/22 无线电
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python