python之路18：jQuery
概述
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是更加便捷的开发，并且在兼容性方面十分优秀。如何使用jQuery？导入jQuery文件，如<script src="jquery-3.2.1.js"></script>或者<script src="jquery-3.2.1.min.js"></script> （min代表压缩版）
它分以下几部分：
- 选择器和筛选
- 属性
- css
- 文档处理
- 事件
- 扩展
- ajax
选择器
1、基本选择器
- ID选择器 $("#id的值")
- 类选择器（class） $(".class的值")
- 标签选择器(html标签) $("标签的名字")
- 所有标签 $("*")
- 组合选择器 $("xx,xxx")
2、层级选择器
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙")
- 从一个标签的儿子里面找 $("父亲>儿子标签")
- 找紧挨着的标签 $("标签+下面紧挨着的那个标签")
- 找后面所有同级的 $("标签~兄弟")
筛选器
- 写在引号里面的
基本筛选器
$(" :first") 找第一个
$(" :not('')") 不是/非
$("#i1>input":not('.c1,.c2'))
$(" :even") 偶数
$(" :odd") 奇数
$(" :eq(index)") 找等于index的
$(" :gt(index)") 找大于index的
$(" :lt(index)") 找小于index的
$(" :last") 最后一个
$(" :focus") 焦点
内容==========
$(" .c1:contains('我是第一个')") 包含文档的内容的标签
$(" :empty") 标签内容为空的
$(" :has('')") 包含标签的标签
$(" :parent") 找有孩子的父亲
$("#i7").parent() 找i7的父亲
可见性========
$(" :hidden") 找到隐藏的
$(" :visible") 找不隐藏的，也就是显示的
属性==========
input[name] --> 找有name属性的input
input[type='password'] --> 类型是password的input标签
表单==========
:input
:password
:checkbox
:radio
:submit
:button
:image
:file
表单对象属性=========
:enable 可选的
:disable 不可选
:checked 选中的
:selected 下拉框选中
- 写在信号外面当方法用的
过滤===========
$("").first() 找第一个
$("").parent() 找父亲
$("").eq(index) 找等于index的
.hasClass() 判断有没有某个类的
查找
.children() 找孩子
.find() 查找
.next() 下面的
.nextAll() 下面所有的
.nextUntil() 找下面的直到找到某个标签为止
.parent() 找父亲
.parents() 找所有的父亲
.parentsUntil() 直到找到你要找的那个父亲为止
.prev() 上面的
.prevAll() 上面的所有
.prevUntil() 上面的直到找到某个标签为止
.siblings() 所有的兄弟
toggleClass() 切换|开关：有就移除，没有就添加
addClass("hide") 添加类
removeClass("hide") 删除类
jQuery对象：
用jQuery选择器查出来的就是jQuery对象，它只能使用jQuery方法，不能使用DOM的方法。
DOM对象和jQuery对象转换：
- $(".c1")[0] --> DOM对象
- $(DOM对象)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>开关</title> 6 <style> 7 .c1 { 8 width: 200px; 9 height: 200px; 10 border: 1px solid grey; 11 border-radius: 50%; 12 display: inline-block; 13 } 14 15 .c2 { 16 background-color: red; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="c1"></div> 22 <button class="btn">按钮</button> 23 <script src="jquery-3.4.1.js"></script> 24 <script> 25 // 找到button添加事件 26 $(".btn").on('click', function () { 27 //当点击的时候让变色 28 $(".c1").toggleClass('c2') 29 }); 30 31 </script> 32 </body> 33 </html>
属性
属性（如果你的选择器选出了多个对象，那么默认只会返回出第一个属性）、
attr(属性名|属性值)
- 一个参数是获取属性的值，两个参数是设置属性值
- 点击加载图片示例
removeAttr(属性名)
-删除属性的值
prop(属性名|属性值)
- 属性的返回值的是布尔类型
- 单选，反选，取消的例子
removeProp(属性名)
-删除属性的值
循环：each（两种循环示例）
- $.each(数组/对象, function(i, v){})
- $("div").each(function(){})
CSS类
- addClass 添加类属性
- removeClass 移除类属性
- toggleClass 开关|切换（有就移除，没有就添加）
HTML代码/文本/值
没有参数就是获取对应的值，
有参数就设置对应的值
- .html() 添加html标签 .html("<span>啦啦啦。</span>")
- .text() 添加文本 .text("啦啦啦。")
- .val()
input :一个参数,获取的是input框里面的值
checkbox :一个参数，获取的是value的值
select :
单选：获取值
多选：得到的是一个数组，设置的时候也要是数组
文档操作
CSS
.css()
- .css("color") -> 获取color css值
- .css("color", "#ff0000") -> 设置值
- .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值
- .css(["color", "border"]) -> 获取多个值
.offset
- 获取相对位置
- 比较的对象是html (窗口)
.position
- 获取相对已经定位的父标签的位置
- 比较的是最近的那个做过定位的祖先标签
.scrollTop([val])
- 返回顶部的例子
.scrollLeft([val])
尺寸：
height([val|fn])
- 元素的高度
width([val|fn])
- 元素的宽度
innerHeight()
- 带padding的高度
innerWidth()
- 带padding的宽度
outerHeight([soptions])
- 在innerHeight的基础上再加border的高度
outerWidth([options])
- 在innerHeight的基础上再加border的高度
文档操作
内部插入
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的前面
包裹
wrap(html|ele|fn)
A.wrap(B) --> B包A
unwrap() 不抱
- 不要加参数
wrapAll(html|ele) 都包(作为整体包)，只包你选中的那个
wrapInner(html|ele|fn) 里面包
替换
replaceWith(content|fn)
A.replaceWith(B) --> B替换A
replaceAll(selector)
A.replaceAll(B) --> A替换B
删除
empty()
- 清空 内部清空
remove([expr])
- 删除 整体都删除
detach([expr])
- 剪切 多保存在变量中，方便再次使用
克隆/复制
clone([Even[,deepEven]])
动画
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
- 淡出到0.66透明度
fadeToggle([s,[e],[fn]])
- .fadeToggle(3000, function () {
alert("真没用3");
});
自定义
animate(p,[s],[e],[fn])1.8*
- css属性值都可以设置
- 图片变小（漏气）
事件处理
之前绑定事件的方式：
1. onclick=clickMe(); function clickMe() {}
2. ele.onclick = function(){}
3. ele.addEventListener("click", function(){}) js事件委派
jQuery绑定事件的方式：
1. $(ele).on("click", function(){})
2. $("tbody").delegate(".btn-warning", "click", function(){}) 这个3.几的版本没有这个方法了，这是3.几以前版本有的方法
3. $("tbody").on("click",".btn-warning",function(){}) jQuery的事件委派
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .back{ 8 position: fixed; 9 bottom: 0px; 10 right: 0px; 11 } 12 .hide{ 13 display: none; 14 } 15 </style> 16 </head> 17 <body> 18 19 <div style="height: 2000px;"></div> 20 21 <div onclick="GoTop()" class="back hide">返回顶部</div> 22 23 <script src="jquery-1.8.2.js"></script> 24 <script type="text/javascript"> 25 26 function GoTop(){ 27 //返回顶部 28 $(window).scrollTop(0); 29 } 30 31 $(function(){ 32 33 $(window).scroll(function(){ 34 //当滚动滑轮时，执行函数体 35 36 //获取当前滑轮滚动的高度 37 var top = $(window).scrollTop(); 38 39 if(top>100){ 40 //展示“返回顶部” 41 $('.back').removeClass('hide'); 42 }else{ 43 //隐藏“返回顶部” 44 $('.back').addClass('hide'); 45 } 46 }); 47 }); 48 49 </script> 50 51 </body> 52 </html> 53 54 dem0
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8'/> 5 <title></title> 6 <script type="text/javascript" src='jquery-3.4.1.js'></script> 7 <script type="text/javascript"> 8 $(function () { 9 $('#selectAll').click(function () { 10 $('#checklist :checkbox').prop('checked', true); 11 }) 12 $('#unselectAll').click(function () { 13 $('#checklist :checkbox').prop('checked', false); 14 }) 15 $('#reverseAll').click(function () { 16 $('#checklist :checkbox').each(function () { 17 $(this).prop('checked', !$(this).prop('checked')) 18 }) 19 }) 20 21 }) 22 </script> 23 </head> 24 <body> 25 <div id='checklist'> 26 <input type='checkbox' value='1'/>篮球 27 <input type='checkbox' value='2'/>足球 28 <input type='checkbox' value='3'/>羽毛球 29 </div> 30 <input type='button' value='全选' id='selectAll'/> 31 <input type='button' value='不选' id='unselectAll'/> 32 <input type='button' value='反选' id='reverseAll'/> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css示例</title> 6 </head> 7 <style> 8 .c2 { 9 width: 100px; 10 height: 100px; 11 background-color: red; 12 position: relative; 13 top: 50px; 14 left: 50px; 15 } 16 17 .c3 { 18 width: 100px; 19 height: 100px; 20 background-color: greenyellow; 21 position: absolute; 22 left: 100px; 23 top: 100px; 24 25 } 26 </style> 27 <body> 28 <div class="c1">你好</div> 29 <div class="c4">你好呀</div> 30 <div class="c2"> 31 <div class="c3"></div> 32 </div> 33 34 <script src="jquery-3.4.1.js"></script> 35 <script> 36 // 1、 .css() 37 $(".c1").css("color", "#336699");//找到标签，设置单个样式 38 console.log($(".c1").css("color"));//获取color css值 39 $(".c4").css({"color": "red", "border": "1px solid green", "font-size": "20px"});//设置多个样式 40 console.log($(".c4").css(["color", "border", "font-size"])) 41 // 2、offset 42 console.log($(".c2").offset()); 43 console.log($(".c2").offset().left); 44 console.log($(".c2").offset().top); 45 46 console.log($(".c3").offset()); //{top: 107, left: 58} 47 console.log($(".c3").position());//{top: 100, left: 100} 48 49 </script> 50 </body> 51 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文档操作</title> 6 </head> 7 <ul id="u1"> 8 <li>111</li> 9 <li>222</li> 10 <li>333</li> 11 <li>444</li> 12 </ul> 13 <p>文档</p> 14 <ul id="u2"> 15 <li>第一章</li> 16 <li>第二章</li> 17 <li>第三章</li> 18 <li>第四章</li> 19 </ul> 20 <body> 21 <script src="jquery-3.4.1.js"></script> 22 <script> 23 // 在内部插入 24 // append：往后添加 25 $("#u1").append("<li>456</li>"); 26 var li = document.createElement("li"); 27 $(li).text(666); 28 $(li).appendTo($("#u1")); 29 $("#u1>li:first").appendTo($("#u1")); //吧第一个添加到这个列表中。注意是挪动，不是复制 30 $("#u1>li:last").appendTo($("#u1")); 31 // prepend ：往前添加 32 $("#u2").prepend("<li>啦啦啦</li>"); //吧啦啦啦添加到列表的前面 33 34 var tem = document.createElement("li"); 35 tem.innerText = "哗啦啦。呼啦啦"; 36 $(tem).prependTo($("#u2"));//吧啦啦啦添加到列表里（先创建） 37 38 // 在外部插入 39 // after 40 $("#u2").after("<div>好好</div>"); //在列表的后面插入 41 42 var tem = document.createElement("div"); 43 $(tem).text("哎呀"); 44 $(tem).css("color", "red"); 45 $(tem).insertAfter($("#u2")); //插入到列表的后面 46 // before 47 $("#u2").before("<div>111</div>"); //在列表的前面插入 48 49 var tem = document.createElement("div"); 50 $(tem).text("six"); 51 $(tem).css("color", "blue"); 52 $(tem).insertBefore($("#u2")) //插入到列表的后面 53 54 // 包裹 55 // wrap和unwrap 56 var tem = document.createElement("div"); 57 $(tem).css("border", "1px solid #ff0000"); 58 $("#u1").wrap($(tem)); //让tem吧列表包起来 59 $("#u1").unwrap();//不包，不需要加参数 60 // wrapAll和wrap和wrapInner 61 var tem = document.createElement("div"); 62 $(tem).css("border", "1px solid yellow"); 63 $("ul").wrapAll($(tem)); //都包 64 $("ul").wrap($(tem)); //单个包 65 $("ul").wrapInner($(tem));//里面包 66 67 // 替换 68 // replaceWith和replaceAll 69 $("ul").replaceWith("<p>你愁啥？<p>");//吧所有的列表替换成你愁啥？ 70 71 var ele = document.createElement("p"); 72 $(ele).text("你愁啥？"); 73 $(ele).replaceAll($("ul")); 74 75 // 删除 76 $("ul:first").empty();//吧第一个ul清空 77 $("ul>li:first").empty();//只是清空内容 78 $("ul>li:last").remove();//都清空 79 80 var a = $("#u1>li:first").detach(); //删除以后还保留着，可以再次使用 81 a.appendTo($("#u1")) 82 </script> 83 </body> 84 </html>
事件
常用事件
blur([[data],fn]) 失去焦点
focus([[data],fn]) 获取焦点（ 搜索框例子）
change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子)
click([[data],fn]) 点击
dblclick([[data],fn]) 双击
scroll([[data],fn]) 滚动
submit([[data],fn]) 提交
不常用事件
error([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn]) 按下
keypress([[data],fn]) 按键
keyup([[data],fn]) 键松开
mousedown([[data],fn]) 鼠标按下
mouseenter([[data],fn]) 鼠标移进去
mouseleave([[data],fn]) 鼠标离开：只有鼠标离开被选元素的时候，才会触发mouseleave事件
mousemove([[data],fn]) 鼠标移动
mouseout([[data],fn]) 鼠标离开：无论鼠标离开被选元素还是任何子元素，都会触发mouseout事件
mouseover([[data],fn] 鼠标悬停
mouseup([[data],fn]) 鼠标弹起
resize([[data],fn]) 元素窗口发生变化
select([[data],fn])
unload([[data],fn])
补充：
文档树加载完之后绑定事件（绝大多数情况下）
第一种：吧script放在后面。
第二种：
$(document).ready(function(){
// 绑定事件的代码
....
})
简写：
$(function($){
// 绑定事件的代码
....
});
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>onmouse事件</title> 6 <style> 7 .box { 8 width: 300%; 9 height: 200px; 10 } 11 12 .title { 13 background: steelblue; 14 line-height: 40px; 15 } 16 17 .con { 18 background: slategray; 19 line-height: 30px; 20 } 21 22 .hide { 23 display: none; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="box"> 29 <div class="title">onmouse</div> 30 <div class="con hide"> 31 <div><a href="" class="item">你好吗？</a></div> 32 <div><a href="" class="item">我好啊</a></div> 33 <div><a href="" class="item">好就好</a></div> 34 </div> 35 </div> 36 <script> 37 var ele_title = document.getElementsByClassName('title')[0]; 38 var ele_box = document.getElementsByClassName('box')[0]; 39 //鼠标指上去的事件 40 ele_title.onmouseover = function () { 41 this.nextElementSibling.classList.remove('hide'); 42 }; 43 //鼠标移走的事件的两种方式 44 // 方式一（推荐） 45 ele_box.onmouseleave = function () { 46 ele_title.nextElementSibling.classList.add('hide'); 47 }; 48 // 方式二 49 // ele_title.onmouseout = function () { 50 // this.nextElementSibling.classList.add('hide'); 51 // } 52 // 方式一和方式二的区别： 53 // 不同点 54 // onmouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout事件 55 // onmouseleave：只有在鼠标指针离开被选元素时，才会触发onmouseleave事件 56 // 相同点：都是鼠标移走触发事件 57 </script> 58 </body> 59 </html>
参考：
http://www.cnblogs.com/alex3714
http://www.cnblogs.com/wupeiqi
internet＆python books
PS:如侵权，联我删。
