信息来源:http://www.runoob.com/jquery/jquery-selectors.html
jquery是一个javascript库,两个强大的作用:元素查找能力和丰富的插件。
元素选择器:
$('p'):标签名为p的元素
$('#test'):id选择器
$('.text'):class选择器
$(':button'):类型选择器。
$(document):选择整个文档对象
$('div.myClass'):选择class为myClass的div元素
$('tr:odd'):选择表单中的input元素
$('div:visible'):选择可见的div元素
有时,只想让事件运行一次,这时可以使用.one()方法
$("p").one("click", function() {
alert("Hello"); //只运行一次,以后的点击不会运行
});
显示和隐藏:
一般用$('sss').hide(); hide只是隐藏(视图上看不到了),依旧存在dom中,如果在表单中,提交时依旧会把他提交
简单,实用,他的不足可以用后台补足。提交在后台设置为null即可。
$('sss').show(); 可以用$('sss').toggle();来代替
toggle() 方法切换元素的可见状态。如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素
另一种方法:
<div id="ad">
</div>
<a href="#" οnclick="showad()">审批记录</a>
function showad(){
if($('#ad').is(":visible")){
$('#ad').hide();
}else{
$('#ad').show();
}
}
添加新元素:四种方法
append() 在被选元素的结尾插入内容。
prepend()在被选元素的开头插入内容
after() 在被选元素之后插入内容
before()在被选元素之前插入内容
删除元素:
remove:删除被选元素(及其子元素)
该节点所包含的所有后代节点将同时被删除。
如果使用remove则删除的元素将没有原始性能。而detach则保存元素性能
var s=$('#id').remove(); s为删除的内容
detach()
detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素,但保留这个元素的内存模型对象。
$("p").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。
虽然这个方法我不常用。但是可以预测的是。使用getElementsByTagName应该匹配不到当前元素了。因为元素已经脱离了文档流。
之所以这个元素没有被当做垃圾回收。是因为被jquery托管了。jquery继续引用着当前这个元素。
这个元素就不会被垃圾回收器当做垃圾对象从内存中移除。
也是从DOM中去掉所有匹配的元素。但需要注意的是,
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。
与remove()不同的是,所有绑定的事件、附加的数据都会保留下来。
var x;
$("#btn1").click(function(){
x=$("p").detach();
});
$("#btn2").click(function(){
$("body").prepend(x);
});
empty:从被选元素中删除子元素。
empty()方法并不是删除节点,而是清空节点,
它能清空元素中的所有后代节点
empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,
他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置。
<span id="span">aaaaaaaaaaaaaaa</span>
$('span').after("<a href="#">ddddd</a>");
结果如下:
<span>aaaaaaaaaaaaaaa</span>
<a href="#">ddddd</a>
append 在标签内部的元素后面加入内容
<span id="span">aaaaaaaaaaaaaaa</span>
$('span').append("<a href="#">ddddd</a>");
结果如下:
<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
empty()与remove的区别:
例如:
<p>Hello</p>
World
执行$("p").empty()其结果是
<p></p>
World
删除的是<p>内部的元素(Hello)
执行$("p").remove()其结果是
World
追加元素:
append 在被选择元素结尾插入内容
prepend 在被选择元素开头插入内容
after之后插入内容
before之前插入内容
经验: 添加 清除
append与empty配套使用 添加元素到标签内部 清空标签内部元素
after 与remove配套使用 在标签后面添加元素 移除标签
display:none 对象的属性全部消失,
visibility:hidden 只是不显示,看不到 但是在dom中仍然占据着空间