JQ之小白计划三(DOM操作)

参考《锋利的jQuery》

初始化:

<body>

	<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
	<ul>
	  <li title='苹果'>苹果</li>
	  <li title='橘子'>橘子</li>
	  <li title='菠萝'>菠萝</li>
	</ul>

</body>

 

1:查找节点

 <script type="text/javascript">
  $(function(){
          var $para = $("p");			// 获取<p>节点
	  var $li = $("ul li:eq(1)");   // 获取第二个<li>元素节点

	  var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
	  var ul_txt =  $li.attr("title");	// 获取<ul>里的第二个<li>元素节点的属性title
	  var li_txt =  $li.text();	   // 输出第二个<li>元素节点的text
  });
</script>

2:创建节点

<script type="text/javascript">
  $(function(){
	 var $li_1 = $("<li title='香蕉'>香蕉</li>");	//创建一个<li>元素
		//包括元素节点,文本节点和属性节点
		//其中title='香蕉' 就是创建的属性节点
	 var $li_2 = $("<li title='雪梨'>雪梨</li>");	 //创建一个<li>元素
    	        //包括元素节点,文本节点和属性节点
		//其中title='雪梨' 就是创建的属性节点  
	 var $parent = $("ul");		// 获取<ul>节点。<li>的父节点

	 $parent.append($li_1);	    // 添加到<ul>节点中,使之能在网页中显示
	 $parent.append($li_2);	    // 等价于:$parent.append($li_1).append($li_2);
  });
 </script>

3:插入节点

 <script type="text/javascript">
  $(function(){
	var $li_1 = $("<li title='香蕉'>香蕉</li>");	//  创建第一个<li>元素
	var $li_2 = $("<li title='雪梨'>雪梨</li>");	//  创建第二个<li>元素
	var $li_3 = $("<li title='其它'>其它</li>");	//  创建第三个<li>元素


	var $parent = $("ul");		 // 获取<ul>节点,即<li>的父节点
	var $two_li = $("ul li:eq(1)"); //  获取<ul>节点中第二个<li>元素节点
   
	$parent.append($li_1);	   //  append方法将创建的第一个<li>元素添加到父元素的最后面
	$parent.prepend($li_2);	    	//  prepend方法将创建的第二个<li>元素添加到父元素里的最前面
	$li_3.insertAfter($two_li);   	//  insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

  })
  </script>

4:移动节点

 <script type="text/javascript">
  $(function(){
	var $one_li = $("ul li:eq(1)"); 	//  获取<ul>节点中第二个<li>元素节点
	var $two_li = $("ul li:eq(2)"); 	//  获取<ul>节点中第三个<li>元素节点
	$two_li.insertBefore($one_li);    //移动节点
  });
 </script>

5:删除节点

 <script type="text/javascript">
  $(function(){
	 $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后,将它从网页中删除。
  });
  </script>
 <script type="text/javascript">
  $(function(){
	 var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后,将它从网页中删除。
	 $li.appendTo("ul");						// 把刚才删除的又重新添加到<ul>元素里
	 //所以,删除只是从网页中删除,在jQuery对象中,这个元素还是存在的,我们可以重新获取它
  });
 </script>
 <script type="text/javascript">
  $(function(){
	  $("ul li").remove("li[title!=菠萝]");  //把<li>元素中属性title不等于"菠萝"的<li>元素删除 
  });
  </script>
 <script type="text/javascript">
  $(function(){
	  $("ul li").click(function(){
		alert( $(this).html() );
	  })
	  var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后,将它从网页中删除。
	  $li.appendTo("ul");	

  });
  </script>
<script type="text/javascript">
$(document).ready(function(){
  var x;
  $("#btn1").click(function(){
    x=$("p").detach();
  });
  $("#btn2").click(function(){
    $("body").prepend(x);
  });
});
</script>

//从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。
//与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

<body>
<p>这是一个段落。</p>
<button id="btn1">删除 p 元素</button>
<button id="btn2">恢复 p 元素</button>
</body>

 

 <script type="text/javascript">
  $(function(){
	 $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后,清空此元素里的内容
  });
  </script>

6: 复制节点

<script type="text/javascript">
  $(function(){
	 $("ul li").click(function(){
	     $(this).clone().appendTo("ul"); // 复制当前点击的节点,并将它追加到<ul>元素
	 })   
  });
  </script>

7:替换节点

 <script type="text/javascript">
  $(function(){
	 $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
	 // 同样的实现: $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
  });
  </script>

8:包裹节点

 <script type="text/javascript">
  $(function(){
	  $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来
  });
  </script>
 <script type="text/javascript">
  $(function(){
	  $("strong").wrapAll("<b></b>");
  });
  </script>

</head>
<body>
	<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
	<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
	<ul>
	  <li title='苹果'>苹果</li>
	  <li title='橘子'>橘子</li>
	  <li title='菠萝'>菠萝</li>
	</ul>

