剑网3扇子要多少天:jQuery使用手册之DOM操作
来源:百度文库 编辑:中财网 时间:2024/05/03 22:54:02
我们以为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在jQuery里$("#a")将得到jQuery对象[ ],然后可以用jQuery提供的很多方法来进行操作,如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法,方便大家快速对DOM对象进行操作
herf() herf(val)
说明:对jQuery对象属性herf的操作。
例子:
未执行jQuery前
jQuery
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
jQuery
jQuery代码及功能:function jq(){
$("#test").after("Hello");
}
执行后相当于:jQueryHello
after(elem) after(elems) 将指定对象elem或对象组elems插入到在匹配元素后after
jQuery
jQuery代码及功能function jq(){
$("a").after($("#test"));
}
执行后相当于jQueryafter
append(html)在匹配元素内部,且末尾插入指定htmljQuery
jQuery代码及功能:function jq(){
$("#test").append("Hello");
}
执行后相当于jQueryHello
同理还有append(elem) append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解!appendTo(expr) 与append(elem)相反
after
jQuery
jQuery代码及功能function jq(){
$("a"). appendTo ($("#test"));
}
执行后相当于afterjQuery
clone() 复制一个jQuery对象after
jQuery
jQuery代码及功能:function jq(){
$("#test").clone().appendTo($("a"));
}
复制$("#test")然后插入到后,执行后相当于after
jQueryafter
empty() 删除匹配对象的所有子节点
span
after
jQuery
jQuery代码及功能:function jq(){
$("#test").empty();
}
执行后相当于jQuery
insertAfter(expr) insertBefore(expr)按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem),insertBefore(expr)相当于after (elem)
prepend (html) prepend (elem) prepend (elems) 在匹配元素的内部且开始出插入
通过下面例子区分append(elem) appendTo(expr) prepend (elem)
p
div
执行$("#a").append($("div")) 后相当于
P
div
执行$("#a").appendTo($("div")) 后 相当于
div
p
执行$("#a").prepend ($("div")) 后 相当于
div
P
remove() 删除匹配对象注意区分empty(),empty()移出匹配对象的子节点,remove(),移出匹配对象
wrap(htm) 将匹配对象包含在给出的html代码内
Test Paragraph.
jQuery
jQuery代码及功能:function jq(){
$("p").wrap("");
}
执行后相当于Test Paragraph.
wrap(elem) 将匹配对象包含在给出的对象内Test Paragraph.
jQuery
jQuery代码及功能:function jq(){
$("p").wrap( document.getElementById('content') );
}
执行后相当于Test Paragraph.
遍历、组合add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象
Hello
Hello Again
jQuery
jQuery代码及功能:function jq(){
var f=$("p").add("span");
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
执行$("p")得到匹配的对象,有两个,add("span")是在("p")的基础上加上匹配的对象,所有一共有3个,从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合,分别是[ Hello Hello Again Hello Hello Again one one one one This is just a test. So is this This is just a test. Hello Hello Again And Again Hello Hello Again And Again Hello Hello Again And Again Hello Hello Again And Again Hello Again And Again And Again one two one one two one Hello Hello Again Hello Hello Again Hello Hello Again
add(el) 在匹配对象的基础上在附加指定的dom元素。
$("p").add(document.getElementById("a"));
add(els) 在匹配对象的基础上在附加指定的一组对象,els是一个数组。
jQuery代码及功能:function jq(){
注意els是一个数组,这里的[ ]不能漏掉。
var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
ancestors () 一依次以匹配结点的父节点的内容为对象,根节点除外(有点不好理解,看看下面例子就明白了)
jQuery代码及功能:
twofunction jq(){
第一个对象是以的父节点的内容为对象,[ two ]
var f= $("u").ancestors();
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
第一个对象是以的父节点的父节点(div)的内容为对象,[
一般一个文档还有和,依次类推下去。
ancestors (expr) 在ancestors()的基础上之取符合表达式的对象
如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象:[
children() 返回匹配对象的子介点
jQuery代码及功能:
twofunction jq(){
$("#ch").children()得到对象[ two ].所以.html()的结果是”two”
alert($("#ch").children().html());
}
children(expr) 返回匹配对象的子介点中符合表达式的节点
jQuery代码及功能
two
threefunction jq(){
$("#ch").children()得到对象[twothree ].
alert($("#ch").children(“#sp”).html());
}
$("#ch").children(“#sp”)过滤得到[three ]
parent () parent (expr)取匹配对象父节点的。参照children帮助理解
contains(str) 返回匹配对象中包含字符串str的对象
jQuery代码及功能:function jq(){
$("p")得到两个对象,而包含字符串”test”只有一个。所有$("p").contains("test")返回 [
alert($("p").contains("test").html());
}
end() 结束操作,返回到匹配元素清单上操作前的状态.
filter(expr) filter(exprs) 过滤现实匹配符合表达式的对象 exprs为数组,注意添加“[ ]”
jQuery代码及功能:function jq(){
$("p")得到三个对象,$("p").contains("test")只返回class为selected的对象。
alert($("p").filter(".selected").html())
}
find(expr) 在匹配的对象中继续查找符合表达式的对象
Query代码及功能:function jq(){
在$("p")对象中查找id为a的对象。
alert($("p").find("#a").html())
}
is(expr) 判断对象是否符合表达式,返回boolen值
Query代码及功能:function jq(){
在$("#a ")是否符合jquery表达式。
alert($("#a").is("p"));
}
大家可以用$("#a").is("div"); ("#a").is("#a")多来测试一下
next() next(expr) 返回匹配对象剩余的兄弟节点
jQuery代码及功能function jq(){
$("p").next()返回 [
alert($("p").next().html());
alert($("p").next(".selected").html());
}
$("p").next(".selected)只返回 [
prev () prev (expr) 参照next理解
not(el) not(expr) 从jQuery对象中移出匹配的对象,el为dom元素,expr为jQuery表达式。
jQuery代码及功能:
jQueryfunction js(){
$("p")由两个对象,排除后的对象为[
alert($("p").not(document.getElementById("a")).html());
alert($("p").not(“#a”).html());
}
siblings () siblings (expr) jquery匹配对象中其它兄弟级别的对象
jQuery代码及功能:
jQueryfunction js(){
$("div").siblings()的结果实返回两个对象[
alert($("div").siblings().eq(1).html());
}
alert($("div").siblings(“a”)返回一个对象[jQuery ]
其他
addClass(class) 为匹配对象添加一个class样式
removeClass (class) 将第一个匹配对象的某个class样式移出
attr (name) 获取第一个匹配对象的属性jQuery
jQuery代码及功能:function js(){
返回test.jpg
alert($("img").attr("src"));
}
attr (prop) 为第一个匹配对象的设置属性,prop为hash对象,用于为某对象批量添加众多属性jQuery
jQuery代码及功能:function js(){
运行结果相当于
$("img").attr({ src: "test.jpg", alt: "Test Image" });
}attr (key,value) 为第一个匹配对象的设置属性,key为属性名,value为属性值
jQuery
jQuery代码及功能function js(){
运行结果相当于
$("img").attr(“src”,”test.jpg”);
}
removeAttr (name) 将第一个匹配对象的某个属性移出jQuery
jQuery代码及功能:function js(){
运行结果相当于
$("img"). removeAttr("alt");
}
toggleClass (class) 将当前对象添加一个样式,不是当前对象则移出此样式,返回的是处理后的对象
$("p")的结果是返回对象 [
$("p").toggleClass("selected")的结果是实返回对象 [