jquery給標籤新增屬性_jQuery內容節點
阿新 • • 發佈：2021-01-31
技術標籤：jquery給標籤新增屬性
1.jQuery物件和DOM物件互換
在討論jQuery物件和DOM物件的相互轉換之前，先約定好定義變數的風格，以便方便開發者閱讀。
如果獲取的物件是jQuery物件，那麼最好在變數前面加上$，例如：
var $variable = jQuery物件;
如果獲取的是DOM物件，則定義如下：
var variable = DOM物件;
1.1 jQuery物件轉成DOM物件
jQuery物件不能直接使用DOM的方法，但如果對jQuery物件所提供的方法不熟悉，或者jQuery沒有封裝想要的方法，不得不使用DOM物件的時候，有一下兩種處理方法。
方法一：jQuery物件是一個數組物件，可以通過 [index] 的方法得到相應的DOM物件。
<body> <p>我是一個p標籤1</p> <p>我是一個p標籤2</p> <p>我是一個p標籤3</p> <script> var $text = $("p"); // jQuery物件 var text = $text[0]; // DOM物件 text.setAttribute("align", "center"); // 呼叫DOM物件方法 </script> </body>
方法二：另一種方法是jQuery本身提供的，通過get(index)方法得到相應的DOM物件。
<body> <p>我是一個p標籤1</p> <p>我是一個p標籤2</p> <p>我是一個p標籤3</p> <script> var $text = $("p"); // jQuery物件 var text = $text.get(0); // DOM物件 text.setAttribute("align", "center"); // 呼叫DOM物件方法 </script> </body>
1.2 DOM物件轉成jQuery物件
對於一個DOM物件，只需要用$()把DOM物件包裝起來，就可以獲得一個jQuery物件了。
<body>
<div id="box">我是一個box</div>
<script>
var box = document.getElementById("box"); // DOM物件
var $box = $(box); // jQuery物件
$box.css("color", "red"); // 呼叫jQuery方法
</script>
</body>
2. html方法
html() - 設定或返回所選元素的內容（包括 HTML 標記）。此方法類似於JavaScript中的innerHTML屬性，可以用來讀取或設定某個元素中的HTML內容。
<body>
<p id="txt"></p>
<div id="box"></div>
<button id="txt-btn">給p標籤新增文字內容</button>
<button id="box-btn">給div標籤新增標籤</button>
<script>
$("#txt-btn").click(function () {
// 給p標籤新增文字內容
$("#txt").html("我是一個p標籤");
// 獲取p標籤內容
console.log($("#txt").html());
});
$("#box-btn").click(function () {
// 給div標籤新增標籤
$("#box").html("<ul>
<li>我是第一個li標籤</li>
<li>我是第二個li標籤</li>
<li>我是第三個li標籤</li>
<li>我是第四個li標籤</li>
</ul>");
// 獲取div標籤內容
console.log($("#box").html());
});
</script>
</body>
3.text方法
text() - 設定或返回所選元素的文字內容。此方法類似於JavaScript中的innerText屬性，可以用來讀取或設定某個元素中的文字內容（JavaScript的innerText存在相容性問題，而jQuery的text()方法支援所有的瀏覽器）。
<body>
<p id="txt"></p>
<div id="box"></div>
<button id="txt-btn">給p標籤新增文字內容</button>
<button id="box-btn">給box標籤新增文字內容</button>
<script>
$("#txt-btn").click(function () {
// 給p標籤新增文字內容
$("#txt").text("我是一個p標籤");
// 獲取p標籤內容
console.log($("#txt").text());
});
$("#box-btn").click(function () {
// 給p標籤新增文字內容
$("#box").text("<p>我是一個p標籤</p>");
// 獲取p標籤內容
console.log($("#box").text());
})
</script>
</body>
4.val方法
val() - 設定或返回表單欄位的值。此方法類似於JavaScript中的value屬性，可以用來設定和獲取元素的值。無論元素是文字框，下拉列表還是單選框，它都可以返回元素的值。如果元素為多選，則返回一個包含所有選擇的值的陣列。
<body>
姓名：<input type="text">
<button id="text-btn">設定文字輸入框內容</button>
<script>
$("#text-btn").click(function () {
// 設定文字輸入框內容
$("input:text").val("我是一個p標籤");
// 獲取文字輸入框內容
console.log($("input:text").val());
});
</script>
</body>