jQuery基础知识

》》》jQuery选择器《《《《《

jQuery选择器（对比css选择器): 基础选择器//伪类选择器

css选择器----> $(" ") --->$(" ") jq选择器

基础选择器：

基本选择器：元素选择器、id选择器、class选择器、群组选择器、*选择器

元素选择器：选择相同的元素，而后对相同的元素进行操做

语法：$("元素名") 代码：$(function(){ 代码块 }) 这个代码相似于js中window.onload=function(){}，也就是文档加载文成后执行的代码块 补充：css是“对象的一个方法”,能够用点运算符来代替，例如$("div").css()

id选择器：语法：$("#id名") id名字前面必需要加上#

class选择器：语法：$(".类名") class名字前必需要加上.

群组选择器：语法：$("选择器1,选择器2,选择器3")

选择器(全选择器)：{margin:0;padding:0);选择全部元素

层次选择器:父子、后代、兄弟、相邻

$("M N") 后代选择器 选取M元素内部后代N元素 $("M>N") 子代选择器 选取M元素中全部第一级子代N元素 $("M~N") 兄弟选择器 ===$("M元素).nextAll() $("M+N") 相邻选择器 ===$("M元素).next()

区别： 后代选择器选取的是元素内部全部的后代元素 子代选择器选取的是元素内部的子元素;

技巧：在连li元素之间添加一个边框的效果 $("li+li").css("attr","value")

属性选择器

$("selector[attr]") 选取包含特定属性的元素 $("selector[attr='value']") 选取包含特定属性值的元素 $("selector[attr!='value']") 选取不包含某特定属性值的元素 $("selector[attr*='value']") 选取给定属性以包含某些值的元素 $("selector[attr^='value']") 选取给定属性以某些值开头的元素（较少用) $("selector[attr$='value']") 选取给定属性以某些值结束的元素（较少用) $("selector[selector1][selector2]...)" 复合属性选择器

实例: $("div[class]") $("input[type='checkbox']") $("input[type!='checkbox']")

$("div[calss *= 'nav']") 选择class属性包含nav的div元素

$("input[name^='group']") $("input[name $='group']")

$("div[id][class ^='lyve]") 选取有id属性，且class属性以lyve开头的div元素

伪类选择器（以:开头) 包含：简单伪类选择器、子元素伪类选择器、可见性伪类选择器、内容伪类选择器、表单伪类选择器、表单属性伪类选择器 ，

简单伪类选择器： :not(selector) 选取某选择器以外的元素 :first/first() 选取某元素的第一个元素 :last/last() 选取某元素的最后一个元素 :odd 选取索引值为奇数的元素 :even 选取索引值为偶数的元素 :eq(index) 选取某个给定索引值的元素 :lt(index) 选取小于某个索引值的元素 :gt(index) 选取大于某个索引值的元素 :header 选取h1-h6的标题元素 :animated 选取全部正在执行动画效果的元素 :root 选取页面的根元素//少用 :target 选取当前活动的目标元素(锚点)//少用

子元素伪类选择器

第一类：不区分类型 :first-child 选择父元素的第1个子元素 :last-child 选择父元素的最后1个子元素 :nth-child(“整数|odd|even”) 选择父元素下的第n个元素或奇偶元素 :only-child 选择父元素中惟一的子元素

第二类：区分类型 :first-of-type 选择同元素类型的第1个同级兄弟元素 :last-of-type 选择同元素类型的最后1个同级兄弟元素 :nth-of-type 选择同元素类型的第n个同级兄弟元素，n的值能够是“整数|odd|even” :only-of-type 匹配父元素中特定类型的惟一子元素（可是父元素能够有多个子元素）

可见性伪类选择器 :hidden （display:none+type="hidden"+visiblity:hidden :visible //定义鼠标单击事件 代码：$(#btn).click(function(){ //鼠标事件的内容 });

内容选择器 :contains(text) 选择包含给定文本内容的元素 :has(selector) 选择含有选择器所匹配元素的元素 :empty :parent 选择含有子元素或者文本的元素（跟:empty相反）