</body>
 <script type="text/javascript">
  $(function(){
	  $("strong").wrapInner("<b></b>");//<strong title="选择你最喜欢的水果." ><b>你最喜欢的水果是?</b></strong>
  });
  </script>

9: 属性操作

<script type="text/javascript">
  $(function(){
      //设置<p>元素的属性'title'
          $("input:eq(0)").click(function(){
			$("p").attr("title","选择你最喜欢的水果.");
	  });
      //获取<p>元素的属性'title'
	  $("input:eq(1)").click(function(){
			alert( $("p").attr("title") );
	  });
      //删除<p>元素的属性'title'
	  $("input:eq(2)").click(function(){
			$("p").removeAttr("title");
	  });   

  });
  </script>
</head>
<body>
    <input type="button" value="设置<p>元素的属性'title'"/>
	<input type="button" value="获取<p>元素的属性'title'"/>
	<input type="button" value="删除<p>元素的属性'title'"/>


	<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
	<ul>
	  <li title='苹果'>苹果</li>
	  <li title='橘子'>橘子</li>
	  <li title='菠萝'>菠萝</li>
	</ul>
</body>

10:样式操作

<script type="text/javascript">
  $(function(){
          //获取样式
          $("input:eq(0)").click(function(){
			alert( $("p").attr("class") );
	  });
          //设置样式
	  $("input:eq(1)").click(function(){
			$("p").attr("class","high");
	  });
          //追加样式
	  $("input:eq(2)").click(function(){
			$("p").addClass("another");
	  });    
	  //删除全部样式
	  $("input:eq(3)").click(function(){
			$("p").removeClass();
	  });  
	   //删除指定样式
	  $("input:eq(4)").click(function(){
			$("p").removeClass("high");
	  });   
	  //重复切换样式
	  $("input:eq(5)").click(function(){
			$("p").toggleClass("another");
	  });  
	  //判断元素是否含有某样式
	  $("input:eq(6)").click(function(){
			alert( $("p").hasClass("another") )
			alert( $("p").is(".another") )
	  });  
  });
  </script>
</head>
<body>
    <input type="button" value="输出class类"/>
	<input type="button" value="设置class类"/>
	<input type="button" value="追加class类"/>
	<input type="button" value="删除全部class类"/>
	<input type="button" value="删除指定class类"/>
	<input type="button" value="重复切换class类"/>
	<input type="button" value="判断元素是否含有某个class类"/>

	<p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
	<ul>
	  <li title='苹果'>苹果</li>
	  <li title='橘子'>橘子</li>
	  <li title='菠萝'>菠萝</li>
	</ul>
</body>

11:设置和获取HTML,文本和值

<script type="text/javascript">
  $(function(){
           //获取<p>元素的HTML代码
          $("input:eq(0)").click(function(){
			alert(  $("p").html() );
	  });
          //获取<p>元素的文本
	  $("input:eq(1)").click(function(){
			alert(  $("p").text() );
	  });
          //设置<p>元素的HTML代码
	  $("input:eq(2)").click(function(){
			 $("p").html("<strong>你最喜欢的水果是?</strong>");
	  });    
	   //设置<p>元素的文本
	  $("input:eq(3)").click(function(){
			 $("p").text("你最喜欢的水果是?");
	  });  
	  //设置<p>元素的文本
	  $("input:eq(4)").click(function(){
			 $("p").text("<strong>你最喜欢的水果是?</strong>");
	  });  
	  //获取按钮的value值
	  $("input:eq(5)").click(function(){
			 alert( $(this).val() );
	  });   
	  //设置按钮的value值
	  $("input:eq(6)").click(function(){
		        $(this).val("我被点击了!");
	  });  
  });
  </script>
<script type="text/javascript">
      $(function(){
          $("#address").focus(function(){         // 地址框获得鼠标焦点
			var txt_value =  $(this).val();   // 得到当前文本框的值
			if(txt_value=="请输入邮箱地址"){  
                        $(this).val("");              // 如果符合条件,则清空文本框内容
			} 
	  });
	  $("#address").blur(function(){		  // 地址框失去鼠标焦点
	  	        var txt_value =  $(this).val();   // 得到当前文本框的值
			if(txt_value==""){
                        $(this).val("请输入邮箱地址");// 如果符合条件,则设置内容
			} 
	  })

	  $("#password").focus(function(){
			var txt_value =  $(this).val();
			if(txt_value=="请输入邮箱密码"){
                        $(this).val("");
			} 
	  });
	  $("#password").blur(function(){
	  	        var txt_value =  $(this).val();
			if(txt_value==""){
                        $(this).val("请输入邮箱密码");
			} 
	  })
  });
  </script>
</head>
<body>
        <input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>
	<input type="text" id="password" value="请输入邮箱密码"/>  <br/><br/>
	<input type="button" value="登录"/>
