1，基础
1.为什么要用jquery？
写起来简单，省事，开发效率高，兼容性好
2、什么是jQuery?
jQuery是一个兼容多浏览器的JavaScript库（类似python里面的模块）
3、如何使用jQuery？
1、导入 <script src="jquery-3.2.1.js"></script>
或者<script src="jquery-3.2.1.min.js"></script>
2、语法规则：$("")
4、JS和jQuery的区别？
jQuery就是用JS写的
js是基础，jQuery是工具
5、jQuery介绍
- 版本
- 1.x
兼容IE8。。。
- 3.x
最新
- .min.xx
压缩的：生产环境用
- 没有压缩的（没有.min.xx）：开发用
6、 jQuery知识点
html:裸体的人
css:穿了衣服的人
JS：让人动起来
7、选择器：
1、基本选择器
- ID选择器 $("#id的值")
- 类选择器（class） $(".class的值")
- 标签选择器(html标签) $("标签的名字")
- 所有标签 $("*")
- 组合选择器 $("xx,xxx")
2、层级选择器
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙")
- 从一个标签的儿子里面找 $("父亲>儿子标签")
- 找紧挨着的标签 $("标签+下面紧挨着的那个标签")
- 找后面所有同级的 $("标签~兄弟")
8、jQuery对象：
- 用jQuery选择器查出来的就是jQuery对象
- jQuery对象，他就可以使用jQuery方法，不能使用DOM的方法
- DOM对象和jQuery对象转换：
- $(".c1")[0] --> DOM对象
- $(DOM对象)
2，筛选器
1，写在引号里面的
-
基本筛选器 $(" :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 下拉框选中
2，写在信号外面当方法用的
-
过滤=========== $("").first() 找第一个 $("").parent() 找父亲 $("").eq(index) 找等于index的 .hasClass() 判断有没有某个类的 查找========== .children() 找孩子 .find() 查找 .next() 下面的 .nextAll() 下面所有的 .nextUntil() 找下面的直到找到某个标签为止 .parent() 找父亲 .parents() 找所有的父亲 .parentsUntil() 直到找到你要找的那个父亲为止 .prev() 上面的 .prevAll() 上面的所有 .prevUntil() 上面的直到找到某个标签为止 .siblings() 所有的兄弟 三个方法======= .toggleClass() #切换|开关：有就移除，没有就添加 .addClass() #添加类 .removeClass() #删除类
3，需要注意的几个筛选器
-
$('.c1').first() $('.c1:first') 这两个是一样的， $('.c1').parent() #找父亲 $('.c1:parent') #找有孩子的父亲 $('.c2').html() #获取HTML代码
3，属性
-
属性（如果你的选择器选出了多个对象，那么默认只会返回出第一个属性）、 attr(属性名|属性值) - 一个参数是获取属性的值，两个参数是设置属性值 - 点击加载图片示例 removeAttr(属性名) -删除属性的值 prop(属性名|属性值) - 属性的返回值的是布尔类型 - 单选，反选，取消的例子 removeProp(属性名) prop和attr方法的区别: 总结一下： 1.对于标签上有的能看到的属性和自定义属性都用attr 2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr() checked示例: attr(): 查看值,checked 选中--'checked' 没选中--undefined $('#nv').attr({'checked':'checked'}); 设置值,attr无法完成取消选中 $('#nv').attr({'checked':'undefined'}); $('#nv').attr({'checked':undefined}); prop(): 查看值,checked 选中--true 没选中--false $(':checkbox').prop('checked'); 设置值: $(':checkbox').prop('checked',true); $(':checkbox').prop('checked',false);
4，文档操作
1，文档操作
-
文档操作
姿势1:添加到指定元素内部的后面 $(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B append示例: 方式1: 创建标签 var a = document.createElement('a'); $(a).text('百度'); $(a).attr('href','http://www.baidu.com'); $('#d1').append(a); 方式2:(重点) $('#d1').append('<a href="xx">京东</a>'); appendto示例 $(a).appendTo('#d1'); 姿势2:添加到指定元素内部的前面 $(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B 姿势3:添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 姿势4: $(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面 移除和清空元素 remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在 示例: $('#d1').remove(); $('#d1').empty(); 替换: replaceWith() replaceAll() 示例: $('#d1').replaceWith(a); 用a替换前面的标签 $(a).replaceAll('#d1');
2，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的高度
3，动画
-
基本 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属性值都可以设置 - 图片变小（漏气）
5，事件处理
1，绑定事件的方式
-
之前绑定事件的方式： 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的事件委派
2，常用事件
-
blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点（ 搜索框例子） change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子) click([[data],fn]) 点击 dblclick([[data],fn]) 双击 scroll([[data],fn]) 滚动 submit([[data],fn]) 提交
3，不常用事件
-
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])