表单伪类选择器 :input 选择全部input元素 :button 选择全部普通按钮，即type="button"的input元素 :submit 选择全部提交按钮，即type="submit"的input元素 :reset 选择全部重置按钮，即type="reset"的input元素 :text 选择全部单行文本框 :textarea 选择全部多行文本框 :password 选择全部密码文本框 :radio 选择全部单选按钮 :checkbox 选择全部复选框 :image 选择全部图像域 :hidden 选择全部隐藏域 :file 选择全部文件域

表单属性伪类选择器

:checked 选择全部被选中的表单元素，通常用于radio和checkbox option:selected 选择全部被选中的option元素 :enabled 选择全部可用元素，通常用于input、select和textarea :disabled 选择全部不可用元素，通常用于input、select和textarea :read-only 选择全部只读元素，通常用于input和textarea :focus 选择得到焦点的元素，经常使用于input和textarea

》》》》元素操做《《《《《 对于元素的操做分为3个方面：属性操做，内容操做，样式操做

属性操做：获取、设置、删除

获取：$().attr("属性名") 设置：$().attr("属性名","属性值") 删除：$().removeAttr()

!!注意：此外在jQuery中，除了可使用attr()方法来操做元素的属性以外，还可使用prop()方法。prop()方法和attr()方法语法相同，其中prop()用于获取和设置元素属性，removeProp()用于删除元素的属性。

其中attr()方法用于操做元素的固有属性，所谓的“固有属性”指的是元素自己具备的属性如a标签的href、target、title等。而prop()方法用于操做元素的自定义属性，所谓的“自定义属性”指的是用户本身定义的一些属性。

内容操做：获取内容html()/text() 获取表单元素的内容（值)val() 获取元素内容:$().html()/$().text() 获取表单的值:$().val()

样式操做:css属性操做//css类名操做

css属性操做: 获取： $().css("属性") 设置：单个属性设置：$().css("属性","属性值") 多个属性设置: $().css({"属性1":"属性值1","属性2":"属性值2",……})

css类名操做: 添加：$().addClass("类名") 删除：$().removeClass("类名") 切换： $().toggleClass("类名")

盒子模型的宽度和高度（均不带px,是纯数字！！！） 宽度： width() width 只有它能用于window或者document对象 innerWidth() width+padding outerWidth() width+padding+border

高度： height() height() innerHeight() height+padding outerHeight() height+padding+border

盒子模型的位置:offset()和positon()

offset() 元素相对于document的偏移距离 语法：不带单位！！ $().offset() 返回坐标对象，（top,left) $().offset().top 返回元素至关于文档顶部的距离 $().offset().left 返回元素至关于文档左边的距离

position 元素相对于其被定位的祖辈元素的偏移距离 语法：不带单位！！ $().position() $().position().top $().position().left

父元素position:relative 子元素position:absolute

滚动条的距离：scrollTop()和scrollLeft() scrollTop:元素相对于垂直滚动条顶部的距离 语法： $().scrollTop()

scrollLeft:元素相对于水平滚动条左边的距离 语法：$().scorllLeft()

DOM操做***

常见DOM操做：建立节点//插入节点//删除节点//复制节点//替换节点//包裹节点//遍历节点

建立节点 语法：var e=$(html); $().append(e); // var $li="<li></li>"; $().append($li);

!!在建立复杂节点时，因为复杂节点的属性与属性值之间必须用""，最外面必须用''来表示

插入节点 备注：在js中，插入节点只有appendChild()和insertBefore()两种，而jQuery中提供了大量的方法

内部插入节点:末尾：append()和appendTo(); 开始： prepend()和prependTo(); 语法：$(A).append(B）; 在A的内部的末尾加入B $(B).appentTo(A) 效果同上

外部插入节点:before()和insertBefore(); after()和insertAfter(); 语法： $(a).before(b) 在a的外部以前加入元素b

删除节点 remove()方法；detach()方法；empty()方法

$(a).remove()删除节点 （虽然节点被删除了，可是还能够经过返回值来再次使用这个对象) $(b).detach()半删除节点 （只删除元素，元素绑定的事件并不会删除） $(c).empty() 保留自身节点，删除后代节点

