python之路_前端基础之jQuery入门2
一、样式操作
1、css样式
<body>
<div class="c1">111</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
//css赋值操作
$(".c1").css("color","red");
$(".c1").css("border","10px solid green");
$(".c1").css({"font-size":"36px","background-color":"blue"});
//获取css值
console.log($(".c1").css("color"))
</script>
</body>
2、样式类
总共包含如下四种方式控制标签样式：
addClass() ---添加指定的CSS类名
removeClass() ---移除指定的CSS类名
hasClass() --- 判断样式存不存在
toggleClass() ---切换CSS类名，如果有就移除，如果没有就添加
模拟开关灯实例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background: yellow;
}
</style>
</head>
<body>
<button class="c1">开关按钮</button>
<div class="c2" style="width: 100px;height: 100px;border-radius: 50%"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".c1").on("click",function () {
$(".c2").toggleClass("c3") //如果 $(".c2")的class样式类中有c3样式，则删除此样式，若没有添加此样式
})
</script>
</body>
3、位置操作
offset()和position()：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
background-color: #396bb3;
position: relative;
top: 100px;
left: 100px;
}
.c2{
width: 100px;
height: 100px;
background-color: #cccccc;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
//获取位置参数
var $a=$(".c2").offset(); // 获取匹配元素在当前视口的相对偏移
console.log($a); //{top: 158, left: 158}
var $b=$(".c2").position(); // 获取匹配元素相对已定位父元素的偏移
console.log($b) //{top: 50, left: 50}
//设置位置参数
$(".c2").offset({"top":1000,"left":1000}); //数字不需要加引号和px
</script>
</body>
scrollTop() ：获取匹配元素相对滚动条顶部的偏移；$(window).scroll() ： 滚动触发，具体应用见如下返回顶部的实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100%;
height: 2000px;
background-color: #cccccc;
}
.hide{
display: none;
}
.c2{
position: fixed;
bottom: 10px;
right: 10px;
background-color: #e59373;
}
</style>
</head>
<body>
<div class="c1"></div>
<button class="c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(window).scroll(function () { //$(window).scroll() --> 滚动触发
if($(window).scrollTop()>100){ //scrollTop() --> 获取窗口滚动距离
$(".c2").removeClass("hide")
}
else {
$(".c2").addClass("hide")
}
});
$(".c2").on("click",function () {
$(window).scrollTop(0) //scrollTop(0) --> 设置窗口滚动距离为0
4、尺寸操作
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 50px;
height: 50px;
padding: 20px;
border: 10px solid coral;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="c1"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
//内容区本体设置的宽度
console.log( $(".c1").width()); //50
console.log( $(".c1").height()); //50
//内容区本体设置的宽度+padding的区域宽度
console.log( $(".c1").innerWidth()); //90
console.log( $(".c1").innerHeight()); //90
//内容区本体设置的宽度+padding的区域宽度+border宽度
console.log( $(".c1").outerWidth()); //110
console.log( $(".c1").outerHeight()); //110
</script>
</body>
二、文本操作
1、html()与text()
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1"><div>111</div></div>
<div class="c1">222</div>
<div class="c2">333<div>444</div></div>
<div class="c2">555</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
//html
$(".c1").html(); //取值---得标签下所有内容：<div>111</div>，若有多个class=c1标签，则取第一个
$(".c1").html("<span>aaa</span>"); //赋值--将标签下所有内容都清空，标签有效，若有多个同样标签，均会重新被赋值
//text
$(".c2").text(); //取值---取得标签下的纯文本内容，即使有多个也会都取出来：333444555
$(".c2").text("<span>aaa</span>") //赋值---将标签下的所有内容都清空，标签无效，作为文本显示，若有多个同样标签，均会重新被赋值
</script>
</body>
2、val()文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" class="c1" value="world">
<input type="checkbox" name="checkboxname" value="v1"/> check1
<input type="checkbox" name="checkboxname" value="v2"/> check2
<div>
<input type="radio" name="r" value="r1"/> radio1
<input type="radio" name="r" value="r2"/> radio2
<input type="radio" name="r" value="r3"/> radio3
</div>
<select name="" id="d1">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<select name="" id="d2" multiple="multiple">
<option value="4">option4</option>
<option value="5">option5</option>
<option value="6">option6</option>
</select>
<script src="jquery-3.2.1.min.js"></script>
<script>
//input--text
$(".c1").val(); //获取输入框内的值
$(".c1").val("hell0"); //给输入框重新赋值
//input--checkbox
$(":checkbox").val(); //只会显示第一个对应的value值v1
$(":checkbox:checked").val(); //若有多个被选中，则只会显示第一个对应的value
//非数组形式--修改value值
$(":checkbox").val("k1"); //将全部标签的value改为k1
$(":checkbox").val("k1","k2"); //按照第一个值，将全部标签的value改为k1
$(":checkbox:checked").val("k1"); //将选中的标签对应value改为k1
//数组形式--勾选选项
$(":checkbox").val(["v1","v2"]); //通过选项value值选勾选应的选项，value值以数组的形式写,即使选一个也必须为数组形式
//input--ratio
$(":radio").val(); //只会显示第一个对应的value值r1
$(":radio:checked").val(); //显示被选中项对应的value值
//非数组形式--修改value值
$(":radio").val("k1"); //把所有的对应的单选框的值改为k1
$(":radio:checked").val("k1"); //把选中的对应的单选框的值改为k1
//数组形式--勾选选项
$(":radio").val(["r1"]); //通过选项value值选勾选应的选项，value值以数组的形式写
//select单选
$("#d1").val(); //获取被选中的选项对应value值
$("#d1").val("2"); //通过选项value值选取对应的选项，结果option2被选中
//select多选
$("#d2").val(); //获取被选中项对应的value值，结果以数组形式显示，即使只选中一个
$("#d2").val(["4","5"]); //通过选项value值选取对应的选项，value值以数组的形式写
$("#d2").val("5") //如果是选一个可以不用数组的形式
</script>
</body>
</html>
三、属性操作
attr()与prop():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" k1="v1"></div>
<input type="checkbox">
<input type="radio">
<script src="jquery-3.2.1.min.js"></script>
<script>
//attr
console.log($(".c1").attr("k1")); //查询属性值：v1
$(".c1").attr("k2","v2"); //设置单个属性
$(".c1").attr({"k3":"v3","k4":"v4"}); //设置多个属性
$(".c1").removeAttr("k4"); //删除属性
//prop:适用于checkbox和radio;返回值是true或false
//查询属性值：
$(":checkbox").prop("checked"); //如果勾选了此，返回true,否则返回false
$(":radio").prop("checked"); //如果勾选了此，返回true,否则返回false
//设置属性值：
$(":checkbox").prop("checked",true); //设置为勾选了此框
$(":checkbox").prop("checked",false); //设置为不勾选了此框
</script>
</body>
</html>
四、应用实例
下述为全选、反选、取消应用实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" cellspacing="10" cellpadding="5">
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td><input type="checkbox" class="input" value="c1"></td>
<td>egon</td>
<td>73</td>
<td>吃鸡</td>
</tr>
<tr>
<td><input type="checkbox" class="input" value="c2"></td>
<td>alex</td>
<td>84</td>
<td>吹逼</td>
</tr>
<tr>
<td><input type="checkbox" class="input" value="c3"></td>
<td>wusir</td>
<td>26</td>
<td>装死</td>
</tr>
</table>
<button class="selectall">全选</button>
<button class="cancel">取消</button>
<button class="reverse">反选</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".selectall").on("click",function () {
$(":checkbox").prop("checked",true)
});
$(".cancel").on("click",function () {
$(":checkbox").prop("checked",false)
});
$(".reverse").on("click",function () {
$(":checkbox").each(function (){
if($(this).prop("checked")){
$(this).prop("checked",false)
}
else{
$(this).prop("checked",true)
}
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号