DOM操作
增加：
一握础、append(),在被選中元素的結尾（仍然在內部）辐董，插入指定內容；
- 可以一次添加多個內容禀综，內容可以是DOM對象简烘、HTML string、 jQuery對象定枷。
- 如果參數是function孤澎，function可以返回DOM對象、HTML string欠窒、 jQuery對象覆旭，參數是集合中的元素位置與原來的html值。
<body>
<div class="container">hello</div>
<p class="text">world</p>
</body>
<script>
$('div.container').append($('p.text'))
</script>
執(zhí)行前：
image.png
執(zhí)行后：
image.png
- .appendTo(target)作用是把指定內容插入到目標元素尾部岖妄。
二型将、prepend()在被選元素的開頭插入內容
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('div.container').prepend('<h1>hello</h1>')
</script>
執(zhí)行前：
image.png
執(zhí)行后：
image.png
三、.before()在被選元素之前插入內容荐虐，同級
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('div.container').before('<h1>hello</h1>')
</script>
執(zhí)行后：
image.png
- after()在被選元素之前插入內容七兜，同級
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('div.container').after('<h1>hello</h1>')
</script>
執(zhí)行后：
image.png
刪除：
一、.remove()刪除被選元素（及其子元素）
<div class="container">
<p >1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('div.container').remove()
</script>
運行前：
image.png
運行后:
image.png
remove() 方法也可接受一個參數福扬，允許您對被刪元素進行過濾腕铸。
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<div class="box">hello</div>
<script>
$('div').remove('.box')
</script>
執(zhí)行后：
image.png
二、empty()從被選元素中刪除子元素
執(zhí)行后：
image.png
設置：
一铛碑、html() - 設置或返回所選元素的內容（包括 HTML 標記）
<div class="container">
</div>
<button id="btn">設置</button>
<script>
$('#btn').on('click',function(){
$('.container').html('<h1>hello</h1>')
})
</script>
運行前：
image.png
運行后
image.png
二狠裹、text() - 設置或返回所選元素的文本內容
<div class="container">
</div>
<button id="btn">設置文本</button>
<script>
$('#btn').on('click',function(){
$('.container').text('haha')
})
</script>
運行后：
image.png
三、val() - 設置或返回表單字段的值
<input type="text">
<script>
// $('input').val('name');
</script>
運行前：
image.png
運行后：
image.png
上面的三個 jQuery 方法：text()汽烦、html() 以及 val()涛菠，同樣擁有回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標碗暗，以及原始（舊的）值颈将。然后以函數新值返回您希望使用的字符串。
屬性操作：
一言疗、attr() 方法設置或返回被選元素的屬性值晴圾。
語法：
返回屬性的值：
$(selector).attr(attribute)
設置屬性和值：
$(selector).attr(attribute,value)
使用函數設置屬性和值：
$(selector).attr(attribute,function(index,currentvalue))
設置多個屬性和值：
$(selector).attr({attribute:value, attribute:value,...})
<div class="box">haha</div>
<script>
console.log($('.box').attr('class')) //box
$('.box').attr('id','show');
</script>
執(zhí)行后：
image.png
二、.removeAttr() 方法從被選元素中移除屬性噪奄。
<div class="box" id="show">haha</div>
<script>
$('div').removeAttr('id')
</script>
執(zhí)行后：
image.png
三死姚、prop() 方法設置或返回被選元素的屬性和值。對應的勤篮，如需移除屬性都毒，請使用 removeProp()方法
<input type="checkbox" id="test" abc="111">
<script>
console.log($('#test').attr('style')); //undefined
console.log($('#test').prop('style')); //CSSStyleDeclaration
$('#test').attr('abc','222'); //用attr給abc屬性設置值，會改變html結構
$('#test').prop('abc','333'); //用prop不會
console.log($('#test').attr('abc')); //222
console.log($('#test').prop('abc')); //333,如果不用prop設置333,這里獲取到的就是undefined
</script>
CSS相關：
一碰缔、css()設置或返回樣式屬性
<div class="box" style="border:1px solid">hello</div>
<script>
$('.box').css('width','300')
$('.box').css({
height:'100px',
backgroundColor:'pink',
color:'#000',
fontSize:'50px'
})
</script>
運行后：
image.png
二账劲、.addClass()向被選元素添加一個或多個類
<style>
.active{
font-size: 50px;
color:green;
}
.size {
width:200px;
height:300px;
margin-left:100px;
}
</style>
</head>
<body>
<div class="box" style="border:1px solid red">hello</div>
<script>
$('.box').addClass('active size')
</script>
</body>
運行后：
image.png
- .removeClass()從被選元素刪除一個或多個類
三、hasClass()備選元素是否包含某個類,返回布爾值
<div class="box" style="border:1px solid red">hello</div>
<script>
$('.box').addClass('active size')
console.log($('.box').hasClass('size')); //true
</script>
四金抡、.toggleClass()對被選元素進行添加/刪除類的切換操作
<style>
.active{
font-size: 50px;
color:green;
}
.size {
width:200px;
height:300px;
margin-left:100px;
}
</style>
</head>
<body>
<div class="box" style="border:1px solid red">hello</div>
<script>
$('.box').toggleClass('size');
</script>
執(zhí)行后：
image.png
再執(zhí)行一次
<script>
$('.box').toggleClass('size');
$('.box').toggleClass('size');
</script>
執(zhí)行后：
image.png
