JQuery学习笔记-JQuery的DOM操作

DOM（Document Object Model 文档对象模型）：一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组建

阜南网站建设公司创新互联,阜南网站设计制作，有大型网站制作公司丰富经验。已为阜南成百上千提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的阜南做网站的公司定做！

DOM操作的分类

-DOM Core : DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用。它的用途并非仅限于处理网页，也可以用来处理任何一种是用标记语言编写出来的文档，如XML

-HTML DOM：使用JavaScript和DOM为HTML文档编写脚本时，有许多专属于HTML-DOM的属性

-CSS-DOM：针对于CSS操作，在JavaScript中，CSS-DOM主要用于获取和设置style对象的各种属性

参考 http://shamrock.blog.51cto.com/2079212/1564560

http://shamrock.blog.51cto.com/2079212/1564688

查找节点





Untitled Document


	//测试JQuery操作文本节点 属性节点
	$(function() {
		//操作文本节点，通过JQuery对象的text()方法
		alert($("#bj").text());
		$("#bj").text("北京天安门");
		
		//操作属性节点 通过JQuery对象的attr()方法
		alert($(":text[name='username']").attr("value"));
		$(":text[name='username']").attr("value", "syd");
	});



	你喜欢哪个城市？
    
        北京
        上海
        深圳
        深圳2
    
    你喜欢哪本书？
    
        西游记
        三国演义
        水浒传
        水浒传2
    
    

    gender:
    Male
    Female

创建节点并且添加到指定的位置





Untitled Document


	//测试JQuery创建节点并且插入节点到指定位置
	$(function() {
		//创建一个p节点,并添加到city下
		//$("尚硅谷").appendTo("#city");
		//$("#city").append("【尚硅谷】");
		//alert($("#atguigu").text());
		
		//接到第一个节点的 前面
		$("尚硅谷1").prependTo($("#city"));
		//$("#city").prepend("【尚硅谷】");
		
		//插入到指定位置的后面
		//$("尚硅谷2").insertAfter($("#bj"));
		$("#bj").after($("尚硅谷2"));
		
		//插入到指定位置的前面
		//$("尚硅谷3").insertBefore($("#bj"));
		$("#bj").before($("尚硅谷4"));
	});



	你喜欢哪个城市？
    
        北京
        上海
        深圳
        深圳2
    
    你喜欢哪本书？
    
        西游记
        三国演义
        水浒传
        水浒传2
    
    

    gender:
    Male
    Female

克隆节点





Document


	//复制节点
	$(function() {
		$("li").click(function(){
			alert($(this).text());
		});
		//克隆节点，重新设置id属性。true表示克隆节点的同时克隆节点的事件
		$("#bj").attr("id", "bj2").clone(true).insertAfter($("#xyj"));
	})



	你喜欢哪个城市？
	
		北京
		上海
		武汉
		深圳
	
	你喜欢哪本书？
	
		西游记
		三国演义
		水浒传
	

	
	
		城市 BOOK

克隆和替换





Document


	//替换节点
	$(function() {
		//创建一个节点，替换#city最后的一个子节点
		$("wuhan").replaceAll($("#city li:last"));
		
		//创建一个节点，替换#city的第二个li子节点
		$("#city li:eq(1)").replaceWith($("yichang"));
		
		//replaceAll  replaceWith 替换的时候会移动节点
		
		//互换#xyj和#bj.需要先克隆节点。
		var $bj2 = $("#bj").clone(true);
		var $xyj = $("#xyj").replaceWith($bj2);//返回被替换的节点。
		$("#bj").replaceWith($xyj);
	})



	你喜欢哪个城市？
	
		北京
		上海
		武汉
		深圳
	
	你喜欢哪本书？
	
		西游记
		三国演义
		水浒传
	

	
	
		城市 BOOK

包裹节点





Document


	//测试JQuery的wrap wrapAll wrapInner
	$(function() {
		//包装li本身
		//$("li").wrap("");
		
		//包装所有的li。将所有匹配元素进行单独包裹。
		$("#city li").wrapAll("");
		
		//包装li里面的文字
		$("#language li").wrapInner("");;
	})



	你喜欢哪个城市？
	
		北京
		上海
		武汉
		深圳
	
	你喜欢哪本书？
	
		西游记
		三国演义
		水浒传
	
	你喜欢哪种语言？
	
		c
		Java
		PHP
	

	
	
		城市 BOOK

网站标题：JQuery学习笔记-JQuery的DOM操作
地址分享：http://ybzwz.com/article/jeegdp.html

JQuery学习笔记-JQuery的DOM操作

其他资讯