一，操作标签 1，操作 class 类 1.1，操作 class 类 addClass("c1")// 添加指定的CSS类名。removeClass("c1")// 移除指定的CSS类名。hasClass("c1")// 判断样式存不存在toggleClass("c1")// 切换CSS类名，如果有
一，操作标签
1，操作 class 类
1.1，操作 class 类
addClass("c1") // 添加指定的CSS类名。
removeClass("c1") // 移除指定的CSS类名。
hasClass("c1") // 判断样式存不存在
toggleClass("c1") // 切换CSS类名，如果有就移除，如果没有就添加。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>样式操作示例</title>
<style> .c1 { height: 200px; width: 200px; border-radius: 50%; background-color: red;
} .c2 { background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 找标签
$("div.c1").click(function () { // console.log(this); // this是DOM对象
$(this).toggleClass("c2"); // 有就删掉 没有就加上
}) </script>
</body>
</html>
样式操作示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义模态框示例</title>
<style> .cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 998;
} .modal { height: 400px; width: 600px; background-color: white; position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000;
} .hide { display: none;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送!</button>
<div class="cover hide"></div>
<div class="modal hide">
<form>
<p>
<label>用户名: <input type="text">
</label>
</p>
<p>
<label>密码: <input type="password">
</label>
</p>
<p>
<input type="submit" value="登录">
<input id="cancel" type="button" value="取消">
</p>
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 找到点击弹出模态框的按钮
$("#b1").click(function () { // 把.cover和.modal显示出来(去除掉.hide)
$(".cover").removeClass("hide"); // 显示背景
$(".modal").removeClass("hide"); // 显示模态框
}); // 找到取消按钮,绑定事件
$("#cancel").click(function () { // 给背景和模态框都加上hide类
$(".cover").addClass("hide"); $(".modal").addClass("hide"); }) </script>
</body>
</html>
自定义模态示例框
1.2，通过 CSS
css("color","red")//DOM操作：tag.style.color="red"
示例
$("p").css("color", "red"); //将所有p标签的字体设置为红色
2，位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
实例：
<1>
<2>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位置相关方法</title>
<style> * { margin: 0; padding: 0;
} .c1, .c2, .c3{ height: 100px; width: 100px; background-color: red;
} .c2 { position: relative; left: 200px; top: 200px; background-color: green;
} .c3 { position: absolute; left: 100px; top: 100px; background-color: blue;
}
</style>
</head>
<body>
<div class="c1">我是div</div>
<div class="c2">
<div class="c3">我是c3</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
位置相关
<3>
<!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> * { margin: 0;
} .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.2.1.min.js"></script>
<script> $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#b2").removeClass("hide"); }else { $("#b2").addClass("hide"); } }); $("#b2").click(function () { $(window).scrollTop(0); }) </script>
</body>
</html>
返回顶部
3，尺寸
height() //内容区域的高和宽
width()
innerHeight() //内容区域加padding(内边距)
innerWidth()
outerHeight() //内容区域+padding+border(边框)
outerWidth()
实例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>尺寸示例</title>
<style> .c1 { height: 100px; width: 200px; padding: 10px; margin: 20px; background-color: red; border: 5px solid green;
}
</style>
</head>
<body>
<div>
<div class="c1">div</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
测试代码
4，文本操作
4.1，HTML代码
html() // 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
4.2，文本值
text() // 取得所有匹配元素的文本内容
text(val) // 设置所有匹配元素的文本内容
4.3，值
val() // 取得第一个匹配元素的当前值
val(val) // 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
4.3.1，获取输入框中填写的内容：
4.3.2，获取符合条件的所有值
将获取到的所有符合条件的通过for循环在分贝 .var()
4.3.3，设置值 checkbox select 的值
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
设置
$("[name=‘hobby‘]").val([‘basketball‘, ‘football‘]);
$("#s1").val(["1", "2"])
4.3.4，自定义登录校验示例
<!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> .error { color: red;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="input-name">用户名</label>
<input type="text" id="input-name" name="name">
<span class="error"></span>
</div>
<div>
<label for="input-password">密码</label>
<input type="password" id="input-password" name="password">
<span class="error"></span>
</div>
<div>
<input type="button" id="btn" value="提交">
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script> $("#btn").click(function () { var username = $("#input-name").val(); var password = $("#input-password").val(); if (username.length === 0) { $("#input-name").siblings(".error").text("用户名不能为空"); } if (password.length === 0) { $("#input-password").siblings(".error").text("密码不能为空"); } }) </script>
</body>
</html>
自定义登录校验示例
5，属性操作
5.1，用于ID等或自定义属性：
.attr("attrName") // 返回第一个匹配元素的属性值
.attr("attrName", "attrValue")// 为所有匹配元素设置一个属性值
.attr({"k1": "v1", "k2":"v2"}) // 为所有匹配元素设置多个属性值
.removeAttr("attrName") // 从每一个匹配的元素中删除一个属性
// attrName 是标签属性名
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
</head>
<body>
<img src="http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg" alt="">
<input type="button" id="b1" value="下一个">
<input checked type="checkbox" id="c1">
<input type="checkbox" id="c2">
<script src="jquery-3.2.1.min.js"></script>
<script>
var oldURL; var newURL = "http://img01.yohoboys.com/contentimg/2017/08/12/21/012a1eab9842a752f8c4d98b8fc2777ad7.jpg" $("#b1").click(function () { var $imgEles = $("img"); // 修改img标签的src属性
oldURL = $imgEles.attr("src"); $imgEles.attr("src", newURL); newURL = oldURL; }); </script>
</body>
</html>
属性测试，5.1/5.2用
5.2，用于 checkbox 和 radio 的属性操作
.prop("属性") // 获取属性
.prop("属性", 布尔值)// 设置值
.removeProp("属性") // 移除属性
特别注意：
在1.x及2.x版本的 jQuery 中使用 attr 对 checkbox 进行赋值操作时会出bug，在3.x版本的 jQuery 中则没有这个问题。为了兼容性，我们在处理 checkbox 和 radio 的时候尽量使用特定的 prop()，不要使用 attr("checked", "checked")。
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value=‘1‘]").prop("checked", true);
$(":radio[value=‘2‘]").prop("checked", true);
</script>
5.3，prop和attr的区别：
attr 全称 attribute(属性)
prop 全称 property(属性)
虽然都是属性，但他们所指的属性并不相同，attr 所指的属性是 HTML 标签属性，而 prop 所指的是 DOM 对象属性，可以认为 attr 是显式的，而 prop 是隐式的。
举个例子
<input type="checkbox" id="i1" value="1">
针对上面的代码
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
如果换成下面的代码：
<input type="checkbox" checked id="i1" value="1">
再执行：
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
接下来再看一下针对自定义属性，attr和prop又有什么区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码：
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结一下：
-
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>作业需求分析</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小东北</td>
<td>二人转演员</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>乔小强</td>
<td>xx演员</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>韩涉</td>
<td>导演</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="反选">
<input type="button" id="b3" value="取消">
<script src="jquery-3.2.1.min.js"></script>
<script>
// 点击全选,表格中所有的checkbox都选中
// 1. 找checkbox
// 2. 全部选中 --> prop("checked", true);
// 点击取消
// 1. 找checkbox
// 2. 全部取消选中 --> prop("checked", false);
// 反选
// 1. 找到所有的checkbox
// 2. 判断
// 2.1 原来没选中的,要选中
// 2.2 原来选中的,要取消选中
</script>
</body>
</html>
任务实现全选，反选