001 JQuery (001 - 004)
[A] JQuery基础
JQuery：
1. 一个快速，简洁的JavaScript框架
2. 设计宗旨: "write less, do more"
3. JQuery兼容的主流浏览器，如IE6.0+, FF1.5+, Safari2.0+, Opera9.0+
1. JQuery优点：
1. 简化JS的复杂操作
2. 不再关心兼容性
2. JQuery帮助文档
官网：https://jquery.com/
3. JQuery的版本区别：
1.0 可以兼容到IE8以下
2.0 只兼容IE8以上
3.0 目前最新
【注】遇到新东西去查文档学
4. JQuery文件各个版本下载
网址：http://www.jq22.com/jquery-info122
5. JQuery设计思想
1. 模拟css选择网页元素
【格式】：$("css选择器").css("属性", "属性值")
css选择器参考手册: http://www.runoob.com/cssref/css-selectors.html
2. 独有表达式选择
$("li:first").css("backgroundColor", "red"); 第一个li标签
$("li:last").css("backgroundColor", "red"); 最后一个li标签
$("li:even").css("backgroundColor", "red"); 偶数位的li标签
$("li:odd").css("backgroundColor", "red"); 奇数位的li标签
$("li:eq(2)").css("backgroundColor", "red"); 下标为2的li标签
3. 多种筛选方式
$("li:eq(2)").css("backgroundColor", "red"); 下标为2的li标签
或写成：
$("li").eq(2).css("backgroundColor", "red"); 下标为2的li标签
$("li.box").css("backgroundColor", "red"); 类名为box的li标签
或写成：
$("li").filter(".box").css("backgroundColor", "red");类名为box的li标签
[B] JQuery的写法
1. 方法函数化
示例1：简化页面加载函数
$(function(){
代码块;
})
可以替代：
window.onload = function(){
代码块;
}
示例2：简化事件函数
$("css样式").onclick = function(){
代码块;
}
可以替代：
var oBtn = document.getElementById("id名");
oBtn.onclick = function(){
代码块;
}
【注】在JQ中基本上见不到等于号，所有的复制操作都是函数传参实现的
2. 链式操作
对于同一个目标元素，若有多个事件函数，可以实现链式操作
示例：
$("#oBtn").onclick = function(){
alert("我被点击了")；
}
$("#oBtn").onmouseover = function(){
alert("鼠标来了")；
}
$("#oBtn").onmouseout = function(){
alert("鼠标离开了")；
}
转化为链式操作:
$("#oBtn").onclick = function(){
alert("我被点击了")；
}.onmouseover = function(){
alert("鼠标来了")；
}.onmouseout = function(){
alert("鼠标离开了")；
}
3. 取值赋值合体
即一步实现取值和赋值两步操作
示例：获取元素节点内容并赋值
$("#div1").html();
// 获取id为div1的节点里的内容,返回值即为内容
$("#div1").html("我是替换文本");
// 获取获取id为div1的节点里的内容,并将该内容替换为"我是替换文本"
【注】JQ与JS的关系
JQ底层代码是JS，两者可以共存，但是不能混用
所谓共存，是指语句可以交叉使用
所谓不能混用，是指一条语句不能同时包含JQ和JQ两种代码
[C] JQuery常用方法1
1. filter 过滤，对已经获取到的网页元素进行过滤
示例：
$("div").filter(".box").css("width", "100px")
// 将选中的div中，把类名为box的元素设置为"width = 100px"
2. not 过滤的反义词，即在已经选中的网页元素中去除元素
示例：
$("div").not(".box").css("width", "100px")
// 将选中的div中，把除了类名为box的元素都设置为"width = 100px"
3. has 拥有，根据节点的子元素特征，来选择父元素
示例:
$("div").has(".box").css("width", "100px")
// 将选中的div中，把拥有类名为.box的子节点的节点选中
4. prev 查找当前兄弟节点中的上一个节点
next 查找当前兄弟节点中的下一个节点
示例：
$("div").prev(".box").css("width", "100px")
$("div").next(".box").css("width", "100px")
5. find 查找指定条件下的子节点
示例：
$("div").find("[name=ad]").css("width", "100px")
6. index(下标) 获取当前节点在兄弟节点中的下标
示例：
$("h3").index();
// 返回值为标签h3在兄弟节点中的下标
7. eq(下标) 通过下标获取指定的元素节点
示例：
$("li").eq(2).css("width", "100px")
// 获取下表为2的li标签
8. attr 获取和设置行间属性
示例：
获取行间属性
$("#div").attr("title")
// 返回值为指定节点的title
设置/修改行间属性
$(#div).attr("title", "word")
// 将行间属性title修改为"word"
一次性修改多个行间属性
$(#div).attr({
title: "word",
class: "xxx"
})
[D] JQuery常用方法2
1. addClass() 添加class的某个或多个样式
removeClass() 删除class的某个或多个样式
示例：
$("div1").addClass("box2 box3 box4")
添加class样式，若某个被添加的样式已经存在，测忽略
$("div1").removeClass("box3 box4")
删除掉某个class样式，若某个样式不存在，则忽略掉
2. 获取节点的宽度
width() width
innerWidth() width + padding
outerWidth() width + padding + border
outerWidth(true) width + padding + border + margin
3. 获取节点的高度
height() height
innerheight() height + padding
outerheight() height + padding + border
outerheight(true) height + padding + border + margin
4. 节点操作(不用事先创建节点)
insertBefore() before() 将某节点插在节点之前
$("span").insertBefore("div")
// 将span节点插在div节点之前
insertAfter() after() 将某节点插在节点之后
$("span").insertAfter("div")
// 将span节点插在div节点之后
appendTo() append() 将某节点接到节点的子节点最后
$("span").appendTo("div")
// 将span节点插在div节点的子节点后面
prependTo() prepend() 将某节点接到节点的子节点首位
$("span").prependTo("div")
// 将span节点插在div节点的子节点首位
remove() 删除某节点
$("span").remove()
// 将span节点删除掉
【注】insertBefore()和before()对比
1. 同样的效果，表达方式不一样
示例：
$("span").insertBefore("div")
// 将span节点插在div节点之前
等价于：
$("div").before("span")
// 在div节点之前插入节点span
2. 链式操作时，主体不一样
示例：
$("span").insertBefore("div").css("backgroundColor", "red")
// 将span节点插在div节点之前,并且span背景色设置为红色
等价于：
$("div").before("span").css("backgroundColor", "red")
// 在div节点之前插入节点span,并且div背景色设置为红色
5. on和off
1. 传统的事件类型只能绑定一个事件，同时绑定多个事件，则后面会覆盖前面，只有最后一个有效
2. 事件监听器可以实现一个事件类型绑定多个事件，但是无法精确的删除其中某一个函数
在JQuery中，不带on的事件绑定，其底层使用事件监听器实现的，可以同时绑定多个事件，互不影响
如：同时绑定三个事件
$("#div").click(function(){
alert(1);
})
$("#div").click(function(){
alert(2);
})
$("#div").click(function(){
alert(3);
})
则可一次点击触发三个事件
on方法添加事件
1. 给一个事件添加一个函数
$("#div").on("click", function(){
alert(1);
})
// 给div添加click事件
2. 给多个事件添加同一个函数，多个事件用冒号隔开即可
$("#div").on("click mouseover", function(){
alert(1);
})
3. 给多个事件分别添加不同的函数，传入事件=>函数键值对即可
$("#div").on({
click: function(){
alert(1);
},
mouseup: function(){
alert(2);
},
mousemove: function(){
alert(3);
},
})
4. 事件委托
on的参数分别为: 父节点，触发对象的选择器，触发函数
示例：
$("ul").on("click","li",function(){
$(this).css("backgroundColor", "red");
})
off方法取消事件
1. 取消所有事件上的所有函数
$("#div1").off()
2. 取消某一个事件上的所有函数
$("#div1").off("click")
3. 取消某一个事件上的某一个函数
$("#div1").off("click", show)
【注】这个被取消的函数必须是由函数名的函数
6. 创建节点
$(`<li>内容</li>`).append($("ul"));
[E] JQuery常用方法3
1. 阻止事件冒泡 stopPropagation()
示例：
$("#div1").on("click", function(ev){
aleret(this.id);
ev.stopPropagation()
})
2. 阻止对象的默认行为 preventDefault
示例:
$("a").click(function(ev){
ev.preventDefault();
})
取消a链接的默认行为，点击后不会跳转
3. 既阻止事件冒泡，又阻止默认行为 return false
示例：假设a又冒泡事件
$("a").click(function(ev){
return false;
})
4. which
1. 在鼠标事件中输出button
输出值：
左键 1
滚轮 2
右键 3
$("#div1").click(function(ev){
alert(ev.which);
})
2. 在keydown事件中，输出keyCode 键码(不区分大小写)
3. 在keypress事件中，输出charCode 字符码(区分大小写)
5. offset() 直接获取当前元素到可视窗口的距离
offset().left 直接得到当前元素到最左端(可视窗口)的距离
offset().top 直接得到当前元素到最左端(可视窗口)的距离
【注】没有offset().right和offset().bottom
示例：
$("#div2").offset().left
获取div2节点距离可视窗口最左端的距离
6. position() 直接获取当前元素，距离第一个有定位父节点的距离，margin算在内
position().left
position().top
【注】没有position().right和position().bottom
示例：
$("#div2").position().left
获取div2节点距离第一个有定位的父节点最左端的距离
7. offsetParent() 查找第一个有定位的父节点，如果父节点没有定位子继续找，最后找到html
示例：
$("#div1").offsetParent().css("backgroundColor", "red")
将div1元素的有定位元素的父节点的背景色设置为red。
8. val() 获取/设置表单元素的值
【注】1. 取值时，JQ只能取到第一个符合条件的元素的值
2. 设置时，JQ批量设置所有符合条件的元素的值
此外：
css(), arttr(), html()等都可以实现批量赋值
9. size() 获取网页元素的个数
length 等同于size()
10. each() 循环遍历
示例：
$("div").each(function(item, index){
$(item).html(index);
})
