|
一、標(biāo)簽操作之樣式操作 樣式類 addClass(); // 添加指定的CSS類名。 removeClass(); // 移除指定的CSS類名。 hasClass(); // 判斷樣式存不存在 toggleClass(); // 切換CSS類名，如果有就移除，如果沒(méi)有就添加。 CSS css("color","red") //DOM操作：tag.style.color="red"
示例： $("p").css("color", "red"); //將所有p標(biāo)簽的字體設(shè)置為紅色
位置： offset() // 獲取匹配元素在當(dāng)前窗口的相對(duì)偏移或設(shè)置元素位置 position() // 獲取匹配元素相對(duì)父元素的偏移 scrollTop() // 獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移 scrollLeft() // 獲取匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移 例1
和 示例：  返回頂部示例尺寸： height() width() innerHeight() innerWidth() outerHeight() outerWidth()
二、標(biāo)簽操作之文本內(nèi)容操作 html html()是獲取選中標(biāo)簽元素中所有的內(nèi)容 html(val)設(shè)置值：設(shè)置該元素的所有內(nèi)容 會(huì)替換掉 標(biāo)簽中原來(lái)的內(nèi)容 $('ul').html('<a href="#">百度一下</a>') //可以使用函數(shù)來(lái)設(shè)置所有匹配元素的內(nèi)容 $('ul').html(function(){ return '哈哈哈' }) text text() 獲取所有匹配元素包含的文本內(nèi)容
text(val) 設(shè)置該所有匹配元素的文本內(nèi)容
注意：值為標(biāo)簽的時(shí)候 不會(huì)被渲染為標(biāo)簽元素 只會(huì)被當(dāng)做值渲染到瀏覽器中
val // 用途：val()用于操作input的value值 // 示范一： <input type="radio" name="sex" value="male"> <input type="radio" name="sex" value="female"> <input type="radio" name="sex" value="none"> $('input[type=radio]').val(['male',]) // 示范二： <input type="checkbox" name="hobbies" value="111"> <input type="checkbox" name="hobbies" value="222"> <input type="checkbox" name="hobbies" value="333"> $('input[type=checkbox]').val(['111','222']) 三、標(biāo)簽操作之屬性操作用于ID等或自定義屬性： attr(attrName) // 返回第一個(gè)匹配元素的屬性值 $('.box2 img').attr('title','美女') // 為所有匹配元素設(shè)置一個(gè)屬性值 attr({'title': '美女', 'alt':'圖片被狗吃了'}) // 為所有匹配元素設(shè)置多個(gè)屬性值 removeAttr('title') // 從每一個(gè)匹配的元素中刪除一個(gè)屬性 用于checkbox和radio prop('value') // 獲取value屬性的值
prop('checked',true); // 設(shè)置屬性
removeProp('value') // 移除value屬性
注意： 在1.x及2.x版本的jQuery中使用attr對(duì)checkbox進(jìn)行賦值操作時(shí)會(huì)出bug，在3.x版本的jQuery中則沒(méi)有這個(gè)問(wèn)題。為了兼容性，我們?cè)谔幚韈heckbox和radio的時(shí)候盡量使用特定的prop()，不要使用attr("checked", "checked")。 <h3>愛(ài)好</h3> <input type="checkbox" name="hobbies" value="basketball">籃球 <input type="checkbox" name="hobbies" value="football">足球 <input type="checkbox" name="hobbies" value="coding">編程 <h3>性別</h3> <input type="radio" name="sex" value="male"> <input type="radio" name="sex" value="female"> <input type="radio" name="sex" value="none"> <script> $(':checkbox[value=football]').prop('checked',true); $(':radio[value=male]').prop('checked',true); </script> 案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>菜單</h3>
<input type="button" value="全選" id="all">
<input type="button" value="反選" id="reverse">
<input type="button" value="取消" id="cancel">
<p>
蒸羊羔<input type="checkbox" name="menu">
</p>
<p>
蒸鹿茸<input type="checkbox" name="menu">
</p>
<p>
蒸熊掌<input type="checkbox" name="menu">
</p>
<p>
燒花鴨<input type="checkbox" name="menu">
</p>
<p>
燒雛雞<input type="checkbox" name="menu">
</p>
<p>
燒子鵝<input type="checkbox" name="menu">
</p>
<script src="jquery-3.3.1.min.js"></script>
<script>
$('#all').click(function () {
$('p input').prop('checked', true);
});
$('#reverse').click(function () {
$('p input').each(function () {
$(this).prop('checked', !$(this).prop('checked'));
})
});
$('#cancel').click(function () {
$('p input').prop('checked', false);
});
</script>
</body>
</html>
四、標(biāo)簽操作之文檔處理 //內(nèi)部 $(A).appendTo(B) // 把A追加到B內(nèi)部的最后面 $(A).prependTo(B) // 把A前置到B內(nèi)部的最前面 //外部 $(A).insertAfter(B) // 把A放到B外部的后面 $(A).insertBefore(B) // 把A放到B外部的前面 了解 //內(nèi)部 $(A).append(B) // 把B追加到A內(nèi)部的最后 $(A).prepend(B) // 把B前置到A內(nèi)部的最前面 //外部 $(A).after(B) // 把B放到A外部的后面 $(A).before(B) // 把B放到A外部的前面 移除和清空元素 $('.p1').remove() // 從DOM中刪除所有匹配的元素。====>把元素本身刪掉
$('.p1').empty() // 刪除匹配的元素集合中所有的子節(jié)點(diǎn)====》把元素的子元素都刪掉（包含文本內(nèi)容）
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.cover {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(150, 150, 150, 0.3);
}
.modal {
position: absolute;
width: 500px;
height: 300px;
left: 50%;
top: 200px;
margin-left: -250px;
background-color: white;
}
.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="新增" id="add">
<table border="1px" cellspacing="0px">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>18</td>
<td>
<input type="button" value="編輯" class="edit">
<input type="button" value="刪除" class="del">
</td>
</tr>
</tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
<label for="name">姓名</label><input type="text" id="name">
<label for="age">年齡</label><input type="text" id="age">
<input type="button" value="提交" id="submit">
<input type="button" value="取消" id="cancel">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 顯示模態(tài)框
function show() {
$('.cover').removeClass('hide');
$('.modal').removeClass('hide');
}
// 隱藏模態(tài)框
function hide() {
$('.cover').addClass('hide');
$('.modal').addClass('hide');
}
// 清除輸入框內(nèi)容
function clear() {
$('#name,#age').val('');
}
let current_obj='';
function bind() {
// 點(diǎn)擊編輯按鈕，修改全局變量submit_tag='edit',提交時(shí)則執(zhí)行編輯內(nèi)容的功能；
$('.edit').click(function () {
submit_tag = 'edit';
current_obj=this;
show();
let name=$(this).parent().siblings()[1].innerHTML;
let age=$(this).parent().siblings()[2].innerHTML;
$('#name').val(name);
$('#age').val(age);
});
$('.del').click(function () {
let tdList = $(this).parent().parent().nextAll();
for (let i = 0; i < tdList.length; i++) {
let num = $(tdList[i]).children()[0].innerHTML;
$(tdList[i]).children()[0].innerHTML = num - 1;
}
$(this).parent().parent().remove();
});
}
// 為現(xiàn)有的編輯和刪除按鈕綁定事件
bind();
let submit_tag = '';
// 點(diǎn)擊新增按鈕，修改全局變量submit_tag='add',提交時(shí)則執(zhí)行添加新內(nèi)容的功能；
$('#add').click(function () {
submit_tag = 'add';
show();
});
// 點(diǎn)擊提交按鈕，根據(jù)全局變量submit_tag的值，來(lái)執(zhí)行不同的功能；
$('#submit').click(function () {
if (submit_tag == 'add') {
//添加新內(nèi)容的功能
let tr = document.createElement('tr');
let td1 = document.createElement('td');
let td2 = document.createElement('td');
let td3 = document.createElement('td');
let td4 = document.createElement('td');
td1.innerHTML = $('tbody tr').length + 1;
td2.innerHTML = $('#name').val();
td3.innerHTML = $('#age').val();
td4.innerHTML = '<input type="button" value="編輯" class="edit">\n' + '<input type="button" value="刪除" class="del">';
$(td1).appendTo(tr);
$(td2).appendTo(tr);
$(td3).appendTo(tr);
$(td4).appendTo(tr);
$(tr).appendTo($('tbody'));
bind();
hide();
clear()
} else if (submit_tag == 'edit') {
//編輯已經(jīng)存在內(nèi)容的功能
let tdL=$(current_obj).parent().siblings();
tdL[1].innerHTML=$('#name').val();
tdL[2].innerHTML=$('#age').val();
hide();
clear();
}
});
$('#cancel').click(function () {
clear();
hide();
});
</script>
</body>
</html>
替換 replaceWith()
replaceAll()
克隆 clone() // clone方法不加參數(shù)true，克隆標(biāo)簽但不克隆標(biāo)簽帶的事件 // clone方法加參數(shù)true，克隆標(biāo)簽并且克隆標(biāo)簽帶的事件 案例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>克隆</title> <style> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">屠龍寶刀，點(diǎn)擊就送</button> <hr> <button id="b2">屠龍寶刀，點(diǎn)擊就送</button> <script src="jquery-3.3.1.min.js"></script> <script> // clone方法不加參數(shù)true，克隆標(biāo)簽但不克隆標(biāo)簽帶的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加參數(shù)true，克隆標(biāo)簽并且克隆標(biāo)簽帶的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html>
|
|
|
