JQuery 入门介绍

Jquery:一个javascript库，第三方开发的，极简化的DOM操作的函数库

Js:ECMAscript,BOM,DOMJq:把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版帮助手册