1 样式操作
样式属性操作 .css()
作用:设置或获取元素的样式属性值
1. 设置样式属性操作:
a.设置单个样式:
// 第一个参数表示:样式属性名称
// 第二个参数表示:样式属性值
$(selector).css(“color”, “red”);
b.设置多个样式:(也可以用来设置单个)
// 参数为 {}(对象)
$(selector).css({“color”: “red”, “font-size”: “30px”});
2. 获取样式属性操作:
// 参数表示要获取的 样式属性名称
$(selector).css(“font-size”);
此时,会返回”font-size”样式属性对应的值。
2 类操作
2.1添加类样式:
addClass(className) 为指定元素添加类className
$(selector).addClass(“liItem”);
注意:此处类名不带点,所有类操作的方法类名都不带点
2.2移除类样式(移除后样式没有):
removeClass(className) 为指定元素移除类 className
$(selector).removeClass(“liItem”);//移除指定类名(多个用,隔开进行添加)
$(selector).removeClass(); //不指定参数,表示移除被选中元素的所有类
2.3判断有没有类样式:
hasClass(calssName)判断指定元素是否包含类 className 返回值Boolean
$(selector).hasClass(“liItem”);
此时,会返回true或false
2.4切换类样式:
toggleClass(className)为指定元素切换类className,该元素有此类则移除,没有指定类则添加。
$(selector).toggleClass(“liItem”);
注意点:
操作类样式的时候,所有的类名,都不带点(.)
经验:
1 操作的样式非常少,那么可以通过.css()这个方法来操作
2 操作的样式很多,那么要通过使用类的方式来操作
3 如果考虑以后维护方便(把CSS从js中分离出来)的话,推荐使用类的方式来操作。类比CSS书写位置(把css从html中分离出来)
前面内容特色总结:简约、“粗暴”、干净利落、直截了当
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 200px;
background-color: pink;
line-height: 200px;
}
.color{
color: white;
}
.css{
background-color: hotpink;
}
</style>
</head>
<body>
<button onclick="change1()">操作style样式</button>
<button onclick="change2()">添加css类</button>
<button onclick="change3()">删除color类</button>
<button onclick="change4()">切换color类</button>
<button onclick="change5()">判断是否有类</button>
<div class="box color">
https://blog.csdn.net/muzidigbig/
</div>
</body>
<script src="jquery-3.3.1.js"></script>//1.引入jq库
<script>
// $(function () {//事件写在标签中 写入口函数会报错
function change1() {
$('div').css({"width":"400px","fontSize":"30px"})
}
function change2() {
$('.box').addClass('css')
}
function change3() {
$('div[class]').removeClass('color')
}
function change4() {
$('.box').toggleClass('color')
}
function change5() {
console.log($('div').hasClass('color'));
console.log($('div').hasClass('color1'));
}
// })
</script>
</html>
3 jq操作属性
3.1 操作元素的普通属性:attr(‘属性名’,’属性值’)
获取属性值:attr(‘属性名’)
<body>
<div class="box " style="width:200px;height: 200px;background-color: red;" οnclick="change()">
</div>
<img style="width: 300px;height: 200px;"src="../jquery/img/b.jpg" alt="">
</body>
<!--引入jQuery-->
<script src="jquery-3.3.1.js"></script>
<script>
//在此使用入口函数会报错
// $(function () {
// $('.box').click(function () {
//修改box盒子的背景色
// $('.box').css('backgroundColor','green')
// });
function change() {
//每次发生点击事件增加元素的宽高
var w = parseInt($('div').css('width'));
var h = parseInt($('div').css('height'));
$('div').css('width',w+20+"px");
$('div').css('height',w+20+"px");
$('.box').css('backgroundColor','green')
}
//发生点击事件改变图片
$('img').click(function () {
//indexOf('子字符串') 若存在返回出现的位置,若不存在返回-1
if($('img').attr('src').indexOf("a")>=0){
$('img').attr('src','../jquery/img/b.jpg')
}else {
$('img').attr('src','../jquery/img/a.jpg')
}
})
// })
</script>
3.2 操作节点的布尔属性(例如:selected、checked……只用写属性就能达到效果的)
prop()常用来判断添加或删除属性(相当于toggle())
<body>
<button>全选</button>
<button οnclick="bu()">全不选</button>
<p>选择1:<input type="checkbox"></p>
<p>选择2:<input type="checkbox"></p>
<p>选择3:<input type="checkbox"></p>
<p>选择4:<input type="checkbox"></p>
<p>选择5:<input type="checkbox"></p>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$('button:first-child').click(function () {
// $('input:checkbox').attr('checked','checked')
//prop()判断删除、添加该属性
$('input:checkbox').prop('checked',true);
});
function bu() {
$('input:checkbox').prop({'checked':false});
<body>
<button οnclick="fan2()">反选</button>
<p><input type="checkbox"></p>
<p><input type="checkbox"></p>
<p><input type="checkbox"></p>
<p><input type="checkbox"></p>
<p><input type="checkbox"></p>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//面向过程
function fan() {
var check= $('input');
console.log(check);
for(var i=0;i<check.length;i++){
if($(check[i]).prop('checked')){
$(check[i]).prop('checked',false);
}else{
$(check[i]).prop('checked',true);
}
}
}
//面向函数式思想,回调函数
//在回调函数中,this是谁?
//在循环过程中,循环哪个dom对象,回到函数中的this就指向哪个dom对象
function fan1() {
$('input:checkbox').each(function () {
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
}
function fan2() {
$("input:checkbox").each(function () {
this.checked= !this.checked;
})
}
</script>
3.3 删除属性:removeAttr()
删除节点:remove()(包含节点本身+子节点)
empty()(只移除子节点)
<body>
<button>删除方式一</button>
<button οnclick="del()">删除方式二</button>
<button οnclick="del3()">删除方式三(删除属性)</button>
<p>默认选中<input type="checkbox" checked></p>
<ul>
<li>muzidigbig</li>
<li>muzidigbig</li>
<li>muzidigbig</li>
<li>muzidigbig</li>
<li>muzidigbig</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$('button:first-child').click(function () {
$('ul').remove();
});
function del() {
$('ul').empty();
}
function del3() {
$('input').removeAttr('checked');
}
</script>
4.html文本
html()与text()区别:
html():不仅可以向页面中输入纯文本,也可以向页面中输入html标签
text():只能向页面中输入纯文本
函数中有参数为设置值,无参数为获得值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html文本/值</title>
<style>
.box{
width: 300px;
height: 200px;
background-color: pink;
line-height: 200px;
}
</style>
</head>
<body>
<button onclick="change1()">html()文本</button>
<button onclick="change2()">text()文本</button>
<button onclick="change3()">val()表单</button>
<button onclick="change4()">val()多选</button>
<div class="box color">
<span>https://blog.csdn.net/muzidigbig/</span>
</div>
<form action="#" method="post">
<p><label for="name">名字:</label><input type="text" id="name" name="username" placeholder="muzidigbig"></p>
<p><label for="password">密码:</label><input type="password" id="password"></p>
</form>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
function change1() {
//获取文本值html()无参数;连同对象中的标签一同获取
// var html = $('div').html();
// console.log(html);
//设置值;可以解析html标签
// $('div').html('<span style="color: green;">木子大大</span>');
// function(index, html)此函数返回一个HTML字符串。
// 接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。
$('div').html(function (n,html) {
return 'muzidigbig'+n+':原'+html;
})
}
function change2() {
//获取值;只能获取文本,不能获取标签
// var text = $('div').text();
// console.log(text);
//只能设置纯文本内容
$('div').text('<span style="color: green;">木子大大</span>');
}
function change3() {
//获取表单的输入值
// var val = $('input[type="text"]').val();
// console.log(val);
//设置值
$('input[type="text"]').val('木子大大');
}
function change4() {
//多选返回的是一个数组
var select = $('select').val();
console.log(select);
}
</script>
</html>
若有不足请多多指教!希望给您带来帮助!