Jquery:一个javascript库,第三方开发的,极简化的DOM操作的函数库
Js:ECMAscript,BOM,DOM
Jq:把BOM和DOM的部分给封装起来
理念:write less,do more
引入:<script src=”jqxxx.js”></script>
JQ来源JS,但是超越JS,如事件处理方面
Jquery的内容主要有:选择器、增删改查、事件、动画、Ajax
选择器
所有的元素都要加引号:$(“input”).click(function (){});
jq的选择器是在css选择器的基础上再进行拓展
基础选择器:元素选择器、id选择器、类选择器
层级选择器:兄弟选择器、后代选择器
子元素选择器:伪类选择器
type阵营和chile阵营
:first-child :first-of-type :查找第一个子元素
:last-child :last-of-type:查找最后一个子元素
:nth-child(n) :nth-of-type(n) 查找第n个子元素
:nth-last-child(n) :nth-last-of-type(n)查找倒数第n个子元素
基本选择器:先把元素放入到结果集合,再取相应元素
:first:第一个子元素(仅第一个)
:last:最后一个子元素
:even:下标偶数的元素(下标0开始)
:odd:下标奇数的元素
:eq(index):指定索引位置的元素
:gt(index):查找大于index索引的元素
:lt(index):查找小于索引位置的元素
:header:查找h标签元素
:not(select):表示选择除了select之外的元素
内容选择器:
:contains(“text”):匹配含有text内容的元素
:empty:匹配内容为空的元素
:has(selecter):选择包含selseter选择器的父元素
:parent:选择作为父元素的元素(子元素可以是文字)
:contains(text) 选择内容中包含指定文本的父元素
表单元素选择器:
:input 选择所有表单元素(input select textarea button)
:[type] 按type属性查找:
比如: :text :password :checkbox :radio :submit
:reset :button :hidden :file :image
过滤选择器:
状态过滤: (基本上都是判断表单元素状态的)
:enabled
:disabled
:checked
:selected
可见性过滤:
:visible 所有不可见的元素
:hidden 只能选择dispaly为none的和input type=hidden的
属性选择器:详见css属性选择器
[属性名]: 选择包含指定属性的元素
[属性名=值]: 选择包含指定属性且属性值为指定值的元素
[属性名^=值]: 以值开头
[属性名$=值]: 以值结尾
[属性名*=值]: 包含值
[属性名!=值]: ==> :not([属性名=值])
属性和方法操作
jQuery API使用:
1、都要使用工厂函数创建一个jQuery对象,2种:
1、直接用jQuery("selector")
查找符合selector要求的DOM元素,封装进jQuery对象中。
jQuery对象其实是一个封装DOM元素对象的类数组对象
原生的DOM元素不具有jQuery的简化版API。必须封装进jQuery对象,才能调用简化版API
2、如果已经获得一个DOM对象:
可用jQuery函数封装DOM对象为jQuery对象:
jQuery(DOM对象)
终极简化: 所有jQuery(...), 都可简化为$(...)
window.jQuery=window.$=jQuery;
2、调用jQuery对象的简化版API,操作DOM
$(...).addClass("..")
jQuery API通用规律::
1、所有API自带遍历:
对jQuery对象调用的修改,会自动应用到集合中每个DOM元素上
2、所有API都返回正在查询的结果集合,可使用链式操作对同一个结果集合执行多个操作。
3、一个API两用: 如果提供了新值,就修改。没提供新值就获取
修改: $(...).css(属性名,值)
获取: var value=$(...).css(属性名)
属性:attr,prop
使用:$(…).attr()
attr(attr,value):设置属性
attr({attr1:"value",attr2:"value"…}):设置多个属性
attr(attr,fn函数):通过函数的返回值设置value值
removeAttr(attr):删除属性
var attr = attr(attr):获取属性
attr并不能操作所有的元素属性,如checked,selected等状态属性,需要用prop代替attr来操作
$(input).prop("checked",true);
class:
addClass(classname):添加类
removeClass(classname):删除类
toggleClass(classname):切换类,如果没有,相当于添加类
hasClass(classname):判断是否具有某个class
样式:
$(...).css("css属性名",值):修改css属性的值 => elem.style.css属性
$(...).css("css属性名"):获取css属性的值 =>getComputedStyle(elem)
$(...).css({css属性1:值1,css属性2:值2,...:...}):同时修改多个css属性
html代码:
html():获取的是对象内的html代码 ==>(innerHTML)
html(代码):设置html的内容,识别标签
text():获取对象内的text内容(文本内容)==>(innerText)
text(代码):设置text内容,不识别标签
value值:
$(...).val(值):设置表单元素的value值
$(...).val():获取表单元素的value值
$(...).empty(): 清空元素的内容
对象访问:
Length:获取个数
size():获取个数
each:遍历,返回两个值,一个是元素索引,一个是元素
用法:元素.each(function(index,element){} (返回的值传递给function)
DOM:文档处理
查找:
1、父子:
$(child).parent():==> child.parentNode
获得parent下直接子元素中符合selector条件的:
$(parent).children([selector]):==> parent.children
获得parent下所有后代元素中符合selector条件的:
$(parent).find(selector)
$(parent).children().first():==> parent.firstChild
$(parent).children().last():==> parent.lastChild
2、兄弟:
$(...).next([selector]):==> +selector
$(...).nextAll([selector]):==> ~selector
$(...).prev([selector]): 选择当前元素的前一个
$(...).prevAll([selector]): 选择之前所有
$(...).siblings([selector]): 选择除自己之外前后所有
添加 :
1、内部插入:父子级关系
$(a).append($(b));把b插入到a中(下面)
$(b).appendTo($(a));把b插入到a中(下面)
$(a).prepend($(b));把b插入到a中(上面)
$(b).prependTo($(a));把b插入到a中(上面)
2、外部插入:兄弟级插入
$(a).after($(b));把b插入到a的后面;
$(b).insetAfter($(a));把b插入到a的后面;
$(a).before($(b));把b插入到a的下面;
$(b).insetBefore($(a));把b插入到a的下面;
替换:
$(a).replaceWidth($(b));用b替换a(包括a中所有内容)
$(b).replaceAll($(a));用b替换a(包括a中所有内容)
删除:
empty():删除内容
remove():删除整个元素标签
复制:
clone():复制一个元素
var $elem_copy=$(...).clone();
强调: 不带参数的clone方法,只能复制样式和属性,不会复制行为(事件)
既复制属性/样式,又复制行为: $(...).clone(true)
事件
基础事件
加载事件:$(document).ready(fn)
简写:$(function(){});
注意:JS:Window.onload=fn
JQ:$(document).ready(fn)
JS把页面上的DOM和资源加载完成之后执行
JQ把页面上的DOM加载完成之后就会执行
事件切换:$(selector).hover(悬浮fn,离开fn)
点击事件:$( selector).click(fn)
双击事件:$( selector).dblclick(fn)
获得焦点事件:$( selector).fucus(fn)
失去焦点事件:$( selector).blur(fn)
发生改变事件:$( selector).change(fn)
鼠标放上事件:$( selector).mouseover(fn)
$( selector).mouseenter(fn)
鼠标离开事件:$( selector).mouseout(fn)
$( selector).mouseleave(fn)
鼠标按下事件:$( selector).mousedown(fn)
鼠标抬起事件:$( selector).mouseup(fn)
鼠标移动事件:$( selector).mousemove(fn)
JS的事件都带有on,而JQ的事件都没有on
.mouseover/out vs .mouseenter/leave
.mouseover/out: 触发子元素的事件会冒泡到父元素
.mouseenter/leave: 触发子元素事件不会再冒泡到父元素
事件处理
事件绑定1:
$(...).bind(“事件”,fn):所有版本都支持
$(selector).bind(‘click’,function(){})
如果同时绑定多个事件:
$(...).bind(“事件”:fn,“事件”:fn….)
解除绑定:
$(...).unbind("事件名",fn) 移除元素上指定事件绑定的指定函数fn
$(...).unbind("事件名") 移除元素上指定事件绑定的所有函数
$(...).unbind() 移除元素上绑定的所有事件
事件绑定2:
$(...).on(“事件”,fn):支持1.7以上版本的JQ.js
$(...).on("事件名","selector",fn):向元素下的元素绑定事件
$(...).on("事件名","selector",data,fn):向元素下的元素绑定事件,并传递参数
解除绑定:
$(...).off(eve,[sel],[fn]):sel 与 fn 可选
$(...).off() 移除元素上绑定的所有事件
事件绑定3:
one(“事件”,fn):绑定事件处理函数后,只执行一次,就自动解绑
特殊的事件:
hover = mouseover+mouseout
只要同时响应mouseover和mouseout时,可简写:
$(...).hover(
function(){...mouseover...},
function(){...mouseout...}
);
更简化: 如果能够将两个函数统一为一个函数,则可省略第二个函数,表示无论over还是out都执行相同操作。
动画
1、简单动画: 3种固定效果:
1、显示/隐藏: $(...).show/hide/toggle();
问题:如果不给任何参数: display:none, 瞬间显示隐藏
解决: 指定参数: speed: 1. 三档(slow,normal,fast")2.指定值
2、上滑/下滑: $(...).slideUp/slideDown/slideToggle();
3、淡入/淡出: $(...).fadeIn/fadeOut/fadeToggle();
缺点: 效果写死在库函数中,无法维护!
解决:自定义 class+transition
所有动画API的最后一个参数,都可指定回调函数
$(...).show(speed, callback)
callback: 在动画结束后自动执行,this->当前元素
2、万能动画:
$(...).animate({//目标样式
css属性:值, css属性:值, ...
},speed,callback);
不足: 只能对单个数值的属性提供渐变
并发和排队:
并发: 所有属性同时改变
1、放在同一个animate中的多个css属性
2、不同元素上调用的animate是并发
排队: 每个属性先后变化
连续链式调用的多个animate的css属性是排队执行
停止动画:
$(...).stop(); stop()可以带参数true
不带参数只能停止队列中正在执行的一个动画,后续动画依然会执行
带参数:$(...).stop(true);停止当前动画,清空队列
想要了解更多jquery的api及用法,可以看帮助手册
1.11.3版帮助手册