夜光序言:
不要让那些真正对你好的人,慢慢的从你的生活中消失,无论爱情还是友情,不去经营,都会形同陌路。要知道,想送你回家的人,东南西北都顺路;愿意陪你吃饭的人,酸甜苦辣都爱吃;想见你的人,千山万水都能赶来。
正文:
jQuery代码及功能:
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
size() Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前:<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("img").length);
}
运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
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前
<a 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<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("#test").after("<b>Hello</b>");
}
执行后相当于:
<a href="#" id="test" onClick="jq()">jQuery</a><b>Hello</b>
after(elem) after(elems) 将指定对象elem或对象组elems插入到在匹配元素后
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能
function jq(){
$("a").after($("#test"));
}
执行后相当于
<a href="#" onClick="jq()">jQuery</a><p id="test">after</p>
append(html)在匹配元素内部,且末尾插入指定html<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("#test").append("<b>Hello</b>");
}
执行后相当于
<a href="#" onClick="jq()">jQuery<b>Hello</b></a>
同理还有append(elem) append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解
appendTo(expr) 与append(elem)相反
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能
function jq(){
$("a"). appendTo ($("#test"));
}
执行后相当于
<p id="test">after<a href="#" onClick="jq()">jQuery</a> </p>
clone() 复制一个jQuery对象<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("#test").clone().appendTo($("a"));
}
复制$("#test")然后插入到<a>后,执行后相当于
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a><p id="test">after</p>
empty() 删除匹配对象的所有子节点
<div id="test">
<span>span</span>
<p>after</p>
</div>
<a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("#test").empty();
}
执行后相当于
<div id="test"></div><a 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)
<p id="a">p</p>
<div>div</div>
执行$("#a").append($("div"))后相当于
<p id="a">
P
<div>div</div>
</p>
执行$("#a").appendTo($("div")) 后 相当于
<div>
div
<p id="a">p</p>
</div>
执行$("#a").prepend ($("div")) 后 相当于
<p id="a">
<div>div</div>
P
</p>