1、选择器 $() -- 基于 CSS + XPath 的选择器语法
I、基本选择器
元素 | ID | Class - 替代JS的3种 getElement;可以 有多层
$("div p #id") -- div 元素 子元素为p
II、属性选择器
$("[属性]")
属性选择器支持 属性 | 判断属性值 = != | 属性值 | ^ $ 开头和结尾 | 包含 *=
$("[href$='.jp']") -- 选择 href 属性以.jpg结尾的元素
III、DOM （层级） 选择器
祖先: parent | parents | parentUtil
后代: children | find | each(公共方法，用于遍历迭代数组、对象)
兄弟：sublings | next nextAll nextUntil | prev prevAll prevUntil
IV、伪类选择器 -- 这些伪类基本都是CSS支持的
A、后代
基于任意位置 :first-child :first-of-type | :last-child :last-of-type | :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n)
基于数目 :only-child :only-of-type
这些选择器有两种使用方式：
a、直接使用 :first-child 表明是第一个元素；第一个类型（只要类型发生切换后，出现新的类型也是第一个类型）
b、指定元素 p:first-child 指定元素后，就要找 第一个元素 = p 的；第一个 类型 = p的（由直接使用可以看到，第一个类型=p的，并不限定子元素出现的位置，只要是 父元素的第一个类型=p的子元素即可。
B、自身位置
自身在父节点的位置 :eq | :gt | :lt
选取元素的 :first | :last | :even | :odd (也有一些对应方法)
C、逻辑判断（内容选择）
:not(selector) | :empty | :contains | :has
:parent
D、表单元素选择
根据type="" 类型来选择
:input | :text | :password | :radio | :checkbox | :submit | :button | :reset | :image | :file
根据状态 来选择
:enabled | :disabled | :checked | :selected
2、过滤器 (filter)
I、过滤器 -- 基于选择器选择后，再通过方法进行过滤
位置： first | last
逻辑： eq | not | filter
$("div p").filter("#id1); -- 选出div 子元素中，id为 id1 的元素
II、过滤样式 -- 基于CSS 样式，筛选选择器内容，主要用在DOM和过滤器 方法参数中
$("div").parents(".class1") -- 选出祖先元素中 ，class 为 class1 的元素
选择器 + 过滤器 = 选出需要的元素；所以很多选择器的用法，同样适用在过滤器，特别是伪类部分，比如 状态（可见性）；内容选择（自身位置）；表单元素选择；还有 父子层次 元素叠加 ("div p") (div>p) (div+p) (div~p)
选择器和过滤器基本上最终目的途径是差不多
3、DOM 操作
I、节点内容操作 getter/setter - 和js操作是一样的逻辑
提供4个方法可以获取元素的内容/属性/ 以及表单用户输入的内容 ：text | html | val | attr
无参方法是 获取内容；有参方法是设置值
设置值内容，有两种方法：1 键值 - 对 & 键值对对象； 2、通过 callback 回调函数返回值设置 - callback 可选的参数是 (i, origValue) 当前元素索引和 原先的旧值。
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
II、新增/删除节点
append prepend | before after -- 替代了JS的appendChild /nsertBefore
这两组的区别是，如果可以包含子元素的，则 append 是追加子元素；如果不不能包含的两者意思差不多
这两组组方法，都可以接收 可变参数，支持多个 元素同时增加
function appendText(){
var txt1="
文本1。
"; // 使用 HTML 标签创建文本
var txt2=$("").text("文本2。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本3。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
remove -- 包含自身和子元素都删除 | empty -- 只清空子元素 -- 替代了JS的removeChild 等方法
如果选择器选中的 元素很多是个列表，则 remove 方法可以通过 参数来过滤 （同样是选择），比如 id，class
III、样式操作
addClass -- 增加，可以批量增加，空格分隔 | removeClass -- 删除 | toggleClass -- 替代了JS的className
css() -- 不带参数是获取；可以指定 key - value 两个参数；也可以是 多个key-value参数的对象 -- 替代了JS的style属性
除了通过 css 来设置尺寸外，jQuery 提供了 6组方法来获取设置尺寸，好处是避免了 同css 盒子模型 逐个去设置和计算
width | height | innerWidth | innerHeight | outerWidth | outerHeight | offset
4、事件
基本覆盖了 JS的几大事件种类 键盘、鼠标、浏览器、表单；在JS的事件基础上去掉 on，比如onclick 编程click
I、常用事件
$(document).ready
$("p").click / dbclick
mouseenter/mouseover/mousemove/mouseleave/mousedown/mouseup
hover(= mouseenter + mouseleave)
focus/blur/change/select/submit
scorll
jQuery的事件基本都是基于 DOM level2 的；所以，同一个click 可以编写、调用多次，相当于多次注册；
这些事件都是 省略的事件;
II、实际中的事件模型有两种：冒泡 和 捕获；
冒泡：点击元素后，事件不断向上传递，直到 document IE标准
捕获：点击元素后，从父节点不断递归到 ，子元素 其他标准
jQuery 因为要支持IE， 默认使用了 冒泡的事件传递 模型；
on/bind(绑定方法）/live(并没有直接绑定,而是绑定到document,由document分发到指定选择元素)/delegate(和live方法类似，不过是绑定到唯一的父元素，然后再分发） -- on是最终方法，支持live和bind、delegate的所有功能
off/unbind/undelegate -- 与on 类似
$(selector).on(event,childSelector,data,function,map)
$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
click:function(){$("body").css("background-color","yellow");}
});
});
通过on可以注册多个事件，可以指定子选择器派发事件，还可以在事件基础上绑定数据
如何选择 通用事件模型 on 还是常用的简化事件？
a、如果能唯一选择到一个元素、事件是单一的，那就使用简化事件、处理很清晰。
b、如果选择了多个元素使用相同的事件（比如多个button响应相同的事件）、或者有多个类似事件不同元素可以派发，使用简化事件需要逐个事件调用addEventListerner(handler)，效率非常低；使用 通用事件模型
c、还有几种情况，新增元素（还未插入），绑定事件；特别是自定义事件
冒泡的副作用及解决？
如果绑定了上层元素的一个事件，但底层元素相同事件发生时，会冒泡到上层，结果上层触发了该事件；比如mouseout事件，jQuery在处理时，对事件进行了判断，通过event.realtedTarget 进行判断，只有真的移出注册的元素，才执行事件。具体可以参见 JS 总结的target部分。mouseenter和mouseleave替换 mouseover和mouseout
III、自定义事件
这个事件模型最大的作用就是可以自定义事件，这样用户可以在控件开发时，极大丰富了模型
$().trigger 触发事件
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});
5、动画效果
基本所有的动画效果，都提供无参的默认操作；有参的 (speed ,callback) 操作，可以在样式后执行回调；speed可以是毫秒，也可以是 slow/fast/normal 等描述
I、隐藏/显示
hide / show / toggle
II、淡入/淡出
fadeIn / fadeOut / fadeToggle / fadeTo - 固定渐变 透明度
III、滑动
slideDown / slideUp / slideToggle
IV、动画 - 自定义效果
动画效果，完全是基于 CSS3 的动画功能来设置;从当前状态 过渡 到 一个新的 位置
$(selector).animate({params},speed,callback);
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
可以操作绝对值|相对值| 属性(show|hide|toggle) |
虽然，annimate 可以操作所有 CSS 属性，不过不支持 - 分隔符：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等
jQuery 还可以把多个动画排在队列中，按顺序执行
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
V、停止
$().stop(stopAll, goToEnd)
stop方法可以停止 该元素的一些动画效果（淡入淡出、滑动、自定义动画）
stopAll 参数，是如果有队列停止 所有队列中的动画
goToEnd 参数，当前动画是否立即万恒
VI、chaing技术 （就是把多个方法串联起来执行、JS、Scala很多都可以）
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
实现逻辑并不复杂，应该是每个方法返回值就是 this 这个元素本身，所以可以逐级调用；PS：注意如果是 不带参数，获取值的方法，估计就不能使用了
6、Ajax
I、基线方法 $.ajax(); -- 可以发送任何HTTP请求
$.ajax({
url:
cache:
dataType:
success: function(xml){
}
});
II、其他常用方法
($.) get/getJSON/getScript/post/load
-- 返回一些特定类型数据，这些可以通过 ajax 方法之后处理实现
III、附带方法
$.param - 提供 URL 查询字符串(index.htm?id=1) 这种查询串
$.ajaxComplete / $.ajaxError / $.ajaxSend / $.ajaxStart / $.ajaxStop / $.ajaxSuccess 都是ajax发送、运行时、执行的回调通过，通过这些方法，把回调函数绑定到某个阶段
7、工具函数
I、对象、数组常用函数
$.inArray （类似indexOf） | $.isArray | $.isEmptyObject | $.isFunction | $.makeArray | $.map (类似 map） | $merge (类似concat） | $.each(遍历数组和对象，前面选择器提到过) | $.extend(合并对象) | $.grep (类似filter) | $.type 对象类型 | $.uniqueSort （类似 sort）
II、字符串和数字操作
$.isNumberic | $.parseHTML | $.parseJSON | $.parseXML | $.trim
III、Dom相关
$.contains 判断一个元素是否是另一个元素的后代 | $.data 元素绑定的数据 | $.hasData
IV、插件编写
$.fn.extend -- 为jQuery框架编写新的方法(插件）
$(function () {
$.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});
// 使用新创建的.check() 方法
$( "input[type='checkbox']" ).check();
})
V、杂项
$.conflict -- 关键字切换
$.now() -- 当前时间
$.noop -- 空函数，可以提供一些需要 回调函数的方法使用
网友评论