10、jQuery初识
jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来，jQuery出现的目的是为了优化代码，提高码代码的效率它将很多功能封装。
本篇导航：
1、何为jquery
1 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 2 jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! 3 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 4 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。 5 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
2、优势
短小、精悍，写起来简单，省事儿，开发效率高
3、js与jquery关系
jQuery就是JS写的
JS是基础，jQuery是工具
4、jQuery介绍
1）版本
1.x 兼容IE8。。。
3.x 最新
2）.min.js 压缩的 生产环境用
3）.js 没有压缩的 开发用
5、下载即使用
1）下载：https://jquery.com/
2）导入jquery： <script src="jquery-3.2.1.js"></script>
3）使用：jQuery.xxxxx --> $() .xxx
1、jquery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法
简单说:
用jQuery选择器查出来的就是jQuery对象
2、jquery对象和Dom对象
jQuery对象，它只可以使用jQuery方法，不能使用DOM的方法，DOM对象也不能使用jquery方法
3、jquery对象和DOM对象的转化
1）jquery对象转DOM对象
jquery对象[0] --> $(".c1")[0]
2）DOM对象转jquery对象
$(DOM对象)
4、基础语法
$(selector).action()
1、选择器
1）基本选择器
- ID选择器 $("#id")
- 类选择器 $(".class")
- 标签选择器 $("element")
- 所有标签 $("*")
- 组合选择器 $("#id,.class")
2）层级选择器
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙") $("#id a")
- 从一个标签的儿子里面找 $("父亲>儿子标签") $("#id>a")
- 找紧挨着的标签 $("标签+下面紧挨着的那个标签") $("#id+a")
- 找后面所有同级的 $("标签~兄弟标签") $("#id~a")
3）属性选择器
通过属性查找 $("input[type='text']")
2、筛选器
1）基础筛选器
$(" :first") 获取第一个元素
$(" :not('')") 去除所有与给定选择器匹配的元素
$(" :even") 匹配所有索引值为偶数的元素
$(" :odd") 匹配所有索引值为奇数的元素
$(" :eq") 匹配一个给定索引值的元素
$(" :gt") 匹配所有大于给定索引值的元素
$(" :last") 获取最后个元素
$(" :focus") 匹配当前获取焦点的元素。
2）内容
$(":contains") 匹配包含给定文本的元素
$(" :empty") 匹配所有不包含子元素或者文本的空元素
$(" :has('')") 匹配含有选择器所匹配的元素的元素
$(" :parent") 匹配含有子元素或者文本的元素
3）可见性
$(" :hidden) 匹配所有不可见元素，或者type为hidden的元素
$(" :visible") 匹配所有的可见元素
4）表单
:input
:text
:password
:checkbox
:radio
:submit
:button
:image
:file
5）表单属性
:enable 匹配所有可用元素
:disable 匹配所有不可用元素
:checked 匹配所有选中的被选中元素
:selected 匹配所有选中的option元素
3、方法形式的筛选
1）过滤
$("").eq() 获取当前链式操作中第N个jQuery对象
$("").first() 获取第一个元素
$("").last() 获取最后一个元素
$("").hasClass() 检查当前的元素是否含有某个特定的类，如果有，则返回true
$("").has() 保留包含特定后代的元素
$("").not() 从匹配元素的集合中删除与指定表达式匹配的元素
$("").slice(start,end) 选取一个匹配的子集
2）查找
$("").children() 所有子元素的元素集合
$("").find() 搜索所有与指定表达式匹配的元素。
$("").next() 取得后一个同辈元素
$("").nextAll() 取得后所有同辈元素。
$("").nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
$("").offsetParent() 返回第一个匹配元素用于定位的父节点。
$("").parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合。
$("").parents() 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
$("").parentsUntil() 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("").prev() 取得前一个同辈元素。
$("").prevall() 取得前所有同辈元素。
$("").prevUntil() 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
$("").siblings() 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
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>jQuery选择器筛选器练习</title> <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!--导航栏开始--> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">哪吒</a></li> <li><a id="i1" href="#">Egon</a></li> <li><a class="c1" href="#">日天</a></li> <li role="separator" class="divider"></li> <li><a href="#">Alex</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!--导航栏结束--> <div class="container"> <div class="jumbotron"> <div id="j1" class="container"> <h1 class="c1">学厨师，去新东方。</h1> <h1 class="c1">学Python，就来老男孩。</h1> <p id="p1"><a class="btn btn-primary btn-lg" href="#" role="button">查看更多</a></p></div> </div> <hr> <div class="row"> <div class="col-md-12"> <table class="table table-bordered table-striped"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>Egon</td> <td>杠娘</td> <td> <button class="btn btn-warning">编辑</button> <button class="btn btn-danger">删除</button> </td> </tr> <tr> <th>2</th> <td>Yuan</td> <td>日天</td> <td> <button class="btn btn-warning">编辑</button> <button class="btn btn-danger">删除</button> </td> </tr> <tr id="tr3"> <th>3</th> <td>八级哥</td> <td>英语</td> <td> <button class="btn btn-warning">编辑</button> <button class="btn btn-danger">删除</button> </td> </tr> </tbody> </table> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <form id="f1"> <div class="form-group"> <label for="exampleInputEmail1">邮箱</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">上传头像</label> <input type="file" id="exampleInputFile"> <p class="help-block">只支持img格式。</p> </div> <button id="btnSubmit" type="submit" class="btn btn-default">提交</button> </form> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <div class="checkbox-wrapper"> <div class="panel panel-info"> <div class="panel-heading">jQuery学习指南</div> <div id="my-checkbox" class="panel-body"> <div class="checkbox"> <label> <input type="checkbox" value="0"> jQuery一点都不难 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="1" checked> jQuery一学就会 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="2"> jQuery就要多练 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="3" disabled> jQuery学不好 </label> </div> </div> </div> </div> <hr> <div class="radio-wrapper"> <div class="panel panel-info"> <div class="panel-heading">我来老男孩之后...</div> <div class="panel-body"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 我要上课玩手机 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 我要上课好好听 </label> </div> </div> </div> </div> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <h2>练习题：</h2> <ol id="o1"> <li>找到本页面中id是<code>i1</code>的标签</li> <li>找到本页面中所有的<code>h2</code>标签</li> <li>找到本页面中所有的<code>input</code>标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签</li> <li>找到本页面所有样式类中有<code>btn-default</code>的标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签和所有<code>h2</code>标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签和id是<code>p3</code>的标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签和所有样式类中有<code>btn</code>的标签</li> <p id="p2" class="divider"></p> <li>找到本页面中<code>form</code>标签中的所有<code>input</code>标签</li> <li>找到本页面中<code>label</code>标签下的<code>input</code>标签</li>子标签 <li>找到本页面中紧挨着<code>label</code>标签的<code>input</code>标签</li> <li>找到本页面中id为<code>p2</code>的标签后面所有和它同级的<code>li</code>标签</li> <p id="p3" class="divider"></p> <li>找到id值为<code>f1</code>的标签下面的第一个input标签</li> <li>找到id值为<code>my-checkbox</code>的标签下面最后一个input标签</li> <li>找到id值为<code>my-checkbox</code>的标签下面没有被选中的那个input标签</li> <li>找到所有含有<code>input</code>标签的<code>label</code>标签</li> </ol> </div> </div> </div> <script src="jquery-3.2.1.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.js"></script> </body> </html>
1、属性
1）如果你的选择器选出了多个对象，那么默认只会返回第一个的属性
attr(name|pro|key,val|fn) - 一个参数 获取属性的值 - 两个参数 设置属性的值 removeAttr(name) - 删除属性的值 prop(n|p|k,v|f) - 属性的返回值是布尔类型 removeProp(name) - 删除属性的值
2）jquery中的循环
each
- $.each(数组/对象, function(i, v){})
- $("div").each(function(){})
3）练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击加载图片</title>
<style>
img{
height: 600px;
width: 800px;
}
</style>
</head>
<body>
<img src="xxx.png" alt="美女" data-src="Bootstrap_i1.png">
<img src="xxx.png" alt="美女" data-src="Bootstrap_i3.png">
<img src="xxx.png" alt="美女" data-src="Bootstrap_i4.png">
<script src="jquery-3.2.1.js"></script>
<script>
$("img").on("click", function () {
var imgPath = $(this).attr("data-src");
$(this).attr("src", imgPath)
})
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选取消</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="panel panel-default"> <div class="panel-heading"> <button id="all" class="btn-btn-default">全选</button> <button id="cancel" class="btn-btn-default">取消</button> <button id="reverse" class="btn-btn-default">反选</button> </div> <div class="panel-body"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row"><input type="checkbox"></th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row"><input type="checkbox"></th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row"><input type="checkbox"></th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> // 全选 $("#all").on("click", function () { // 统一的操作 $(":checkbox").prop("checked", true); }); //取消 $("#cancel").on("click", function () { $(":checkbox").prop("checked", false); }); // // 反选 $("#reverse").on("click", function () { // 取出所有的checkbox var checkboxEles = $(":checkbox"); // 翔哥的耻辱 // checkboxEles.prop("checked", !(checkboxEles.prop("checked"))) // 要循环checkbox // 选中的就取消 // 没选中的就选中 checkboxEles.each(function () { var thisCheckbox = $(this); // 在教室里走的那个人 var isChecked = thisCheckbox.prop("checked"); // 是否选中 // 方法一：判断的方式 if (isChecked) { // 取消选中 thisCheckbox.prop("checked", false); } else { // 选中 thisCheckbox.prop("checked", true); } // // 方法二：直接取反的方式 // thisCheckbox.prop("checked", !isChecked); }) }) // $("#reverse").on("click", function () { // $(":checked").prop("checked", false); // $(":not(:checked)").prop("checked", true); // }) </script> </body> </html>
2、css
addClass(class|fn) 为每个匹配的元素添加指定的类名。
removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。
toggleClass(class|fn[,sw]) 切换，有就去掉，没有就加上
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>示例一</title> <style> .dp { height: 100px; width: 100px; border-radius: 50%; border: 1px solid #cccccc; display: inline-block; } .dp2 { background-color: yellow; } </style> </head> <body> <div class="dp"></div> <button id="switch" class="btn btn-default">开关</button> <script src="jquery-3.2.1.js"></script> <script> //jQuery绑定事件 $("#switch").on("click", function () { // 找灯泡 $(".dp").toggleClass("dp2"); }) </script> </body> </html>
3、HTML代码/文本/值
没有参数就是获取对应的值 有参数就是设置对应的值
html([val|fn]) 加 html标签 .html("<span>添加span标签</span>") text([val|fn]) 加文本 .text("我是文本") val([val|fn|arr]) 操作的value - input - 获取的是输入的内容 - checkbox - 获取的是value值 - select - 单选 就是获取值 - 多选 得到的是一个数组，设置的时候也要是数组
1、css
- .css("color") -> 获取color css值
- .css("color", "#ff0000") -> 设置值
- .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值
- .css(["color", "border"]) -> 获取多个值
2、位置
.offset - 获取相对位置 - 比较的对象是 html .position - 获取相对已经定位的父标签的位置 - 比较的是最近的那个做过定位的祖先标签 scrollTop([val]) - 返回顶部 scrollLeft([val]) - 返回最左
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.c1 {
height: 100px;
}
.hide {
display: none;
}
#b1 {
position: fixed;
right: 15px;
bottom: 15px;
}
</style>
</head>
<body>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div class="c1">11</div>
<div class="c1">12</div>
<div class="c1">13</div>
<div class="c1">14</div>
<div class="c1">15</div>
<div class="c1">16</div>
<div class="c1">17</div>
<div class="c1">18</div>
<div class="c1">19</div>
<div class="c1">20</div>
<div class="c1">21</div>
<div class="c1">22</div>
<div class="c1">23</div>
<div class="c1">24</div>
<div class="c1">25</div>
<div class="c1">26</div>
<div class="c1">27</div>
<div class="c1">28</div>
<div class="c1">29</div>
<div class="c1">30</div>
<div class="c1">31</div>
<div class="c1">32</div>
<div class="c1">33</div>
<div class="c1">34</div>
<div class="c1">35</div>
<div class="c1">36</div>
<div class="c1">37</div>
<div class="c1">38</div>
<div class="c1">39</div>
<div class="c1">40</div>
<div class="c1">41</div>
<div class="c1">42</div>
<div class="c1">43</div>
<div class="c1">44</div>
<div class="c1">45</div>
<div class="c1">46</div>
<div class="c1">47</div>
<div class="c1">48</div>
<div class="c1">49</div>
<div class="c1">50</div>
<div class="c1">51</div>
<div class="c1">52</div>
<div class="c1">53</div>
<div class="c1">54</div>
<div class="c1">55</div>
<div class="c1">56</div>
<div class="c1">57</div>
<div class="c1">58</div>
<div class="c1">59</div>
<div class="c1">60</div>
<div class="c1">61</div>
<div class="c1">62</div>
<div class="c1">63</div>
<div class="c1">64</div>
<div class="c1">65</div>
<div class="c1">66</div>
<div class="c1">67</div>
<div class="c1">68</div>
<div class="c1">69</div>
<div class="c1">70</div>
<div class="c1">71</div>
<div class="c1">72</div>
<div class="c1">73</div>
<div class="c1">74</div>
<div class="c1">75</div>
<div class="c1">76</div>
<div class="c1">77</div>
<div class="c1">78</div>
<div class="c1">79</div>
<div class="c1">80</div>
<div class="c1">81</div>
<div class="c1">82</div>
<div class="c1">83</div>
<div class="c1">84</div>
<div class="c1">85</div>
<div class="c1">86</div>
<div class="c1">87</div>
<div class="c1">88</div>
<div class="c1">89</div>
<div class="c1">90</div>
<div class="c1">91</div>
<div class="c1">92</div>
<div class="c1">93</div>
<div class="c1">94</div>
<div class="c1">95</div>
<div class="c1">96</div>
<div class="c1">97</div>
<div class="c1">98</div>
<div class="c1">99</div>
<div class="c1">100</div>
<button id="b1" class="hide">屠龙宝刀，点击就送</button>
<script src="jquery-3.2.1.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b1").removeClass("hide");
}else {
$("#b1").addClass("hide");
}
})
$("#b1").on("click", function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
3、尺寸
height([val|fn]) - 元素的高度 width([val|fn]) innerHeight() - 带padding的高度 innerWidth() outerHeight([soptions]) - 在innerHeight的基础上再加border的高度 outerWidth([options])
1、内部插入
append(content|fn) --> 往后加 appendTo(content) A.append(B) -> 把B添加到A的后面 A.appendTo(B) -> 把A添加到B的后面 prepend(content|fn) --> 往前加 prependTo(content) A.prepend(B) -> 把B添加到A的前面 A.prependTo(B) -> 把A添加到B的前面
2、外部插入
after(content|fn) --> 往后加 insertAfter(content) A.after(B) --> 把B添加到A的后面 A.insertAfter(B) --> 把A添加到B的后面 before(content|fn) --> 往前加 insertBefore(content) A.before(B) --> 把B添加到A的前面 A.insertBefore(B) --> 把A添加到B的前面
3、包裹
wrap(html|ele|fn) A.wrap(B) --> B包A unwrap() - 不要加参数 wrapAll(html|ele) wrapInner(html|ele|fn)
4、替换
replaceWith(content|fn) A.replaceWith(B) --> B替换A replaceAll(selector) A.replaceAll(B) --> A替换B
5、删除
empty() - 清空 内部清空 remove([expr]) - 删除 整体都删除 detach([expr]) - 剪切 多保存在变量中，方便再次使用
6、复制
clone([Even[,deepEven]])
默认只复制标签，参数设置为true也会复制其绑定的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>克隆</title> </head> <body> <button class="c1">一刀999</button> <script src="jquery-3.2.1.js"></script> <script> $(".c1").on("click", function () { $(this).clone(true).insertAfter($(this)); }) </script> </body> </html>
