目录
jQuery操作css-添加,删除,切换类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 270px;
height: 340px;
background: url("source/images/off.png");
-webkit-background-size: cover;
background-size: cover;
}
.selected {
background: url("source/images/on.png");
-webkit-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div></div>
<p></p>
<p></p>
<button id="on">开灯</button>
<button id="off">关灯</button>
<button id="auto">自动开关</button>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
$('#on').click(function() {
$('div').addClass('selected');
});
$('#off').click(function() {
$('div').removeClass('selected');
});
$('#auto').click(function() {
$('div').toggleClass('selected');
});
})
</script>
</body>
</html>
jQuery操作css属性
返回 CSS 属性
css("propertyname");
设置 CSS 属性
css("propertyname","value");
设置多个 CSS 属性
css({"propertyname":"value","propertyname":"value",...});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<p></p>
<p></p>
<button id="get_style">获取样式</button>
<button id="set_style">设置样式</button>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 0. 获取需要的标签
var $box = $('#box');
// 1. 获取样式
$('#get_style').click(function () {
var w = $box.css('width');
var h = $box.css('height');
var bg = $box.css('background-color');
console.log('宽度:' + w + 'px, 高度: ' + h + 'px, 背景颜色:' + bg);
});
// 2. 设置样式
$('#set_style').click(function () {
// 方式1
$box.css('width', '300px');
$box.css('height', '300px');
$box.css('background-color', 'yellow');
// 方式2
$box.css('width', '300px').css('height', '300px').css('background-color', 'purple');
// 方式3
$box.css({
'width': '400px',
'height': '400px',
'background-color': 'blue'
});
});
});
</script>
</body>
</html>
jQuery操作css-尺寸
括号里面传值表示设置属性值,不传值表示获取属性值
width() 设置或返回元素的宽度(不包括内边距、边框或外边距)
height() 设置或返回元素的高度(不包括内边距、边框或外边距)
innerWidth() 返回元素的宽度(包括内边距)
innerHeight() 返回元素的高度(包括内边距)
outerWidth() 返回元素的宽度(包括内边距和边框)
outerHeight() 返回元素的高度(包括内边距和边框)
outerWidth(true) 返回元素的宽度(包括内边距、边框和外边距)
outerHeight(true) 返回元素的高度(包括内边距、边框和外边距)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
background-color: yellow;
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid #000;
margin: 30px;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
var $box = $('#box');
console.log($box.width(300));
console.log($box.height(500));
console.log($box.innerWidth());
console.log($box.innerHeight());
console.log($box.outerWidth());
console.log($box.outerHeight());
console.log($box.outerWidth(true));
console.log($box.outerHeight(true));
});
</script>
</body>
</html>
jQuery操作html-获取&设置
获得内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
设置内容
text(参数) - 设置或返回所选元素的文本内容
html(参数) - 设置或返回所选元素的内容(包括 HTML 标记)
val(参数) - 设置或返回表单字段的值
回调函数
回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符 串。
text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
})
获取属性
attr()
设置属性
设置单个属性
attr(属性名, 值)
设置多个属性
attr({属性名1:值1, 属性名2:值2})
回调函数
回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
attr("href", function(i,origValue){
return origValue + "/jquery";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p id="content">内容</p>
<span>哈哈哈哈</span>
</div>
<input type="text" id="name" value="itLike">
<a href="http://www.itlike.com" target="_blank">撩课学院</a>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
// 1. 获取标签中的内容
getContent();
// 2. 设置标签中的内容
setContent();
// 3. 设置标签中属性的值
setAttribute();
});
function getContent() {
var $box = $('#box');
// 1. 获取内容
var text = $box.text();
console.log(text);
// 2. 获取标签和内容
var html = $box.html();
console.log(html);
// 3. 获取输入框的内容
var content = $('#name').val();
console.log(content);
// 4. 获取标签的属性值
var href = $('a').attr('target');
console.log(href);
}
function setContent() {
var $box = $('#box');
// $box.text('撩课学院');
// $box.html('<h1>喜欢IT!</h1>');
// $('#name').val('这是输入框');
$box.text(function(index, oldValue) {
return index + oldValue + ',哈哈哈哈';
})
}
function setAttribute() {
// $('a').attr('href', 'http://www.baidu.com');
$('a').attr({
'href': 'http://www.baidu.com',
'target': '_self'
})
}
</script>
</body>
</html>