jquery

信息来源：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="#" onclick="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中所占的位置。

after 在标签后面

<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中仍然占据着空间