1. 直接操作css属性
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
2，原生DOM修改css 和jQuery区别
上面一个是修改大小，下面一个是查看当前大小
3，补充 find和filter
4，位置
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
实例
返回顶部示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
.c1 {
width: 100px;
height: 200px;
background-color: red;
}
.c2 {
height: 50px;
width: 50px;
position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>
<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>返回顶部
复习 2. 位置相关
1. 相对定位 --> 相对自己原来的位置
2. 绝对定位 --> 相对已经定位过的父标签
3. 固定定位 --> 相对浏览器窗口
3. 尺寸
1. 盒子模型
内容-> 内填充 -> 边框 -> 外边距
尺寸：
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置checkbox、select的值
实例
自定义登录校验示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册示例</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form action="">
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username">
<span class="error"></span>
</p>
<p>
<label for="pwd">密码</label>
<input type="password" id="pwd" name="pwd">
<span class="error"></span>
</p>
<p>
<input type="submit" id="b1" value="登录">
</p>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function () {
var flag = true;
$(".error").text("");
var $username = $("#username");
var $pwd = $("#pwd");
// 取input框的值判断长度是否为0
if ($username.val().length === 0){
// 用户名没有输入, 提示
$username.next().text("用户名不能为空！");
flag = false;
}
if ($pwd.val().length === 0){
// 用户名没有输入, 提示
$pwd.next().text("密码不能为空！");
flag = false;
}
return flag; // 阻止后续事件的执行
})
</script>
</body>
</html>登录实例
用于ID等或自定义属性：
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这 个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用 attr("checked", "checked")。
示例：全选、反选、取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选取消练习</title>
</head>
<body>
<button id="b1">全选</button>
<button id="b2">取消</button>
<button id="b3">反选</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>喊麦</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>吹牛逼</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>不洗头</td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 全选
$("#b1").click(function () {
// 让所有的checkbox选中
$("table :checkbox").prop("checked", true)
});
// 取消
$("#b2").click(function () {
// 让所有的checkbox取消选中
$("table :checkbox").prop("checked", false)
});
// 反选
$("#b3").click(function () {
// // 找到没有选中的让它们选中
// $("table input:not(:checked)").prop("checked", true);
// // 找到所有选中的让它们取消选中
// $("table input:checked").prop("checked", false);
// 方法1：循环
var $checkboxs = $("table input:checkbox");
// for (let i=0;i<$checkboxs.length;i++){
// var $currentCheckbox = $($checkboxs[i]);
// if ($currentCheckbox.prop("checked")){
// // 如果之前是选中的
// $currentCheckbox.prop("checked", false);
// }else {
// // 之前没有选中
// $currentCheckbox.prop("checked", true);
// }
// }
for (let i=0;i<$checkboxs.length;i++){
var $currentCheckbox = $($checkboxs[i]);
var flag = $currentCheckbox.prop("checked");
$currentCheckbox.prop("checked", !flag)
}
});
</script>
</body>
</html>View Code
jQuery 里面没有创建标签的功能，我们只能用Dom，原css创建
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
例子：
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
替换
replaceWith()
replaceAll()
克隆
clone()// 参数
克隆实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>克隆</title>
<style>
.b1 {
height: 50px;
width: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<button class="b1">屠龙宝刀，点击就送</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(".b1").click(function () {
console.log(this);
// $(this).after($(this).clone());
$(this).clone(true).insertAfter(this);
})
</script>
</body>
</html>View Code
作业
// 点击新增按钮要做的事儿
// 1. 弹出模态框
// 点击提交按钮要做的事儿
// 1. 取值，取模态框中用户填写的值
// 2. 隐藏模态框
// 3. 创建tr标签， 追加td， 要拼接序号和用户填写的信息
// 4. 追加到table标签的最后
// 点击取消
// 1. 把模态框隐藏
// 2. 把之前填写的清空掉
// 删除按钮点击要做的事儿
// 1. 把当前点击按钮所在的行 删掉
// 更新序号...
更新中View Code
答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cove{
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.4);
position: fixed;
z-index: 9;
}
.modal{
position: absolute;
top: 50%;
left: 50%;
height: 300px;
width: 300px;
background-color: white;
z-index: 100;
margin-top: -150px;
margin-left: -150px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<input id="b1" type="button" value="提交">
<div class="main">
<table class="tb" border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>喊麦</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>2</td>
<td>lxx</td>
<td>唱歌</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>3</td>
<td>uu</td>
<td>跳舞</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
</table>
</div>
<div class="cove hide"></div>
<div class="modal hide">
<label>用户名<input type="text" name="username"></label>
<p>爱好<input type="text" name="hobby" ></p>
<p>
<button id="submit">确定</button>
<button id="cancel">取消</button>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
var $howEle=$("#b1");
var $subEle=$("#submit");
var $canEle=$("#cancel");
var $cove=$(".cove");
var $modal=$(".modal");
var $delete=$(".delete");
//提交
$howEle.click(function () {
$cove.removeClass("hide");
$modal.removeClass("hide");
});
//取消
$canEle.click(function () {
$cove.addClass("hide");
$modal.addClass("hide");
});
//确定
$subEle.click(function () {
$cove.addClass("hide");
$modal.addClass("hide");
$("table tr:last").clone(true).children().
first().text(parseInt($("table tr:last").clone(true).
children().first().text())+1).next().text($("input[name='username']").
val()).next().text($("input[name='hobby']").val()).
parent().insertAfter($("table tr:last"))
$name=$("input[name='username']").val();
$hobby=$("input[name='username']").val();
$trl=$("table tr:last").clone(true);
var $trc=$("table tr:last").clone(true);
var $tdc=$trc.children().first();
$tdc.text(parseInt($tdc.text()+1).next().text($name).next().text($hobby));
$trc.insertAfter($trl)
});
$delete.click(function () {
$(this).parent().parent().remove()
})
</script>
</body>
</html>