010_jQuery获取和设置内容属性
1. jQuery DOM操作
1.1. jQuery擁有可操作html元素和屬性的強大方法。
1.2. jQuery提供一系列與DOM相關的方法, 這使訪問和操作元素和屬性變得很容易。
1.3. jQuery文檔操作方法:
2. text()方法
2.1. text()方法設置或返回匹配元素的文本內容(inner content)。
2.2. 返回文本內容
2.2.1. text()方法返回所有匹配元素的組合的文本內容(會刪除html標記)。
2.2.2. 語法
$(selector).text()2.3. 設置文本內容
2.3.1. text(newContent)方法設置一個值時, 它會覆蓋每一個匹配元素的所有內容。
2.3.2. 語法
$(selector).text(newContent)2.3.3. 參數
2.4. 使用函數設置文本內容
2.4.1. text(function(index, origText))方法使用函數, 可以設置所有匹配元素中指定坐標元素的所有內容。
2.4.2. 語法
$(selector).text(function(index, origText))2.4.3. 參數
3. html()方法
3.1. html()方法返回或設置匹配元素的內容(inner html)。
3.2. 返回元素內容
3.2.1. html()方法返回第一個匹配元素的所有內容。
3.2.2. 語法
$(selector).html()3.3. 設置元素內容
3.3.1. html(newHtml)方法設置一個值時, 它會覆蓋每一個匹配元素的所有內容。
3.3.2. 語法
$(selector).html(newHtml)3.3.3. 參數
3.4. 使用函數來設置元素內容
3.4.1. html(function(index,origHtml))方法使用函數, 可以設置所有匹配元素中指定坐標元素的所有內容。
3.4.2. 語法
$(selector).html(function(index,origHtml))3.4.3. 參數
4. val()方法
4.1. val()方法返回或設置匹配元素的值。
4.2. val()方法大多用于input元素, 值是通過value屬性設置的。
4.3. 返回value屬性
4.3.1. val()返回第一個匹配的input元素的value屬性的值。
4.3.2. 語法
$(selector).val()4.4. 設置value屬性的值
4.4.1. val(value)方法設置一個值, 會覆蓋每一個匹配的input元素的value屬性的值。
4.4.2. 語法
$(selector).val(value)4.4.3. 參數
4.5. 使用函數設置value屬性的值
4.5.1. val(function(index,origVal))方法使用函數, 可以設置所有匹配的input元素中指定坐標input元素的value屬性的值。
4.5.2. 語法
$(selector).val(function(index,origVal))4.5.3. 參數
5. attr()方法
5.1. attr()方法設置或返回匹配元素的屬性值。設置的時候, 如果屬性不存在, 就是添加。
5.2. 返回屬性值
5.2.1. ?attr(attribute)返回第一個匹配元素的屬性值。
5.2.2. 語法
$(selector).attr(attribute)5.2.3. 參數
5.3. 設置屬性/值
5.3.1. attr(attribute,value)方法設置一個值, 會覆蓋每一個匹配元素的屬性和值。
5.3.2. 語法
$(selector).attr(attribute,value)5.3.3. 參數
5.4. 使用函數來設置屬性/值
5.4.1. attr(attribute,function(index,origValue))方法使用函數, 可以設置所有匹配的元素中指定坐標元素的屬性和值。
5.4.2. 語法
$(selector).attr(attribute,function(index,origValue))5.4.3. 參數
5.5. 設置多個屬性/值對
5.5.1. attr({attribute:value, attribute:value ...})方法可以為每一個匹配元素設置一個以上的屬性和值。
5.5.2. 語法
$(selector).attr({attribute:value, attribute:value ...})5.5.3. 參數
6. removeAttr()方法
6.1. removeAttr()方法移除每一個匹配的元素的屬性。
6.2. 語法
$(selector).removeAttr(attribute)6.3. 參數
7. 獲取和設置內容屬性例子
7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>jQuery獲取和設置內容屬性</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){alert($("p").text());});$('#btn2').click(function(){alert($("p").html());});$('#btn3').click(function(){alert($("input").val());});$('#btn4').click(function(){alert($("input").attr("value"));});$('#btn5').click(function(){$("p").text("<big style='color: red;'><b>請填寫用戶信息, 牢記自己的用戶名和密碼</b></big>。");});$('#btn6').click(function(){$("p").html("<big style='color: red;'><b>請填寫用戶信息, 牢記自己的用戶名和密碼</b></big>。");});$('input').focus(function(){$('input').val("").attr("type", "password");});});</script></head><body><p>請填寫用戶信息, <big><b>牢記自己的用戶名和密碼</b></big>。</p><p>如果忘記密碼, <big><b>可以通過郵件找回</b></big>。</p><span>用戶名:</span><input type="text" name="userName" value="請輸入名字" /><br /><span>密碼:</span><input type="text" name="password" value="請輸入密碼" /><br /><br /><button id="btn1">顯示文本</button> <button id="btn2">顯示html</button> <button id="btn3">val()方法顯示input表單的輸入值</button><button id="btn4">attr("value")顯示input表單的輸入值</button> <br /><br /><button id="btn5">設置文本</button> <button id="btn6">設置html</button></body> </html>7.2. 運行效果圖
7.3. 點擊顯示文本按鈕
7.4. 點擊顯示html按鈕
7.5. 點擊val()方法顯示input表單的輸入值按鈕
7.6. 點擊attr("value")顯示input表單的輸入值按鈕
7.7. 點擊設置文本按鈕
7.8. 點擊設置html按鈕
7.9. 文本框獲取焦點
8. 使用函數設置內容屬性例子
8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>jQuery使用函數設置內容屬性</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("p").text(function(index, origText){if(index == 0) return "<big style='color: red;'><b>請填寫用戶信息, 牢記自己的用戶名和密碼</b></big>。";});});$('#btn2').click(function(){$("p").html(function(index, origHtml){return index == 0 ? "<big style='color: red;'><b>請填寫用戶信息, 牢記自己的用戶名和密碼</b></big>。" : origHtml;});});$('#btn3').click(function(){$("input").attr({"type": "password", "value": "123456"});});$('#btn4').click(function(){var objArr = $("input").removeAttr("value");for(let i = 0, l = objArr.length; i < l; i++){alert(objArr[i].name);}});$('input').focus(function(){$('input').val(function(index, origVal){return index == 0 ? "" : origVal;}).attr("type", function(index, origValue){return index == 0 ? "text" : "password";});});});</script></head><body><p>請填寫用戶信息, <big><b>牢記自己的用戶名和密碼</b></big>。</p><p>如果忘記密碼, <big><b>可以通過郵件找回</b></big>。</p><span>用戶名:</span><input type="text" name="userName" value="請輸入名字" /><br /><span>密碼:</span><input type="text" name="password" value="請輸入密碼" /><br /><br /><button id="btn1">設置文本</button> <button id="btn2">設置html</button> <button id="btn3">設置多個屬性</button> <button id="btn4">移除屬性</button></body> </html>8.2. 運行效果圖
8.3. 點擊設置文本按鈕
8.4. 點擊設置html按鈕
8.5. 點擊設置多個屬性按鈕
8.6. 點擊移除屬性按鈕
總結
以上是生活随笔為你收集整理的010_jQuery获取和设置内容属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 006_Ajax发送POST请求
- 下一篇： 011_添加元素