? JQuery中的DOM操作(1) - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


JQuery中的DOM操作(1)

2019-5-24 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容,每天自動發到您的郵箱中,

DOM樹

                                 

    在訪問頁面時,需要與頁面中的元素進行交互式的操作。在操作中,元素的訪問是最頻繁、最常用的,主要包括對元素屬性、內容、值CSS的操作。

一、操作元素的屬性

attr()   prop() 獲取或設置元素的屬性值

兩者區別:簡單來說,對于HTML元素本身就帶有的固有屬性,在處理時,使用prop方法。對于HTML元素我們自己自定義的DOM屬性,在處理時,使用attr方法。

針對屬性對象不同

prop( )是針對Dom元素屬性,attr( )針對HTML元素屬性,和attribute與property區別一樣。

用于設置的屬性值類型不同

attr()函數操作的是文檔節點的屬性,因此設置的屬性值只能是字符串類型,如果不是字符串類型,也會調用其toString()方法,將其轉為字符串類型。

prop()函數操作的是JS對象的屬性,因此設置的屬性值可以為包括數組和對象在內的任意類型。

應用版本不同

attr()是jQuery 1.0版本就有的函數,prop()是jQuery 1.6版本新增的函數。毫無疑問,在1.6之前,你只能使用attr()函數;1.6及以后版本,你可以根據實際需要選擇對應的函數。

其他不同

對于表單元素的checked、selected、disabled等屬性,Attr()方法拿不到值,請使用prop()函數來設置或獲取checked、selected、disabled等屬性。對于其它能夠用prop()實現的操作,也盡量使用prop()函數。如下圖代碼:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="button" id="btn1" value="按鈕">
<input type="button" id="btn2" value="按鈕">
<script>
    //操作元素的屬性
    //attr() prop()獲取或設置元素的屬性值
    $("#btn1").attr("value","按鈕1");//將#btn1的value值改為按鈕1
    $("#btn1").prop("value","按鈕2");//將#btn1的value值改為按鈕2
    console.log( $("input[type='button']").prop("value"));//獲取#btn1的value值,輸出為按鈕2
    console.log($("#btn2").attr("value"));//獲取#btn1的value值,輸出為按鈕
    //設置多個屬性值
    $("input[type='button']").prop({
        width:"200px",
        value:"hello"
    });//同時設置寬度為100px,value值為hello
    //根據輸出結果,width值設置失敗,value值設置成功
    console.log($("input[type='button']").prop("width"));//0
    console.log($("input[type='button']").attr("width"));//0
    $("input[type='button']").attr({
        width:"200px",
        value:"HELLO"
    })//同時設置寬度為200px,value值為HELLO
    //根據輸出結果可以看到,width和value均設置成功
    console.log($("input[type='button']").prop("width"));//0
    console.log($("input[type='button']").attr("width"));//200px
 
//    var btn=$("input[type='button']");
//    btn.attr("data-src","pink");
//    console.log(btn.attr("data-src"));//pink
//    console.log(btn.prop("data-src"));//undefined
    
    
    var btn=$("input[type='button']");
    btn.prop("data-src","pink");
    console.log(btn.attr("data-src"));//undefined
    console.log(btn.prop("data-src"));//pink
 
</script>
二、刪除元素的屬性

removeAttr( name ) ,其中name為元素屬性的名稱

removeProp( name ) ,其中name為元素屬性的名稱

 

三、元素內容的操作

在JQuery中,操作元素內容的方法包括html( )和text( )。前者與JavaScript中的innerHTML屬性類似,即獲取或設置元素的HTML內容;后者類似于JavaScript中的innerText屬性,即獲取或設置元素的文本內容。區別如下:

語法格式 參數說明 功能描述
html() 無參數 用于獲取元素的HTML內容
html(val) val參數為元素的HTML內容 用于設置元素的HTML內容
text() 無參數 用于獲取元素 的文本內容
text(val) val參數為元素的文本內容 用于設置元素的文本內容
<script>
    //js中的寫法 innerHTML  innerText
    var sd=document.getElementById("block");
    sd.innerText="小貓吃魚";
    console.log(sd.innerHTML);//小貓吃魚
    console.log(sd.innerText);//小貓吃魚
//    //jquery  html()  text() 和js一致  獲取或設置元素的html值或文本值
    console.log($("#block").html());//小貓吃魚
    console.log($("#block").text());//小貓吃魚
    $("#block").text("小貓抓老鼠");//修改innerText內容
    console.log($("#block").html());//小貓抓老鼠
    console.log($("#block").text());//小貓抓老鼠
    $("#block").html("小貓吃肉肉");//修改innerHTML內容
    console.log($("#block").html());//小貓吃肉肉
    console.log($("#block").text());//小貓吃肉肉
