================JQuery===========
JQuery
1. jQuery是什么？
一个js插件， 相比较原生的DOM操作更简单、开发效率更高
2. jQuery使用
1. jQuery版本
1. 版本号 1.x/2.x/3.x
1.x 兼容IE6/7/8
2. jquery.min.js和query.js的区别
2. jQuery的导入
1. 先导入后使用
2. 导入方式：
1. 自己下载到本地使用
2. 使用CDN方式
3. jQuery的调用
1. $
2. jQuery
4. jQuery对象和DOM对象
1. 注意事项
jQuery对象才能调用jQuery的方法，DOM对象只能调用DOM方法
2. 互相转换
1. jQuery对象 --> DOM对象
$("div") --> $("div")[0]
2. DOM对象 --> jQuery对象
this --> $(this)
5. jQuery语法
$("选择器").方法()
支持链式操作
6. jQuery选择器
1）选择器
1. 基本选择器
1. $("div")
2. $("#d1")
3. $(".c1")
4. $("*")
2. 组合选择器
1. $("div, .c1") --> 找到所有div标签和有c1样式类的标签
3. 层级选择器
1. $("#d1 span") --> id是d1标签下面所有的span标签（子子孙孙）
2. $("#d1>span") --> id是d1标签下面一层的span标签（子代儿子）
3. $("label+input") --> 找到紧挨着label标签的input标签（紧挨着的兄弟）
4. $(".c1~div") --> 找到c1样式类下面的div标签（不挨着也行的兄弟）
4. 属性选择器
1. $("[s14]")
2. $("[type='text']")
3. $("[type!='text']")
4.$(“[type!='text’][id=‘name’]”)(通过双重属性来筛选)
2）筛选器
5. 基本筛选器
1. :first/:last（拿到一堆中的第一个/最后一个）
2. :eq()/:gt()/:lt()（根据一堆中的索引筛选）
3. :even/:odd（根据索引的奇偶筛选）
4. $("div:not(.c1)") --> 找到没有c1样式类的div标签
5. $("div:has(.c1)") --> 找到后代中有c1样式类的div标签
6. 表单筛选器
1. $(":text")
2. $(":password")
3. ...
4. $(":disabled")
5. $("input:checked")
6. $(":selected")
7. 筛选器方法
1. .next()/.prev()/nextAll()/nextUntil()/prevAll()/prevUntil()
2.
.parent() (一直向外找)
.children()（找儿子这层）
.siblings()（所有兄弟上下都找，不包括自己）
3. .find('选择器条件') --> 在后代查找符合要求的（子子孙孙）
4. .filter('选择器条件') --> 根据条件对已经找到的结果进行二次过滤
5. .first()/.last() —>一堆中找复合条件的（和基本筛选器一样）
6. .not()/.has()
7. .eq()
7. jQuery操作样式
1. 操作class
1. .addClass()
2. .removeClass()
3. .hasClass()
4. .toggleClass()
2. 操作样式
1. 操作class
2. 操作CSS
$("").css("color") --> 获取选中标签的颜色值
$("").css("color", "yellow") --> 设置选中标签的颜色值
3. 位置操作
1. position() --> 获取相对定位过的祖先元素的偏移
2. offset() --> 获取相对当前窗口的偏移
3. scrollTop() --> 相对顶部的偏移
4. scrollLeft() --> 相对左侧的偏移
返回顶部示例！
4. 尺寸操作
1. height/width 元素
2. innerHeight/innerWidth 元素 + 内填充
3. outerHeight/outerWidth 元素 + 内填充 + 边框
5.HTML代码/文本/值
没有参数就是获取对应的值，
有参数就设置对应的值
- .html() 添加html标签 .html("<span>啦啦啦。</span>")
- .text() 添加文本 .text("啦啦啦。")
- .val()
input :一个参数,获取的是input框里面的值
checkbox :一个参数，获取的是value的值
select :
单选：获取值
多选：得到的是一个数组，设置的时候也要是数组
6. 属性操作
1. attr (属性,可以设置值)
2.removeAttr
3. prop （属性，true/false）
4.removeProp
8. 文档操作
创建标签用：document.createElement("div")
1. 内部添加
1. 前面加
1. $(A).prepend(B)
2. $(A).prependTo(B)
2. 后面加
1. $(A).append(B)
2. $(B).appendTo(A)
2. 外部添加
1. 前面加
1. $(A).before(B)
2. $(B).insertBefore(A)
2. 后面加
1. $(A).after(B)
2. $(B).insertAfter(A)
3. 移除和清空
1. remove() --> 把选中过的标签从文档树中移除
2. empty() --> 把选中的标签内部的元素都移除
4. 替换
1. $(A).replaceWith(B)
2. $(B).replaceAll(A)
5. clone
clone()/clone(true)
注意参数true,加上true会把标签绑定的事件也复制
2. 事件
1. jQuery绑定事件的方式
1. 给标签绑定事件的方式
1. 在标签上写 onclick=函数();
2. 在js代码中 标签对象.onclick = function(){}
2. jQuery绑定事件
1. $("选择器").click(function(){...});
2. $("").on("click", "子选择器", function(){...})--> 事件委托--> 原理是事件冒泡
常用事件
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. 事件委托
原理：事件冒泡
1. 如何阻止事件冒泡（向上传递）
e.stopPropagation()
目的：解决未来的标签如何绑定事件！
语法：
$("祖先标签").on("click", "选择器", function(){...})
注：
1. 阻止事件冒泡
event.stopPropagation()
2. 阻止默认事件的执行（通常用于阻止form表单的提交）
event.preventDefault()
3. 阻止后续事件的执行
return false
9.动画效果
基本（隐藏）
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属性值都可以设置
- 图片变小（漏气）
10.补充
1. each
1. $.each(要遍历的对象, function(){...})
2. $("").each(function(){
// this 是进入循环体的当前标签
console.log(this);
})
3. 退出本层循环
return
4. 退出each循环
return false
2. .data()
1. .data(key, value) --> 存值
2. .data(key) --> 根据key取值
3. .data() --> 取所有键值对
4. .removeData(key) --> 根据key删除值
5. .removeData() --> 删除所有键值对
3. 扩展
1. $.extend() --> 给jQuery扩展自定义方法
2. $.fn.extend() --> 给jQuery对象扩展自定义方法
用法1、$.xxx()
$.extend({
"GDP": function () {
console.log("戴小红花");
}
});
- 给jQuery添加扩展
- $.GDP()
用法2、$("").xxx()
$.fn.extend({
"BJG": function () {
console.log("英语八级就是好！");
}
})
- 给jQuery对象添加扩展
- $(":input").BJG()
总结：
1. 页面加载完之后才执行的JS代码
1. DOM方式
window.onload = function(){}
2. jQuery方式
$(document).ready(function(){...})
2.Bootstrap的使用
1. 下载
https://v3.bootcss.com/
2. 导入
link标签导入 bootstrap.css或者bootstrap.min.css
3. 图标
1. Bootstrap内置的： https://v3.bootcss.com/components/
2. font-awesome图标：http://www.fontawesome.com.cn/
3. 阿里图标： http://iconfont.cn/
4. 面板
5. ...
4. jS插件
1. 模态框
2. 轮播图
3. 插件
弹出插件SweetAlert：http://mishengqiang.com/sweetalert/