复制节点 语法：$(a).clone()默认false $(a).clone(false) 复制a节点，但不复制a节点所绑定的事件 $(a).clone(ture) 复制a节点，而且复制事件

替换节点（元素被替换后，其说绑定的事件会消失) $(a).replaceWith(b) 用b来替换a $(a).replaceAll(b) 用a来替换b

包裹节点 $(a).wrap(b) 用a来包裹全部b进行单独包裹(做用于单独元素） $(a).wrapAll(b) 将全部匹配的元素b用一个元素来包裹（做用于元素总体) $(a).wrapInner(b) 将a元素全部内部子元素使用b元素包裹（不包含a自己) [与warp()效果同样，可是html结构不同] //$('p').unwarp()；删除p元素的父元素，保留自身以及兄弟元素

遍历节点 语法：$().each(function(index,elements){ this-->elements }) 只遍历儿子级别元素 $("div").children() 遍历全部后代元素 $("div").find("li") 查找父级元素 $("ul").parent() 查找第一个符合条件的祖先元素 $("div").closest() 查找下一个兄弟元素 $("div").next() 查找前一个兄弟元素 $("div").prev() 查找全部的兄弟元素 $("div").siblings()

add()是指在jquery对象集合中增长一个对象，而append()是在DOM集合中增长一个节点，add()不会直接影响界面，append()会对界面产生影响.

*jQuery事件简介 jQuery事件：页面载入事件、鼠标事件、键盘事件、表单事件、滚动事件、绑定事件、解绑事件、合成事件、一次事件

页面载入事件 js中的window.onload()方法，只有在元素加载完，以及该元素关联的文件加载完以后才能执行；如果页面中有多个window.onload(),浏览器只会执行最后一个（要实现多个wiondow.onload，须要使用addLoadEvent方法)

jq中的$().ready()方法，只要DOM元素加载完就能够执行(能够大幅提升页面的相应速度以及执行效率)

ready()方法的4种写法： 第一种：$(document).ready(function(){ 代码内容 })

第二种： jQuery(document).ready(function(){ 代码内容 }) 第三种 $(function(){ 代码内容 }) 第四种 jQuery(function(){ 代码部分 })

鼠标事件 click(单机)//dbclick(双击)//mouseover(移入）//mouseout（移出)//mousedown(按下）//mouseup（松开)//mousemove(鼠标移动)

语法: $().鼠标事件(function(){ 代码块 })

mouseover mouseout 鼠标在接触/移除所选元素及其后代子元素时都会触发事件

mouseenter mouseleave 鼠标在只接触/移出所选元素时才会触发事件

键盘事件 keypress//keydown//keyup

补充：String.fromCharCode() 表示将ASCII码转换为字符

keypress只有在按下字符键时触发 keydowm 按下任意键都会触发

表单事件 focus()得到焦点 // blur()失去焦点

focusin()和focusout()支持冒泡排序，而focus()和blur()不支持

change()事件

select事件（只能用于<input>和<textarea>这两个元素）

submit()事件

具备得到焦点+失去焦点事件+change事件的元素有3个：text//textarea//select 下拉列表中列表项的选中事件是change而不是select

滚动事件 语法：$().scroll(fn) 滚动事件经常和scrollTop()和scrollLeft()这两个方法一块儿使用，在滚动条的位置发生变化时，触发相应的事件

绑定事件 on()方法 语法：$().on(type,fn) type是必选参数，表示事件类型，type是一个字符串 fn必选，表示事件的处理函数

一、在jQuery中绑定事件不是还有bind()和live()么？为何站长不给咱们详细讲解一下？

从jQuery1.7开始（咱们如今用的是jQuery1.12.0），对于绑定事件，jQuery官方都建议使用on()方法来统一取代之前的bind()、live()和delegate()；对于解绑事件，jQuery官方也建议使用off()方法来统一取代之前的unbind()、die()和undelegate()。所以，你们必须了解和清楚这一点。

解绑事件 off( ) 语法：$().off(type)

