189 8069 5689

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://cdxtjz.cn/article/jeegdp.html

    其他资讯