JQuery 入门介绍

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自带遍历:
对jQ
4000
uery对象调用的修改，会自动应用到集合中每个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版帮助手册