合成事件$().hover(f1,f2) 语法：$("#wrapper").hover(function () { //第1个function的内容 }, function () { //第2个function的内容 })

一次性事件one() 语法： $().(type,fn)

事件对象event event.type 事件类型 event.pageX event.pageY 鼠标对于当前页面的坐标 event.preventDefault() 阻止默认行为 event.stopPropagation()阻止事件冒泡 event.which 获取用户单击鼠标时，单击的是鼠标的哪一个按键 event.currentTarget 在事件冒泡过程当中的当前DOM元素

this 和event.target的区别：js中事件是会冒泡的，因此this是能够变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

this和event.target都是dom对象：若是要使用jquey中的方法能够将他们转换为jquery对象。好比this和$(this)的使用、event.target和$(event.target)的使用；

自定义事件 trigger事件：根据绑定到的匹配元素的给定的事件(原生或者自定义均可以)类型执行全部的处理程序和行为 语法： $('#elem').on('Aaron', function(event,arg1,arg2) { alert("自触自定义时间") }); $('#elem').trigger('Aaron',['参数1','参数2'])

.trigger()方法会影响全部与jquery对象所匹配的元素，使得DOM元素向上冒泡 要想阻止冒泡，可使用.triggerHandler()方法

》》》》》jQuery动画基础《《《《《《

显示和隐藏（切换)：改变height、width和opacity属性

语法：$().show(speed,callback) 显示 speed必选，表示动画执行速度，单位毫秒；callback为必选参数 $().hide() 隐藏 $().toggle(speed,callback) 切换元素的显示状态

淡入和淡出：改变opacity属性 语法： $().fadeIn(speed,callback) 淡入 $().fadeOut(speed,callback) 淡出 $().fadeToggle(speed)切换
$().fadeTo(speed,opacity,callback) 淡出效果 opacity必选，speed和callback为可选参数 d

滑上和滑下:

语法：$().slideUp(speed,callback) 实现元素的滑上效果 $().slideDown(speed,callback) 滑下 $().slideToggle(speed,callback) 切换滑动状态，配合flag一块儿使用

自定义动画 animate()方法 语法：$().animate(params, speed, callback) params是必选参数，是“属性：值”列表 speed 可选参数 callback可选

!!注意 1.使用animate()方法改变颜色相关属性时，须要调用jquery.color.js

2.在属性值前面加上"+="表示累加（在原有属性值的基础上添加)

3.在animate方法中添加css后，css会马上执行，正确的方法是将css放入在回调函数中

队列动画（链式效果) 语法: $().animate().animate()....

中止动画效果: 语法:$().stop(clearQueue,gotoEnd)说明clearQueue是可选参数，表示是否要清空未执行的动画队列，默认false；gotdEnd表示是否将正在执行的动画跳转到末尾状态，默认false

几种状况： stop() 仅中止当前动画，后面的动画能够继续执行 stop(true) 中止全部动画，包括当前执行的动画 stop(true,true) 中止全部动画，但容许执行当前动画 stop(false,true)中止当前动画，直接跳到最后一个动画

延迟动画效果: 语法： $().delay(speed）

判断动画状态 语法: if(!$().is(":animated")) { //若是当前没有进行动画，则添加新动画 }

补充： 1.判断元素是否在数组中:inArray(value,array,[fromIndex]) 2.去除空格 $.trim(元素) 3.获取某个元素 .get(index) 4.获取元素对象的索引 .index(selector/element) 注意：$().index() 返回的是同辈元素的排列顺序

》》》》》》jQuery过滤和查找方法《《《 过滤方法：以方法的形式选择某些元素

hasClass() 判断是否含有某个类 true/false eq(n) 选择指定下标的元素 is() 判断元素是否符合某个条件 true/false not() 选择不符合条件的元素 filter() “自定义表达式”来选择符合条件的元素 has() “自定义表达式”选择符合条件的元素

查找方法： 查找祖先元素： 父元素：parent(惟一) 祖先元素：parents(多个) 指定范围:parentUntil（）

查找后代元素： 一级子元素：children(expression) 子元素+节点注释(contents) find()找到指定后辈元素

向前查找兄弟元素： prev();prevAll();prevUntil() 向后查找兄弟元素： next();nextAll();nextUntil() 查找全部兄弟元素：siblings() 查找全部兄弟元素：