一，操作样式
1. 操作样式
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 { 100px; height: 200px; background-color: red; } .c2 { height: 50px; 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()
2， 文本操作
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>
3. 属性操作
用于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>
4. 文档处理
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; 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>
作业
// 点击新增按钮要做的事儿 // 1. 弹出模态框 // 点击提交按钮要做的事儿 // 1. 取值，取模态框中用户填写的值 // 2. 隐藏模态框 // 3. 创建tr标签， 追加td， 要拼接序号和用户填写的信息 // 4. 追加到table标签的最后 // 点击取消 // 1. 把模态框隐藏 // 2. 把之前填写的清空掉 // 删除按钮点击要做的事儿 // 1. 把当前点击按钮所在的行 删掉 // 更新序号... 更新中
答案
<!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; 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>