jQuery的常⽤⽅法
DOM操作
增加：
⼀、append()，在被选中元素的结尾（仍然在内部），插⼊指定内容；
1. 可以⼀次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象。
2. 如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值。<body>
<div class="container">hello</div>
<p class="text">world</p>
</body>
<script>
$('ainer').append($('p.text'))
</script>
执⾏前：
image.png
执⾏后：
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>
$('ainer').prepend('<h1>hello</h1>')
</script>
执⾏前：
image.png
执⾏后：
image.png
三、.before()在被选元素之前插⼊内容，同级
<div class="container">
<p>1</p>
<p>2</p>
jquery在线库<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('ainer').before('<h1>hello</h1>')
</script>
after()在被选元素之前插⼊内容，同级
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('ainer').after('<h1>hello</h1>')
</script>
执⾏后：
image.png
删除：
⼀、.remove()删除被选元素（及其⼦元素）
<div class="container">
<p >1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('ainer').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>
执⾏后：
image.png
⼆、empty()从被选元素中删除⼦元素
设置：
⼀、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>
执⾏后：
image.png
⼆、.removeAttr() ⽅法从被选元素中移除属性。
<div class="box" id="show">haha</div>
<script>
$('div').removeAttr('id')
</script>
执⾏后：
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" >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" >hello</div>
<script>
$('.box').addClass('active size')
</script>
</body>
运⾏后：
image.png
.removeClass()从被选元素删除⼀个或多个类
三、hasClass()备选元素是否包含某个类，返回布尔值
<div class="box" >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" >hello</div>
<script>
$('.box').toggleClass('size');
</script>
执⾏后：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。