jQuery屬性操作和快捷操作
阿新 • • 發佈：2019-01-22
1.屬性操作
<body>
<input type="text" class="apple" id="username" value="tom" address="beijing" />
</body>
<script type="text/javascript">
$("#username").attr("value");// 獲取屬性值
$("#username").attr("value", "jack");// 設定屬性值
$("#username").removeAttr("address" 2.快捷操作
2.1 class屬性值操作
<body>
<div class="apple orange" id="div_1">This is jquery subject.</div>
</body>
<script type="text/javascript">
$("#div_1").attr('class', 'banana');// 賦值
$("#div_1").attr('class');// 取值
$("#div_1").removeAttr('class' 2.2 標籤包含內容操作
<body>
<div>This is <p>jquery <span>subject</span></p></div>
<input type="button" value="獲取" onclick="getContent()" />
<input type="button" value="設定" onclick="setContent()" />
</body>
<script>
function getContent() {
// 獲取普通文字和html標籤
// 結果：This is <p>jquery <span>subject</span></p>
console.log($("div").html());
// 獲取普通文字內容
// 結果：This is jquery subject
console.log($("div").text());
}
function setContent() {
// 設定普通文字和html標籤，且html標籤可以被瀏覽器正常解析
// $("div").html("歡迎訪問<a href='http://www.baidu.com'>百度</a>");
// 設定普通文字，如果有html標籤，瀏覽器不能正常解析，顯示的是符號實體
$("div").text("歡迎訪問<a href='http://www.baidu.com'>百度</a>");
}
</script>html()和text()的區別：
獲取內容
html()可以獲取html標籤和普通字串內容
text()只能獲取普通字串內容設定內容
html()可以設定html標籤和普通字串內容
text()只能設定普通字串內容html()和text()如果針對的操作內容是純字串內容，則使用的效果一樣
2.3 css樣式操作
$(...).css(key, value);// 設定值
$(...).css(key);// 獲取值
$(...).css(json物件);// 一次設定多個css樣式2.4 value屬性快捷操作
$(...).val();// 獲取value屬性值
$(...).val(value);// 設定value屬性值val()方法在複選框、單選按鈕、下拉列表中都有突出表現
2.4.1 複選框
<body>
<h1>複選框操作</h1>
愛好:
<input type="checkbox" class="hby" name="hobby" value="2"/>籃球
<input type="checkbox" class="hby" name="hobby" value="4"/>足球
<input type="checkbox" class="hby" name="hobby" value="6"/>排球
<input type="checkbox" class="hby" name="hobby" value="8"/>乒乓球
<br><br>
<input type="button" value="獲取" onclick="getContent()" />
<input type="button" value="設定" onclick="setContent()" />
</body>
<script>
// 獲取複選框的選中情況
function getContent() {
var s = "";
for(var i = 0; i < $(".hby:checked").length; i++) {
s += $(".hby:checked:eq(" + i + ")").val() + ",";
}
// 刪除最後的逗號","
s = s.substr(0, s.length - 1);
console.log(s);
}
// 設定複選框的選中情況
function setContent() {
// 設定複選框的多個元素為選中狀態
$(".hby").val([2,4,8]);// 設定value為2、4、8為選中狀態
// 注意：val([value1,value2])引數是一個數組，即使只選中一個也是陣列！！！
// $(".hby").val([6]);// 設定value為6為選中狀態
}
</script>2.4.2 下拉列表操作
<body>
<h1>下拉列表操作</h1>
學歷:
<select multiple="multiple">
<option value="0">請選擇</option>
<option value="1">小學</option>
<option value="2">中學</option>
<option value="3">大學</option>
</select>
<br><br>
<input type="button" value="獲取" onclick="getContent()" />
<input type="button" value="設定" onclick="setContent()" />
</body>
<script>
function getContent() {
// 獲得選中情況
console.log($("option:selected").val());// 單選情況
console.log($("select").val());// 多選情況
}
function setContent() {
// 設定選中情況
$("select").val([1]);
// $("select").val([1,3]);
}
</script>2.4.3 單選按鈕操作
<body>
<h1>單選按鈕操作</h1>
性別:
<input type="radio" class="sx" name="sex" value="a" />男
<input type="radio" class="sx" name="sex" value="b" />女
<input type="radio" class="sx" name="sex" value="c" />保密
<br><br>
<input type="button" value="獲取" onclick="getContent()" />
<input type="button" value="設定" onclick="setContent()" />
</body>
<script>
function getContent() {
// 獲得選中情況
console.log($(".sx:checked").val());
}
function setContent() {
// 設定選中情況
$(".sx").val(["b"]);
}
</script>2.5 複選框全選、全不選、反選操作
$(...).attr('checked', true);// 設定複選框選中
$(...).attr('checked', false);// 取消複選框選中
$(...).attr('checked');// 判斷複選框選中情況，返回布林值<body>
<h1>複選框全選、全不選、反選操作</h1>
愛好:
<input type="checkbox" class="hby" name="hobby" value="2"/>籃球
<input type="checkbox" class="hby" name="hobby" value="4"/>足球
<input type="checkbox" class="hby" name="hobby" value="6"/>排球
<input type="checkbox" class="hby" name="hobby" value="8"/>乒乓球
<br><br>
<input type="button" value="全選" onclick="setAll()" />
<input type="button" value="全不選" onclick="setAllNot()" />
<input type="button" value="反選" onclick="setFan()" />
</body>
<script>
// 全選
function setAll() {
$(".hby").attr("checked", true);
}
// 全不選
function setAllNot() {
$(".hby").attr("checked", false);
}
// 反選
function setFan() {
for(var i = 0; i < $(".hby").length; i++) {
var flag = $(".hby:eq(" + i + ")").attr("checked");
$(".hby:eq(" + i +")").attr("checked", !flag);
}
}
</script>