当前位置:文档之家› jQuery总结2

jQuery总结2

jQuery总结2
jQuery总结2

1、创建元素节点

传统的javascript方法,创建元素节点:

var a = document.createElement("p");

jQuery中创建节点的方法是:

$('

');

和createElement()一样,创建出来的新元素节点不会被自动添加到文档里。

如果想把它添加到文档里,可以使用jQuery中的append()、insertAfter()、before ()等方法。比如:

var a = $('

');

$('body').append(a);//添加到body元素的最后

2、创建文本节点

传统的javascript方法,创建文本节点程序代码

var b = document.createTextNode("my demo");

通常创建文本节点和创建元素节点配合使用.

比如:

varmes = document.createTextNode("hello world");

var container = document.createElement("p");

container.appendChild(mes);

document.body.appendChild(container);

而在jQuery中创建节点就不必那么麻烦了:

$('

hello world

');

和createElement()一样,创建出来的新元素节点不会被自动添加到文档里。

如果想把它添加到文档里,可以使用jQuery中的append()、insertAfter()、before ()等方法。比如:

var a = $('

hello world

');

$('body').append(a);//添加到body元素的最后

3、复制节点

传统的javascript方法,复制节点:

比如:

varmes = document.createTextNode("hello world");

var container = document.createElement("p");

container.appendChild(mes);

document.body.appendChild(container);

varnewpara = container.cloneNode(true);//true和false的区别

document.body.appendChild(newpara );

注意:

true :是

aaaa

克隆。

false:只克隆

,里面的文本不克隆。

可以用firebug 看看。

在jQuery中复制节点:

var a = $('

hello world

');

$('body').append(a);

varclone_a = a.clone();

$('body').append(clone_a);

和createElement()一样,复制出来的新元素节点不会被自动添加到文档里。

如果想把它添加到文档里,可以使用jQuery中的append()、insertAfter()、before ()等方法。

另外还有一个注意:如果克隆后,id一样,不要忘记用.attr("id","new_id")来改变新的节点的ID。

3、插入节点

传统的javascript方法,插入节点:

appendChild():

给元素追加一个子节点,新的节点插入到最后。

var container = document.createElement("p");

document.body.appendChild(container);

insertBefore():

顾名思义,就是把一个新的节点插入到目标节点的前面。

Element.insertBefore(newNode,targerNode );

在jQuery中插入节点比javascript自带的多了很多,

比如:

引用内容

.append() .appendTo() .prepend() .prependTo() .after() .insertAfter() .before() .insertBefore()

所以对dom操作的简化也是jquery的亮点之一。

4、删除节点

传统的javascript方法,删除节点:

var b = document.getElementById("b");

var c = b.parentNode;

c.removeChild(b);

在jQuery中的删除节点:

$('#test2').remove();

5、替换节点

传统的javascript方法,替换节点:

Element.repalceChild(newNode , oldNode );

oldNode必须是Element的一个子节点。

在jQuery中的替换节点:

$("

替换test1!

").replaceAll("#test1");

6、设置属性,获取属性

传统的javascript方法,设置属性,获取属性:

setAttribute();//设置

var a = document.createElement(“p”);

a.setAttribute("title","my demo");

不管以前有没有title属性,以后的值是my demo。

getAttribute();//获取

var a =document.getElementById("cssrain");

var b = a.getAttribute("title");

获取的时候,如果属性不存在,则返回空,

在jQuery中的设置属性,获取属性:

$("#test1").attr({ "class" : "test" , "title" : "TestDemo!" });

$("#test1").attr("class");

7、查找节点

查找节点对jQuery来说简直是小菜一碟.

jQuery最引入关注的就是查找节点,也就是通常所说的选择器.

比如:

程序代码

$('#id') $('.class') $('tag') $('tag.class') $('#id tag') $('tag#id') $('#id:visible') $('#id .class') $('.class .class')

8、jQuery对checkbox的操作

1. 全选

2. 取消全选

3. 选中所有奇数

4. 反选

5. 获得选中的所有值

$("document").ready(function(){

$("#btn1").click(function(){

$("[name='checkbox']").attr("checked",'true');//全选

})

$("#btn2").click(function(){

$("[name='checkbox']").removeAttr("checked");//取消全选

})

$("#btn3").click(function(){

$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

})

$("#btn4").click(function(){

$("[name='checkbox']").each(function(){//反选

if($(this).attr("checked")){

$(this).removeAttr("checked");

}

else{

$(this).attr("checked",'true');

}

})

})

$("#btn5").click(function(){//输出选中的值

varstr="";

$("[name='checkbox'][checked]").each(function(){

str+=$(this).val()+"\r\n";

//alert($(this).val());

})

alert(str);

})

})

9、取得回调数据

$.post(

"item/itemCodeValidate.action",

{

Action:"post",

"code":$("#itemCode").val()

},

function(data,textStatu){

if(https://www.doczj.com/doc/9c1733996.html,=="exist"){

$("#itemCodeSpan").html("物料代码已经存在!");

$("#itemCode").val("");

}else{

$("#itemCodeSpan").html("");

}

},

"json"

);

相关主题
文本预览
相关文档 最新文档