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"
);