1、前引
-> JQ(jQuery)的好处
解决浏览器的兼容问题
比起JS更为简洁
功能强大
不同控件统一的操作
体积小
链式编程
隐式迭代、插件丰富、开源、免费
-> JS框架库
就是用JS代码分装一些文件,使用时只要引进来即可
常见的JS库：Prototype、YUI、Dojo、ExtJS、Jquery等
-> jQuery并不是代替JS，实际上就是一堆JS代码
-> jQuery并不涵盖全部的JS，所以有时也需要自己写——更具自己具体的需求来写
2、JQuery顶级对象：$(就是jQuery对象)
-> jQuery就是顶级对象，也写为$
-> 可以使用$调用方法
-> jQuery开源，版本的具体实现有些不同
-> 如何使用jQuery库(vs中)
-> 新建空网站，添加Scripts、Styles目录
-> js版本有两个(正常、压缩)
-> 将jQuery文件拷贝到Scripts中
-> 添加引用(拖进来)(或者写上)
-> jQuery写注释很重要
3、JQ使用简单介绍
-> 使用方法
在jq中，onload事件不在是写在window中，而且在jq中所有的事件添加方式变成方法调用的形式，
将事件执行函数传入到方法中
$(document).ready(function(){
存放onlaod代码，相当于JS中的onload = function(){};
});
$(window).load(function(){});
===
window.onload = function(){};
简化版
$(function(){
代码
});
-> 为什么用美元符($)
使用美元符是因为这个符号比较特殊，不会与其他的单词组合混淆
jQuery库中所有的内容都是用jQuery定义的，只是后来用$将其替换了
目的就是在编码的时候更简单
-> 在jq中还有一种特点就是，可以追加方法
方法不会被覆盖，而会相继输出
4、循环
-> map函数
jq将js的函数式发挥到极致，将循环以函数的形式实现
$.map(数组, 回调函数);
实际上map函数就是在遍历数组arr，只不过将其封装成了函数
在遍历的时候，对每一个数组的成员都会调用一次这个函数
例:
var arr = [1,2,3,4];
//通过map方法来实行数组的遍历，需要两个参数，1、数组 2、函数
var newArr = $.map(arr, function(v, i){
//函数的两个参数1、v是数值的值 2、数值的索引
return v * 2;//将值增加两倍，返回
});
alert(newArr);
ps：map不仅仅可以遍历数组，还可以遍历对象
-> each函数
each循环主要用于遍历JQ对象
和map一样，each可以遍历数组和对象
map遍历数组将新数组返回
each不会返回新数组，而直接处理
语法：$.each(o, func) // func(k, v) key value
例：
var o = {name:"李四", sex:"男"};
$.each(o, function(k, v){
alert(k + "," + v);
//跳出循环，不是用break
//使用return false;
//if(……)加条件
return false;
})
5、trim
本质上是正则表达式
语法：$.trim(string);
例：
var str = " 123 ";
var newStr = $.trim(str);
alert("|" + newStr + "|");
6、jQuery对象与DOM对象
-> 什么DOM对象
页面上的标签节点等，必须是页面文档树中的节点
-> jQuery对象
将DOM封装后得到jQuery对象
(数组、字符串、数字可以转换为jQuery对象吗？不需要转换，要转换的只有页面上的元素)
-> 如何获得DOM对象
document.getElement...();方法
-> 如何将DOM对象转换为jQuery对象(在层中点击按钮显示文本)
方法：只需要向DOM砸钱($)就可以了
var jqObj = $(domObj); 解决了innerText的兼容性
ps:jqObj.innerHTML = '123'; DOM成员与JQ对象不能互相调用
-> 将jQuery对象转换为DOM对象
方法：只要将钱(取钱的首位)拿走即可
var domObj = jqObj.get(0);
var domObj = jqObj[0];
-> 获得页面上的元素(jq中多方法少属性，便于链式编程)
$(选择器)
7、选择器(注：选择器表达式中的空格不能多也不能少)
->通用选择器
-> id选择器：$('#id')
text()方法相当于innerText属性
jQuery中很多方法是传参设置，无参取值
-> 标签选择器：$('target')
如果页面上有多个div，调用这个方法会对所有div执行这个操作
不像以前需要循环，这个称为隐式迭代
-> 类选器：$('.className')
对任何元素处理，只要应用了对应类
-> $("*")所有元素
-> 方法介绍
jq对象.text() 相当于 inenerText
jq对象.html() 相当于 innerHTML
jq对象,val() 相当于 value
jq对象.attr() 相当于 setAttribute与getArreibute
传值（传第二个值）就修改，不传值就获得
jq对象.css() 添加与修改样式
css(样式类型, 样式的值)
ps:
//一次性添加多个样式，使用json对象
$("#p").css({
backgroundColor:"red",
width:"100px",
height:"200px",
border:"1px solid blue"
});
->组合选择器
-> 多条件选择器(组合、复合)
$('#id,target,.className')
-> 标签+类选择器：
$('target.className')
->复合选择器
-> 层次选择器
-> 后代选择器 $("祖代 后代")
-> 子代选择器 $("父代>子代")
-> 紧随选择器 $("前一个+后一个")指定位置的固定下一个
ps：紧随的元素(任意) $("前+*")
-> 向后选择器 $("前~后")指定位置的固定兄弟元素
ps：$(前~*)指定位置的任意兄弟元素
->代替的方法(所有的替代方法会破坏链式编程的链)
-> 紧随选择器同义的方法 $(前).next(选择器)或$(前).next()
-> 向后的同义方法 $(前).nextAll(选择器)或$(前).nextAll()不填参数表示任意
-> 向前选择方法(向前的没有选择器用方法代替)
$(指定位置的选择器).prev()与prevAll()——填入选择器表示指定，否则为任意
可以叠加使用——prev().prev()表示前面的前面
-> 反选方法 $(指定位置的选择器).siblings();
8、链式编程
例：
一般做法
//获得元素添加样式
var $div = $("#dv");
#div.css({ border: "1px solid red", backgroundColor: "pink", width: "400px", height: "200px"});
//获得元素添加html文本
$div.html('<p>测试<span id="span">特殊字体</span>文本</p>');
链式编程做法：
$("#dv").css({
border:"1px solid red",
backgroundColor:"pink",
width:"400px",
height:"200px"
}).html('<p>测试<span id="span">特殊字体</span>文本</p>');
9、方法会破坏链与链的恢复
** -> 破坏
使用选择器的替代方法(next、nextAll、prev、prevAll、siblings)时，返回的值已经不在是所有的元素了
，返回的已经是一条新的链了。所以破坏了原先的链
-> 恢复
使用end()方法来恢复链,可以通过链式编程多次使用，来达到多次恢复链的效果
注：恢复链只能恢复最近一次被破坏的链**
10、判断页面中的元素是否存在
在DOM中元素不存在会报错，但是在JQ中就算元素不存在也不会报错
所以我们要用他的Length来判断是否存在
值大于1 存在 否则 不存在
11、处理类样式
元素.hasClass("类名") 判断是否有该类样式
元素.addClass() 添加类样式
元素.removeClass() 移除类样式
元素.toggleClass() 开关类样式
ps：如果有这个样式就移除，如果没有这个样式就添加
12、过滤器
-> 基本过滤器 ":标记"
:first 第一个
:last 最后一个
:eq(索引) 从0开始的索引
:even() 偶数
:odd() 奇数
:gt(索引) greater than
:lt(索引) less than
:not(selector) 否定,不能连在一起用，没有选择器表是全不是
-> 直接获得元素
:header 获得所有的h标签
:focus 获得有焦点的元素 注：先用DOM的方法来为文本框获得焦点
:animated(学了动画才教)
-> 方法：
first() 第一个
last() 最后一个
ps:过滤器使用后还可继续过滤，每次都用上一次过滤的结果
-> 筛选范围
过滤选择器放在选择器后面或其他过滤选择器的后面执行的时候，每次都是用上一次的筛选结果进行筛选
一般考虑范围的时候，先写大的范围，在写小的范围(用gt()、lt())
$("div>a:lt(6):gt(1)").css("color", "red");——将索引号在 2-5 之间的a标签添加样式
另一种写法
$("div>a:not(:lt(2)):lt(4)").css("color", "green");
-> 相对定位，在某个范围内找特定内容
$(”p", this)表示在当前下找p标签
第二个参数可以是DOM对象，jQuery对象，甚至是选择器
$(this).siblings('tr').filter('td')当前行的兄弟中的td元素
-> filter与find是筛选的方法
-> filter
filter在已经选择的元素中过滤出元素，与过滤器相似
$(选择器).filter(选择器或过滤器) 前提要前面有要被筛选的元素
filter进一步筛选指定的元素
-> find
find在已经选择的元素下找指定的元素（只能查找子元素）
-> 属性过滤器
用处：判断是否具有某些属性，及属性值
语法： $("选择器:过滤器[属性名]")
$("选择器:过滤器[属性名=值]")
-> 多个属性过滤器写在一起可以同时过滤
-> 其他语法
[属性] 表示包含属性
[属性=值] 表示指定属性与值
[属性*=值] 表示属性值中包含某值
[属性^=值] 表示属性值以某值开头
[属性$=值] 表示属性值以某值结尾
ps：
专门针对比较复杂的属性
[属性|=值]
表示属性值以某字符开头的单词(class中不能以空格隔开)，规则就是这个字符后面要跟-(以-连起来)
有的网站使用骆驼命名规则，有的使用下划线，有的使用连字符
leftImg left_img left-img
[属性~=值] 属性中多个用空格隔开的值
-> 可以替换getElementsByName方法
document.getElementsByName("targName");
相当与属性选择器中的[name=targName]
-> 表单对象选择器
-> $("#form1 :enabled")——注：在这边要加空格才能表示是form中的子元素，不加空格就是指form自己了
选取id为form1的表单中所有启用的元素
-> $("#form2 :disabled")
选定禁用的元素
-> $(“input:checked”)
选取所有选中的元素，在IE9+和其他浏览器中会得到select标签的元素
-> $("select:selected")
选取所有的下拉列表
-> 表单的简写形式
$("#dv input[type=button]")
==
$("#dv :button")
-> 其它过滤器
-> 显示与隐藏
:visible 过滤器将页面中可以看见的元素获得
例：$(":visible").val("可见的元素");
:hidden 获得页面中所有的隐藏元素，包括head title style script
例：alert($("body :hidden").val());
注：$("body :hidden")获得的元素是指隐藏了看不见，又不占位置的元素
而opacity:0 是指全透明 看不见但是占位置
visibility:hidden; 也是看不见但是占位置
display:none;是看不见又不占位置，所以获得到
ps：出现隐私迭代
$("body :visible").siblings();
出现隐式迭代
siblings() 是指除了自身外的所有元素
可以对于两个可视元素来说
他们自身除外就是另外两个，综合一下三个都有 所以会出现三个都有的情况
-> 内容过滤
:contains(包含的内容) 是否包含什么
例：$("div:contains(2)").css("color", "red");
:empty 是否为空
例：$("div:empty").css({width:"200px", height:"100px", backgroundColor:"red"});
判断div元素中是否包含p元素
例：$("div:has(p)").css({width:"200px", height:"100px", backgroundColor:"red"});
该元素是否可以为父元素
例：$("div:parent").css({width:"200px", height:"100px", border:"10px solid red"})
-> 子元素过滤器
:first 在前面已经得到的元素中进行过滤
例：$("div:first").css({border:"1px solid red", margin:"5px"});
:eq() 索引从0开始
例：$("div:eq(3)").css({border:"1px solid red", margin:"5px"});
将页面的元素变成一个按照从上至下找到的有序的数组(子元素中的元素也算)
:first-child 获得每一个div的第一个div
:last-child
例：$("div:first-child").css({border: "1px solid red", margin:"10px"});
例：$("div:last-child").css({border: "1px solid red", margin:"10px"});
:nth-child 获得块级的div
例：$("div:nth-child(2)").css({ border: "1px solid red", margin: "5px" });
保留元素的层次结构，在每一个层次当中都运用该结果
nth-child()中的取值，都是n的整数倍 2n 2 4 6 8 10 ...
2n+1 3 5 7 9 11 ...
这个子元素编号是从1开始
.children() 从div元素中获得子元素有使用.c(或者用id)的子元素
例：$("div").children(".c").css("color", "red");
13、jQuery的DOM操作
-> html() innerHTML
-> text() innerText
-> attr() getAttribute、setAttribute
以上的在7中
-> removeAttr() // attr(属性, "");
例：$(":button").click(function(){
//$("#dv").removeAttr("class");
$("#dv").attr("class", "");
})
14、动态创建DOM节点
-> 创建使用：
创建元素就是将html代码写在$('')中——$(html字符串)
-> 追加：
父节点.append(dom);
dom.appendTo(父节点); // 选择器
-> 其他追加方法
-> 子元素.appendTo(父元素) 插到最后面
-> 子元素.prependTo(父元素) 插到最前面
-> A.insertBefore(B) 将B插到A的前面
-> A.insertAfter(B) 将B插到A的后面
-> 删除节点
暴力清除，但是如果有事件就不行
$("div").html("");
-> empty()
例：$("#dv>:eq(1)").empty();
-> remove()
remove(selector) 对对象集进行删除
例：$("div").remove(); 没有参数全删，有选择器进行过滤
$("div").remove(".c"); 删除掉指定的元素
—> 克隆
元素.clone() 参数true连同事件等一并克隆过去
元素.clone().appendTo(父节点);
15、动画(一般用在列表)
注:使列表实现隐藏与出现的另一个方法
用toggleClass(类名)———来开关一个类即可
类：.c{display:none;}
hide(毫秒) 隐藏
show() 显示
fadeOut() 淡出
fadeIn() 淡入
slideUp() 卷起
slideDown() 卷落
ps：复杂的动画会将上面的方法结合使用
例：$(this).next().hide(1000).fadeIn(1000).slideUp(1000);
16、JQ中的事件对象
-> 注册事件bind方法
$(选择器或过滤器).bind("事件的类型", 回调函数);
例：$("#btn").bind("mouseover", function(){
alert("123");
});
-> 移除事件unbind方法 // 不传参清空事件
元素.unbind("事件名"); // 取消事件时会将该事件的事件链均移除
元素.unbind("事件", 方法名); 可以执行移除事件
-> hover方法
元素.hover(func_over, func_out); // 其中使用enter与leave事件
鼠标进来执行第一个函数，离开执行第二个函数
-> toggle方法
为元素添加方法，toggle是一个方法序列
元素.toggle(func1,func2,...);
会对toggle中的函数进行循环的执行
-> 如何获得事件对象
在方法中传参e
$("#dv1").mousemove(function(e) { document.title = e.pageX+",”+e.pageY; });
-> 获取事件源 e.target
-> 取消事件冒泡 e.stopPropagation();
-> 阻止事件执行 e.preventDefault();
17、事件的其他内容(事件对象)
-> e.which 获得鼠标按键
-> e.keyCode 键盘码
-> e.type 事件类型
-> altKey、shiftKey、ctrlKey 功能键