</script>
四、操作表單元素的值

val()   獲取或設置表單元素的value值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="text" id="txt" value="請輸入...">
<script>
    console.log( $("#txt").val());// 獲取#txt的value值  輸出為:請輸入...
    $("#txt").val("12345");//修改#txt的value值為12345
    console.log( $("#txt").val());//12345
</script>
</body>
</html>
五、元素樣式的操作

1.直接設置元素樣式值

在JQuery中,通過css()方法為某個指定的元素設置樣式值,語法格式如下:

css(name,value) ,其中name為樣式名稱,value為樣式的值

css()可以設置樣式也可以獲取樣式



2.增加CSS類別

通過addClass()方法增加元素類別的名稱,語法格式如下:

addClass(class) ,其中參數class為類名稱,可以同時增加多個,用空格隔開即可,如addClass(class0 class1 class2 ...)

3.刪除CSS類別

與addClass()方法相對應,removeClass()方法用于刪除類別,語法格式與addClass()相同,如果不設定參數,則刪除元素中的所有類名稱

4.類別切換

通過toggleClass()方法切換不同的元素類別,語法格式如下:

toggleClass(class) ,其中參數class為類別名稱,其功能是當元素中含有名稱為class的CSS類別時,刪除該類別,若沒有,則增加該類別

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn" class="btndata">按鈕</button>
<script>
    $("#btn").addClass("btn1");//追加一個類名稱
    $("#btn").addClass("btn2 btn3");//追加多個類名稱
    $("#btn").removeClass("btn2 btn1");//移除類名稱
    $("#btn").removeClass();//移除所有類名稱
    $("#btn").toggleClass("btn1");//類的切換 toggleClass()  如果有類名稱則替換  如果沒有就添加
</script>
</body>
</html>
六、jquery操作子父節點

children()  找父元素里面的子節點

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
    <li class="lilist">1</li>
    <li class="lidata">2</li>
    <span>6</span>
    <li class="lilist">3</li>
    <span>5</span>
    <li class="lilist">4</li>
    <span>7</span>
</ul>
<script>
        console.log($("ul").children());//輸出ul 下的所有子節點
        console.log($("ul").children()[0]);//輸出ul下索引為0的子節點
        console.log($("ul>li").first());//輸出ul里面第一個li
        console.log($("ul>li").last());//輸出ul里面最后一個li
        console.log($("ul>li").eq(2));//eq()  根據索引找元素
        console.log($("ul>li").first().siblings(".lilist"));//找同胞元素  輸出和first()相同類名稱的元素
        console.log($("ul>li").eq(1).prev());//找當前元素的前一個元素
        console.log($("ul>li").eq(2).prevAll("span"));//當前元素前面的所有指定元素
        console.log($("ul>li").eq(2).prevAll());//當前元素前面的所有元素
        console.log($("ul>li").eq(1).next());//找當前元素的下一個元素
        console.log($("ul>li").eq(1).nextAll("li"));//當前元素后面的所有指定元素
        console.log($("ul>li").eq(1).nextAll());//當前元素后面的所有元素
        console.log($("ul>li").eq(0).is(".qq"));//is() 判斷當前對象是誰  輸出true  or  false  當前元素與類名稱相符  輸出true
</script>
</body>
</html>
七、JQuery中的尺寸問題

下面以高度為例進行說明

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <style>
       .ss{
           width: 200px;
           height: 200px;
           margin: 10px 10px;
           padding: 20px 20px;
       }
    </style>
</head>
<body>
<div class="ss"></div>
<script>
        console.log($(".ss").height());//200  可視區域  不包括內外邊距 
        console.log($(".ss").innerHeight());//240  包括內邊距的距離  
        console.log($(".ss").outerHeight());//240  包括內邊距的距離
</script>
</body>
</html>
藍藍設計www.thriveonsite.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

標簽: JQuery中的DOM操作(1) « 根據輸入實時發送請求(防抖函數) | vue-router的兩種模式的區別»


藍藍 http://www.thriveonsite.com

訂閱Rss
浙江体彩6+1 网赚是不是骗子 有做网赚的吗 网赚大巴 2019半灰色网赚项目 千万时网赚平台是骗子吗 澳门最有名彩票网站 2019年挂机网赚 重庆百变王牌走势图 007网赚之家