</body>
<script type="text/javascript">
  $(function(){
          $("#address").focus(function(){         // 地址框获得鼠标焦点
			var txt_value =  $(this).val();   // 得到当前文本框的值
			if(txt_value==this.defaultValue){  //defaultValue 属性设置或返回文本框的初始内容。
                        $(this).val("");              // 如果符合条件,则清空文本框内容
			} 
	  });
	  $("#address").blur(function(){		  // 地址框失去鼠标焦点
	  	        var txt_value =  $(this).val();   // 得到当前文本框的值
			if(txt_value==""){
                        $(this).val(this.defaultValue);// 如果符合条件,则设置内容
			} 
	  })

	  $("#password").focus(function(){
			var txt_value =  $(this).val();
			if(txt_value==this.defaultValue){
                        $(this).val("");
			} 
	  });
	  $("#password").blur(function(){
	  	        var txt_value =  $(this).val();
			if(txt_value==""){
                        $(this).val(this.defaultValue);
			} 
	  })
  });
  </script>

</head>
<body>
        <input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>
	<input type="text" id="password" value="请输入邮箱密码"/>  <br/><br/>
	<input type="button" value="登录"/>
</body>
<script type="text/javascript">
  $(function(){
      //设置单选下拉框选中
          $("input:eq(0)").click(function(){
		        $("#single option").removeAttr("selected");  //移除属性selected
			$("#single option:eq(1)").attr("selected",true); //设置属性selected
	  });
      //设置多选下拉框选中
	  $("input:eq(1)").click(function(){
		        $("#multiple option").removeAttr("selected");  //移除属性selected
			$("#multiple option:eq(2)").attr("selected",true);//设置属性selected
			$("#multiple option:eq(3)").attr("selected",true);//设置属性selected
	  });
      //设置单选框和多选框选中
	  $("input:eq(2)").click(function(){
			$(":checkbox").removeAttr("checked"); //移除属性checked
			$(":radio").removeAttr("checked"); //移除属性checked
			$("[value=check2]:checkbox").attr("checked",true);//设置属性checked
			$("[value=check3]:checkbox").attr("checked",true);//设置属性checked
			$("[value=radio2]:radio").attr("checked",true);//设置属性checked
	  });   
  });
  </script>
</head>
<body>
        <input type="button" value="设置单选下拉框选中"/>
	<input type="button" value="设置多选下拉框选中"/>
	<input type="button" value="设置单选框和多选框选中"/>

<br/><br/>

<select id="single">
  <option>选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
</select>

<select id="multiple" multiple="multiple" style="height:120px;">
  <option selected="selected">选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
  <option>选择4号</option>
  <option selected="selected">选择5号</option>
</select>

<br/><br/>


<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4

<br/>

<input type="radio" value="radio1" name="a"/> 单选1
<input type="radio" value="radio2" name="a"/> 单选2
<input type="radio" value="radio3" name="a"/> 单选3
</body>

12: 遍历节点树

 <script type="text/javascript">
  $(function(){
         var $p1 = $("p").next();
	 //  next():用来获取下一个同辈元素。
	 var $ul = $("ul").prev();
        // prev():用来获取上一个同辈元素。
	 var $p2 = $("p").siblings();
        // siblings():用来获取所有的同辈元素。
  });
  </script>
<script type="text/javascript">
  $(function(){
          //parent是找当前元素的第一个父节点,不管匹不匹配都不继续往下找
          $("input:eq(0)").click(function(){
			resetStyle();
			$('.item-1').parent().css('background-color', 'red');
	  });
          //parents是找当前元素的所有父节点 
	  $("input:eq(1)").click(function(){
			resetStyle();
			$('.item-1').parents('ul').css('background-color', 'red');
	  });
          //closest是找当前元素的所有父节点 ,直到找到第一个匹配的父节点
          $("input:eq(2)").click(function(){
			resetStyle();
			$('.item-1').closest('ul').css('background-color', 'red');
	  });

	 //移除所有样式属性
	  function resetStyle(){
		  $("*").removeAttr("style");
	  }
  });
  </script>

13: CSS

<script type="text/javascript">
  $(function(){
          //获取<p>元素的color
          $("input:eq(0)").click(function(){
			alert(  $("p").css("color") );
	  });
          //设置<p>元素的color
	  $("input:eq(1)").click(function(){
			 $("p").css("color","red")
	  });
          //设置<p>元素的fontSize和backgroundColor
	  $("input:eq(2)").click(function(){
			 $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})
	  });    
	  //获取<p>元素的高度
	  $("input:eq(3)").click(function(){
			  alert( $("p").height() );
	  });  
	  //获取<p>元素的宽度
	  $("input:eq(4)").click(function(){
			  alert( $("p").width() );
	  });   

	    //获取<p>元素的高度
	  $("input:eq(5)").click(function(){
			  $("p").height("100px");
	  });  
	  //获取<p>元素的宽度
	  $("input:eq(6)").click(function(){
			  $("p").width("400px");
	  }); 
	  //获取<p>元素的的左边距和上边距
	  $("input:eq(7)").click(function(){
			  var offset = $("p").offset();
			  var left = offset.left;
			  var top =  offset.top;
		          alert("left:"+left+";top:"+top);
	  });  
  });
  </script>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值