前端開發之jQuery屬性和文檔操做

時間 2020-05-29

標籤前端開發 jquery 屬性文檔欄目 JQuery 简体版

原文原文鏈接

主要內容：javascript

　　一、jQuery屬性操做css

　　二、jQuery文檔操做html

1、jQuery屬性操做java

　　一、什麼是jQuery的屬性操做？jquery

　　　　jQuery的屬性操做模塊包括四個部分：html屬性操做，dom屬性操做，類樣式操做和值操做。app

　　　（1）html 屬性操做　　　dom

對html文檔中的屬性進行讀取，設置和移除操做。例如：attr(),removeAttr().

　　　　(2) DOM屬性操做ide

對DOM元素的屬性進行讀取，設置和移除操做。例如：prop(),removeProp().

　　　　(3) 類樣式操做this

對DOM屬性className進行添加，移除操做。例如：addClass()，removeClass(),toggleClass().

　　　　(4) 值操做spa

對DOM屬性value進行讀取和設置操做。例如：html(),text(),val().

　　二、html屬性操做實例解析

　　　　所謂html屬性操做，更直白地說就是獲取頁面標籤,l例如：attr()、removeAttr()等。

　　　　實例一：attr() --- 設置屬性值或者被選中元素的屬性值　　　

$(document).ready(function(){ // attr() 設置一個屬性值的時，只是獲取值 var id = $("div").attr("id"); console.log(id); $("button").click(function(){ $("#box p").text($("#box").attr("id")); // attr()若是設置兩個值，表示設置屬性 // 一、設置一個值，好比設置div的class爲box2 $("#box").attr("class","box2"); // 二、設置多個值時，使用對象存儲，參數爲對象，鍵值對存儲（若是設置多個類名，不能使用attr()） $("#box").attr({"class":「cc」,name:"匆匆"}); }) })

　　　　完整代碼：　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的屬性操做</title> </head> <body> <div id="box" class="foo"> <p>hello，暮光微涼...</p> </div> <span>我是一個span標籤</span> <button class="btn">點我</button> <div id="box2"> <p>hello，everyone</p> <button id="btn2">Get</button> </div> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { //HTML屬性操做(即獲取頁面標籤) // attr()：設置屬性值或者被選元素的屬性值 // 獲取值：attr() 設置一個屬性值的時候，只是獲取值 var id = $('div').attr('id'); console.log(id); $('button').click(function () { $('#box p').text($('#box').attr('id')); }); // attr()若是設置兩個值，表示設置屬性 // 一、設置一個值，設置div的class爲box2 $('div').attr('class','box2'); // 二、設置多個值時，使用對象存儲，參數爲對象，鍵值對存儲；若是設置多個類名，不能使用attr() $('#box').attr({'class':'foo2',name:'匆匆'}); }) </script> </html>

View Code

　　　　實例二：removeAttr() --- 從匹配的元素中刪除一個屬性　　　　

$(document).ready(function(){ // 刪除一個屬性 $("#box").removeAttr("class"); // 同時刪除多個屬性時，中間以空格隔開 $("#box").removeAttr("class name"); // 查看是否刪除 console.log($("#box").attr("class")); // underfined })

　　　　完整代碼：　　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的屬性操做</title> </head> <body> <div id="box" class="foo"> <p>hello，暮光微涼...</p> </div> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#box').removeAttr('class'); $('#box').removeAttr('class name'); // 同時刪除 class和name console.log($('#box').attr('class')); // undefined  }) </script> </html>

View Code

　　三、DOM屬性操做

　　　　對DOM元素的屬性進行讀取，設置和移除操做。例如：prop()、removeProp()等。

　　　　實例一：porp() --- 獲取匹配的元素集中的第一個元素的屬性值，它是對當前匹配到的DOM對象設置屬性。　　　　

$(document).ready(function(){ // 獲取屬性值 console.log($("li").prop("class")); // one // 設置值 $("li:eq(0)").prop({"user":"cc","name2":"cc2"}); // li:eq(0)表示獲取到第一個li標籤 //$("li").first().prop({"user":"cc","name2":"cc2"}); // .first()做用同上 // 查看設置的屬性值 console.log($("li:eq(0)")) // console.log($('li').first()); // 同上 })

　　　　完整代碼：　　　　

<!DOCYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的屬性操做</title> </head> <body> <div id="box" class="foo"> <p>hello，暮光微涼...</p> </div> <ul> <li class="one">暮光微涼1號</li> <li class="two">暮光微涼2號</li> <li class="three">暮光微涼3號</li> <li class="four">暮光微涼4號</li> </ul> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { // DOM屬性操做 // prop()：獲取在匹配的元素集中的第一個元素的屬性值.它是對當前匹配到的dom對象設置屬性。 console.log($('li').prop('class')); // one //設置值 $('li:eq(0)').prop({'user':'cc','name2':'cc2'}); console.log($("li:eq(0)")); $('li').first().prop({'user':'cc','name2':'cc2'}); console.log($('li').first()); }) </script> </html>

View Code

　　　　實例二：removeProp() --- 刪除由.Prop() 方法設置的屬性值

$(document).ready(function(){ // removeProp() 刪除.prop()方法設置的屬性集 // 先查看一下 console.log($("li:eq(0)").prop("user")) ; // cc $("li:eq(0)").removeProp("user"); console.log($("li").first().prop("user")); // underfined })

　　　　完整代碼：　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的屬性操做</title> </head> <body> <div id="box" class="foo"> <p>hello，暮光微涼...</p> </div> <ul> <li class="one">暮光微涼1號</li> <li class="two">暮光微涼2號</li> <li class="three">暮光微涼3號</li> <li class="four">暮光微涼4號</li> </ul> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { // removeAttr():從每個匹配的元素中刪除一個屬性 $('#box').removeAttr('class'); $('#box').removeAttr('class name'); // 同時刪除 class和name </script> </html>

View Code

　　四、類樣式操做

　　　類樣式操做是對DOM屬性className進行添加，移除操做。例如：addClasss()、removeClass()、toggleClass()。

　　　實例：　　

 // 類樣式操做： // addClass() removeClass() $('span').addClass('span2 span3'); // 可同時添加多個或刪除多個類標籤 $('span').removeClass('span3'); var isBig = true; $('span').click(function(){ if(isBig){ $(this).addClass('active'); // 點擊放大 isBig = false; } else{ $(this).removeClass('active'); // 變回最初的樣式 isBig = true; } });

　　完整代碼：　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的屬性操做</title> <style type="text/css"> span.active{ font-size: 30px; } </style> </head> <body> <div id="box" class="foo"> <p>hello，暮光微涼...</p> </div> <ul> <li class="one">暮光微涼1號</li> <li class="two">暮光微涼2號</li> <li class="three">暮光微涼3號</li> <li class="four">暮光微涼4號</li> </ul> <span>我是一個span標籤</span> <button class="btn">點我</button> <div id="box2"> <p>hello，everyone</p> <a href="#">百度一下</a> <input type="text" value="嘿嘿哈" name=""/> <button id="btn2">Get</button> </div> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { // 類樣式操做： // addClass() removeClass() $('span').addClass('span2 span3'); // 可同時添加多個或刪除多個類標籤 $('span').removeClass('span3'); var isBig = true; $('span').click(function(){ if(isBig){ $(this).addClass('active'); // 點擊放大 isBig = false; } else{ $(this).removeClass('active'); // 變回最初的樣式 isBig = true; } }); }) </script> </html>

View Code

　　五、值屬性的操做

　　值屬性是對DOM屬性value進行讀取和設置操做。例如：text()、html()、val()。　

// 值屬性的操做 text() html() val() // text() 僅僅獲取文本 console.log($('#box2').text()); // hello，everyone // html() 獲取全部 console.log($('#box2').html()); // <p>hello，everyone</p> // 設置值 $('#box2').text('<a>百度一下</a>'); $('#box2').html('<a href="https://home.cnblogs.com/">暮光微涼</a>'); //獲取值 console.log($('input').val()); $('input').val('嘿嘿哈個毛線。。。'); $('#btn2').click(function(){ var val = $('input').val(); $('.box2').text(val); });

　　表單控件使用的一個方法，監聽Input的輸入：　

 $('input').change(function(){ console.log($(this).val()); });

　　完整代碼：　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的屬性操做</title> <style type="text/css"> span.active{ font-size: 30px; } </style> </head> <body> <div id="box" class="foo"> <p>hello，暮光微涼...</p> </div> <ul> <li class="one">暮光微涼1號</li> <li class="two">暮光微涼2號</li> <li class="three">暮光微涼3號</li> <li class="four">暮光微涼4號</li> </ul> <span>我是一個span標籤</span> <button class="btn">點我</button> <div id="box2"> <p>hello，everyone</p> <a href="#">百度一下</a> <input type="text" value="嘿嘿哈" name=""/> <button id="btn2">Get</button> </div> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { // 值屬性的操做 text() html() val() // text() 僅僅獲取文本 console.log($('#box2').text()); // hello，everyone // html() 獲取全部 console.log($('#box2').html()); // <p>hello，everyone</p> // 設置值 $('#box2').text('<a>百度一下</a>'); $('#box2').html('<a href="https://home.cnblogs.com/">暮光微涼</a>'); //獲取值 console.log($('input').val()); $('input').val('嘿嘿哈個毛線。。。'); $('#btn2').click(function(){ var val = $('input').val(); $('.box2').text(val); }); // 表單控件使用的一個方法,監聽input的輸入 $('input').change(function(){ console.log($(this).val()); }); }) </script> </html>

View Code

　　六、操做input的value值

　　　　HTML部分　

 <form action=""> <!--單選按鈕--> <input type="radio" name="sex" value="1"/>男 <input type="radio" name="sex" value="2" checked=""/>女 <!--默認選項--> <input type="radio" name="sex" value="3" />gay <hr> <!--多選框，設置checked表示默認--> <input type="checkbox" value="a" checked=""/>散步 <input type="checkbox" value="b" checked=""/>美食 <input type="checkbox" value="c" checked=""/>閱讀 <input type="checkbox" value="d" checked=""/>喝茶 <hr> <!--下拉框--> <select name="timespan" id="timespan" class="Wdate"> <option value="1">8:00--9:00</option> <option value="2">9:00--10:00</option> <option value="3">11:00--12:00</option> </select> <hr> <input type="text" name="" id="" value="666"/> <button>提交</button> </form>

　　　　jQuery部分

<script type="text/javascript"> $(document).ready(function () { console.log($(':radio')); console.log($(':checkbox')); // 一、獲取單選框中的value值 console.log($('input[type=radio]:checked').val()); // 2 // 二、對於複選框中的value值，僅僅獲取第一個值 console.log($('input[type=checkbox]:checked').val()); // a // 三、下拉列表被選中的值 var obj = $('#timespan option:selected'); console.log(obj.val()); // 1 // 設置單選的值 $('input[type=radio]').val(['1']); //將默認值改成1（初始時是2） $('input[type=checkbox]').val(['b','c']); // 將默認選中的值改成‘b’和'c'(初始時是'a','b','c') // 文本框 設置值和獲取值 $('input[type=text]').val(['在此輸入額！']); console.log($('input[type=text]').val()); }) </script>

2、jQuery文檔操做

　　　　HTML部分　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery文檔操做-插入節點</title> </head> <body> <a href="#">我是一個超連接</a> <a href="#">我是又一個超連接</a> <ul> </ul> <button>按鈕</button> <h2>我是一個二級標題</h2> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> // jQuery代碼部分 </script> </html>

　　jQuery代碼部分　　

　　一、插入操做　　　

$(document).ready(function(){ //------------ 方法一：append() ------------------------------ /* 父元素.append(子元素)，即在父元素下追加某新元素 */ // 插入節點方法1：append("字符串") $("ul").append("<li>我是一個新的li標籤</li>") // 插入節點方法2：先建立子元素，再將其添加到父元素上 var dom_li = document.createElement("li"); dom_li.innerHTML = "我是添加的第二個標籤"; $("ul").append(dom_li); // 插入節點方法3:經過jQuery元素添加（即移動當前頁面中已存在的元素到父元素下，則被移動元素將從原位置上消失，等同於移動操做） $("ul").append(a); // ------------- 方法二：appendTo() ---------------------------- // 子元素.appendTo(父元素)，即子元素主動添加到父元素上 $("<li>我是第三個li標籤</li>").appendTo($("ul").addClass("oli-3")); // ------------- 方法三：prepend() 前置添加，即添加到父元素的第一個位置---------------------------- $("ul").prepend("<li>我是最開始的li標籤</li>"); // prependTo() 後置添加，即將元素添加到父元素下第一個位置 $("<a>我是最開始的超連接</a>").prepend("ul"); // ------------- 方法四：父.after(子) 在匹配的元素以後插入內容，與之相對還有 ---> 子.insertAfter(父) ---------------- $("ul").after("<h4>我是一個四級標題</h4>"); $("<h5>我是一個5級標題</h5>").insertAfter("h4"); })

　　二、複製操做 --- clone()　　　

$("button").click(function(){ // clone() 括號內內容不寫時，默認克隆匹配的DOM元素而且選中這些克隆的副本(不包括事件) $(this) .clone().insertAfter($(this)); // clone(true) 元素以及全部的事件處理而且選中這些克隆的副本（即副本和本體同樣，無區別） $(this).clone(true).insertAfter($(this)); })

　　三、替換操做　　

// replaceWith() ---- 將全部匹配的元素替換成指定的HTML或DOM元素 $("h2").replaceWith($("<h5>我是一個5級標題</h5>")) // replaceAll() ---- 用指定的元素替換全部selector匹配到的元素 $("<button>替換</button>").replaceAll("a");

　　四、刪除操做

// remove() 刪除節點後，事件也會隨之刪除（即刪除了整個標籤） $("ul").remove(); // detach() 刪除節點後，事件會保留 var $btn = $("button").detach(); $("ul").append($btn); // 此時按鈕添加到了ul中  console.log($btn); // empty() 清空元素中全部後代節點 $("ul").empty();