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 表明是第一个元素;第一个类型(只要类型发生切换后,出现新的类型也是第一个类型)
$("div :first-child")
<div>
<p>
</div>
$("div :first-child-type")
<div>
<span> -- 可以选中
<p> -- 可以选中(因为类型不同)
</div>
b、指定元素 p:first-child 指定元素后,就要找 第一个元素 = p 的;第一个 类型 = p的(由直接使用可以看到,第一个类型=p的,并不限定子元素出现的位置,只要是 父元素的第一个类型=p的子元素即可。
$("div p:first-child")
<div>
<p> -- 选中
<p> -- 无法选中
</div>
$("div :first-child-type")
<div>
<span>
<p> -- 第一次出现可以选中
</div>
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="<p>文本1。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").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 -- 空函数,可以提供一些需要 回调函数的方法使用