jQuery操作DOM元素案例
生活随笔
收集整理的這篇文章主要介紹了
jQuery操作DOM元素案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
直接打開注釋即可觀察效果，都已經測試通過！！！
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>操作DOM元素</title><script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//直接設置樣式//$("#div1").css("color","red");//同時設置多個屬性//$("#div1").css({"color":"red","background":"pink"});//addClass//$("#div1").addClass("div1_style");//removeClass//$("#div1").removeClass("div1_style");//內容操作，html方法，會解析標簽/*$("#div1").html("<span style='color:purple'>這是添加的紫色的東西</span>");*//*alert($("#div1").html());*///text方法，直接就輸出來了 // $("#div1").text("<span style='color:purple'>這是添加的紫色的東西</span>");/*alert($("#div1").text());*///獲取表單的值//$("#name").val();//給表單里面賦值//$("#name").val("1111");//節點遍歷//獲取節點并隱藏//$("div").hide();//創建節點：//var $newNode = $("<li>這是一個li</li>");//創建一個空的li節點//內部插入//向div里面插入創建的節點(內部的元素)//$("#div1").append($newNode);//把所選擇的元素追加到另一個元素里面//$("#div1").prepend($newNode);//將新元素插入到選擇的前面//$("#div1").prepend($newNode);//prependTo與prepend效果一樣，用法有差別//$($newNode).prependTo("#div1");//外部插入//after,將元素插入到選擇的后面(外面)//$("#div1").after($newNode);//insertAfter()與after的效果是一樣的，用法不一樣//$($newNode).insertAfter("#div1");//給選中元素的前面插入//$("#div1").before($newNode);//insertBefore，與before的效果一樣，但是用法不一樣//$($newNode).insertBefore("#div1");//刪除節點//$("li").remove();//刪除節點的第二種方法//$("li").empty();//替換節點replaceWith//$("li:eq(0)").replaceWith($newNode);//替換節點replaceAll//$($newNode).replaceAll("li:eq(1)");//復制節點//$("li:eq(1)").clone(true).appendTo("ul");//屬性操作//1.獲取屬性//alert($("#name").attr("type"));//2.設置屬性的值(設置表單不管用，設置圖片可以)//$("img").attr({width:"500",height:"100"});//刪除元素的屬性//$("img").removeAttr("width");})</script><style type="text/css">#div1{width: 200px;height: 200px;border: 1px solid black;}.div1_style{font-size: 50px;}</style></head><body><div id="div1">div1</div>用戶名：<input id="name" type="text" name="text" /><ul><li>第一個li</li><li>第二個li</li><li>第三個li</li><li>第四個li</li><li>第五個li</li></ul><img src="img/img1.jpg" width="300" height="500"/></body> </html>總結
以上是生活随笔為你收集整理的jQuery操作DOM元素案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Meta Quest 3 头显上市在即，
- 下一篇： 第6章循环结构（二）