juery学习总结(二)——juery操作页面元素

  所有的操作都可以分为增、删、改、查四种，juery选择器代表查看的功能，那么剩下的操作就是对页面元素增、删、改。页面元素有3部分构成：标签，属性和内容，juery对元素的操作可以从这3方面入手。

一、juery对标签的操作

• 新建元素

 1 //js创建元素
 2 var ele_div = document.createElement("<div>")
 3 //元素属性
 4 //ele_div.setAttribute("id","demo");
 5 var ele_attr = document.createAttribute("id")
 6 ele_attr.nodeValue="demo"
 7 ele_div.setAttributeNode(ele_attr);
 8 //元素内容
 9 //ele_div.innerHTML="hello world"
10 var ele_cont =document.createTextNode("hello world");
11 ele_div.appendChild(ele_cont);

1 //juery创建元素
2 var demo = $("<div/>")                   //HTML字符串是没有属性的元素时，内部使用document.createElement_x创建元素  与$("<div>")相同       
3 //var demo = $("<div id = 'demo' />");   //内部使用innerHTML创建元素
4 //元素属性
5 demo.prop("id","demo")                   //等同与attr()
6 //元素内容
7 demo.html("hello world")

• 删除元素

 1 //js删除元素  （removeChild()只能删除其下一级元素）
 2 //找到要刪除的元素
 3 var demo = $("ul li")[2]
 4 //找到其上級元素
 5 document.getElementsByTagName("ul")[0].removeChild(demo)
 6 //demo.parentNode.removeChild(demo)
 7 //body 刪除所有节点 好像只能body使用 并且无法使用选择器选择的body对象执行这个方法
 8 //document.body.removeNode()
 9 //无法删除
10 //document.body.removeChild(demo)

1 //juery删除元素
2 //删除元素
3 $("ul li:eq(0)").remove()
4 //删除被选元素的子元素
5 $("ul:eq(0)").empty();

二、juery对元素的操作

• 新增和删除属性

 1 //基本的操作在上面介绍过了
 2 var demo =  $("ul li:eq(0)")[0]
 3 
 4 //1、新增自定义属性
 5 demo.setAttribute("tkey","demo");
 6 //删除属性
 7 //demo.removeAttribute("tkey")
 8 //demo.attributes.removeNamedItem("tkey")  //两种方式效果相同
 9 $("ul>li[tkey]").html("hello world")
10 
11 //2、操作css类  用getAttribute()和setAttribute()方法 要考虑浏览器兼容问题
12 demo.className="class_1 class_3"
13 //$("ul>li[class=class_1]").next().html("hello world")
14 $("ul>li[class*=class_1]").next().html("hello world")
15 //根据js对字符串操作来重新为className赋值 js中暂时没找到对应的方法
16 //增加一个className
17 demo.className = demo.className+" "+"class_2";
18 //更换className
19 demo.className = demo.className.replace("class_2","class_3")
20 //删除一个className
21 demo.className = demo.className.replace("class_3"," ")
22 document.getElementsByClassName("class_3")[0].innerHTML="class_1"

 1 //juery 操作元素属性
 2 var ab={"id":"li_0","tkey":"demo"}
 3 var demo =  $("ul li:eq(0)")
 4 demo.html("hello world")
 5 //新增属性
 6 demo.attr(ab)
 7 //demo.attr("id","demo");
 8 //删除属性
 9 //demo.removeAttr("id")
10 
11 //1、操作css类
12 //新增class
13 demo.attr("class","class_1")
14 demo.addClass("class_2")
15 //删除class
16 demo.removeClass("class_4")
17 demo.removeClass()
18 //判断是否存在className
19 alert(demo.hasClass())  //开始未指定class和移除class时 为false
20 //含有判断的操作
21 demo.toggleClass("class_4") //存在就删除 不存在就增加
22 demo.toggleClass("class_4",false) //true 增加 false 删除 同addClass(name)和removeClass(name） 不同于removeClass()
23 //修改css样式
24 //demo.css("color:red")没有效果
25 //demo.css("color")= "red"
26 demo.css("color","red")
27 //没有找到juery 直接删除样式的例子，都是通过修改className来更换样式

三、juery对元素内容操作

元素内容为开始标签和结束标签之间的部分，里面可以只有文本也可以包含多个页面元素。

• 新增

 1 //js插入数据
 2 //准备操作对象
 3 var demo =  $("ul li:eq(0)").clone()
 4 demo.html("hello world")
 5 var dom_demo=demo[0]
 6 var dom_ul = $("ul:eq(0)")[0];
 7 //将node添加到childNodes的末尾
 8 dom_ul.appendChild(dom_demo)
 9 //在选择node后插入使用的是同一个对象的话 不会另外复制一份
10 dom_ul.insertBefore(dom_demo,document.getElementsByTagName("li")[1])
11 //没有这个方法
12 //dom_ul.insertAfter(dom_demo,document.getElementsByTagName("li")[1])

1 //juery
2 //使用上面的对象
3 //插入数据
4 $("<li>hello world</li>").appendTo('#d_ul')      //$(dom_ul)  dom_ul 效果一样  说明appendTo(dom)内的内容会使用$(dom)转换成juery对象 如果$(dom)不是一个juery对象无法执行
5 $(dom_ul).append("<li>hello world</li>");        //效果同上 只不过参数位置不同
6 $("ul>li:eq(3)").after("<li>hello world</li>")   //同insertAfter()  虽然资料上说insertAfter()接受的是juery对象 但是它会自动转换传入的对象
7 $("ul>li:eq(3)").before("<li>hello world</li>")  //同insertBefore() 同上

• 修改

1 1 //js 替换子元素
2 2 var dom_ul = $("ul:eq(0)")[0];                     //等同于 document.getElementByTagName("ul")[0]
3 3 var demo = $("<li>hello world</li>")[0]
4 4 dom_ul.replaceChild(demo,$("ul>li :eq(3)")[0])
5 5 document.replaceChild(demo,$("ul>li :eq(3)")[0])  //会替换掉ul中第4个元素

1 //juery替换子元素
2 var dom_ul = $("ul:eq(0)");                     //等同于 document.getElementByTagName("ul")[0]
3 var demo = $("<li>hello world</li>")
4 //demo.replaceWith(dom_ul.find("li:first-child"))  //写反了
5 //将选择的内容替换成（）中的内容  （）中的内容会 $()转换成juery对象 因此可以传入dom 字符串等可以解析成juery对象的参数
6 dom_ul.find("li:first-child").replaceWith(demo); 
7 //dom_ul.replaceAll(demo)   //又反了
8 //将选择的内容替换到括号内的选择器  传入参数类型同上        
9 demo.replaceAll(dom_ul)

 

 

参考资料：

 JS操作元素的属性和方法：http://weirhp.iteye.com/blog/963835

 jquery插入方法汇总：http://blog.sina.com.cn/s/blog_700e11ff0101b2y2.html