<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.setColor {
color: red;
}
</style>
</head>
<body>
<button class="btn1">获取内容</button>
<button class="btn2">修改内容</button>
<hr>
<button class="btn3">添加类</button>
<button class="btn4">删除类</button>
<button class="btn5">切换类</button>
<hr>
<button class="btn6">判断是否存在某类</button>
<hr>
<button class="btn7">添加一个或多个属性</button>
<button class="btn8">获取属性</button>
<hr>
<div class="box">heslay</div>
<script src="./jquery-1.12.3/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
//获取内容
$('.btn1').click(function(){
//获取内容
console.log($('.box').html());
});
//修改内容
$('.btn2').click(function(){
$('.box').html('hello');
console.log($('.box').html());
//也可以渲染标签
$('.box').html('<h2>hello</h2>');
console.log($('.box').html());
});
//添加一个属性类
$('.btn3').click(function(){
$('.box').addClass('setColor');
});
//删除一个属性类
$('.btn4').click(function(){
$('.box').removeClass('setColor');
});
//切换属性类
$('.btn5').click(function(){
$('.box').toggleClass('setColor');
});
//判断属性类
$('.btn6').click(function(){
console.log($('.box').hasClass('setColor'));
});
//添加一个或多个属性值
$('.btn7').click(function(){
$('.box').attr('title','heslay');
//添加多个
$('.box').attr({
title: 'heslay',
ickt: 'hello'
});
});
//获取属性值
$('.btn8').click(function(){
console.log($('.box').attr('title'));
});
</script>
</body>
</html>
<jQuery-常用方法3>
最新推荐文章于 2023-05-01 22:57:01 发布