jQuery基础运用

jQuery

jquery是一个快速，简洁的JavaScript库。jquery封装了JavaScript常用功能代码，优化了DOM操作，事件处理，动画设计和ajax交互。

优点：

• 轻量级
• 跨浏览器兼容
• 链式编程，隐式迭代
• 对事件，样式，动画支持，大大简化DOM操作
• 支持插件扩展开发，有着丰富的第三方插件
• 免费，开元

jQuery的基本使用

jQuery的入口函数

1语法：

$(function(){});

2语法：

$(document).ready(function(){});

1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装

2.相当于原生js中DOMcontentLoaded

3.不同于原生js中的load事件是等页面文档，外部js文件，css文件，图片加载完毕才执行内部代码

jQuery的顶级对象$

• $是jQuery的别称，在代码中可以使用jQuery代替$,但是一般为了方便，通常直接使用$

• $是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery方法

jQuery对象和DOM对象

1.用原生js获取来的对象就是DOM对象

2.用jQuery获取来的对象就是jQuery对象

3.jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

4.jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法

5.DOM对象于jQuery对象之间可以互相转化

因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转化为DOM对象才能使用。

• DOM对象转化为jQuery对象：$(DOM对象)
• jQuery对象转化为DOM对象：1.$（"对象"）[index];2.$(‘对象’).get(index) index是索引号

jQuery常用api

jQuery基础选择器

$(“选择器”) 里面选择器直接写CSS选择即可，但是要加引号

名称	用法	描述
ID选择器	$(’#id’)	获取指定id的元素
全选选择器	$(’*’)	匹配所有元素
类选择器	$(’.class’)	获取同一类class的元素
标签选择器	$(‘div’)	获取同一类标签的所有元素
并集选择器	$(‘div,p,li’)	选取多个元素
交集选择器	$(‘li.current’)	交集元素

层级选择器

名称	用法	描述
子代选择器	$(‘ul>li’)	使用>号，获取亲儿子岑寂的元素
后代选择器	$(‘ul li’)	使用空额，代表后代选择器，获取ul下的所有元素，包括孙级等

jQuery隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

jQuery筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个元素
:last	$(‘li:last’)	获取最后一个元素
:eq(index)	$(‘li:eq(2)’)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(‘li:odd’)	获取到的li元素中，选择索引号为奇数的元素
:even	$(‘li:even’)	获取到的li元素中，选择索引号为偶数的元素

jQuery筛选的方法

语法	用法	描述
parent()	$(‘li’).parent()	查找父级
parents()	$(‘li’).parent()	查到直系级
children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul>li’)
find(selector)	$(‘ul’).find(‘li’)	相当于$(‘ul li’)
siblings(selector)	$(’.first’).sibings(‘li’)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(’,first’).nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(’.last’).prevtAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$(‘div’).hasCalss(‘protected’)	检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(‘li’).eq(2)	相当于$(‘li:eq(2)’),index从0开始

jQuery里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

链式编程

链式编程为了节省代码量，看起来更优雅

语法：

$(this).css(‘color’,‘pink’).sibling().css(‘color’,’’);

jQuery样式操作

操作css方法

1.参数只写属性名，则是返回属性名值

语法：

$(this).css(‘color’);

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

语法：

$(this).css(‘color’,‘red’)

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。

$(this).css({color:pink,width:300px;})

设置类样式方法

1.添加类

$(‘div’).addClass(‘current’);

2.删除类

$(‘div’).removeClass(‘current’);

3.切换类

$(‘div’).toggleClass(‘current’);

类操作和className区别

原始JS中className会覆盖原先里面的类名

jQuery里面类操作只是对指定类进行操作，不影响原先的类名

jQuery效果

显示隐藏效果

显示语法规范：

show.([speed],[easing],[fn])

显示参数：

1.参数可以省略，无动画效果

2.speed：三种预定速度之一的字符串（‘show’，‘normal’，‘fast’）或表示动画时长的毫秒数值（如：1000）。

3.easing：（Optional）用来指定切换效果，默认是‘swing’，可用参数；‘linear’‘

4.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

隐藏语法规范：

hide.([speed],[easing],[fn])

隐藏参数：

1.参数可以省略，无动画效果

2.speed：三种预定速度之一的字符串（‘show’，‘normal’，‘fast’）或表示动画时长的毫秒数值（如：1000）。

3.easing：（Optional）用来指定切换效果，默认是‘swing’，可用参数；‘linear’‘

4.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

滑动效果

语法：

slideDown/Up/Toggle([speed],[easing],[fn])

参数：

1.参数可以省略，无动画效果

2.speed：三种预定速度之一的字符串（‘show’，‘normal’，‘fast’）或表示动画时长的毫秒数值（如：1000）。

3.easing：（Optional）用来指定切换效果，默认是‘swing’，可用参数；‘linear’‘

4.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

动画队列以及停止排队方法

1.动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或效果排队执行。

2.停止排队

stop()

1.stop()方法用于停止动画或效果

2.注意：stop（）写到动画或者效果的前面，相当于停止结束上一次的动画。

淡入淡出效果

语法：

fadeIn/Out/Toggle([speed],[easing],[fn])

参数：

1.参数可以省略，无动画效果

2.speed：三种预定速度之一的字符串（‘show’，‘normal’，‘fast’）或表示动画时长的毫秒数值（如：1000）。

3.easing：（Optional）用来指定切换效果，默认是‘swing’，可用参数；‘linear’‘

4.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

渐进方式调整到指定的不透明度

fadeTo([speed],opacity,[easing],[fn])

opacity透明度必须写，取值0-1之间

自定义动画animate

语法：

animate(params,[speed],[easing],[fn])

参数：

1.params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是符合属性，则需要采取驼峰式命名法borderLeft。其余参数可以省略。

2.speed：三种预定速度之一的字符串（‘show’，‘normal’，‘fast’）或表示动画时长的毫秒数值（如：1000）。

3.easing：（Optional）用来指定切换效果，默认是‘swing’，可用参数；‘linear’‘

4.fn：回调函数，在动画完成时执行的函数，每个元素执行一次

jQuery属性操作

设置或获取元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里的type

获取属性值语法：

prop(‘属性’)

设置属性语法：

prop(‘属性’，‘属性值’)

设置或获取元素自定义属性值attr()

获取属性值语法：

attr(‘属性’)

设置属性语法：

attr(‘属性’，‘属性值’)

数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。

jQuery内容文本值

主要针对元素的内容还有表单的值操作

普通元素内容html（）（相当于原生inner HTML）

html（） 获取元素的内容

html（‘内容’） 设置元素的内容

普通元素文本内容text（）（相当于原生innnerText）

text（） 获取元素的内容

text（‘内容’） 设置元素的内容

表单的值val（）（相当于原生value）

val（） 获取元素的内容

val（‘内容’） 设置元素的内容

保留小数

计算数值.toFixed(2); 保留两个小数

jQuery元素操作

主要是遍历，创建，添加，删除元素操作

遍历元素

jQuery隐式迭代是对同一类元素做了相同的操作。如果想要给同一类元素做不同操作，就需要做到遍历。

1语法：

$(‘div’).each(function(index,doEle){xxx;})

1.each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个。

2.里面的回调函数有2个参数：index是每个元素的索引号，demEle是每个DOM元素对象，不是jQuery对象。

3.所以想要使用jQuery方法，需要给这个dom元素转化为jQuery对象$(domEle)

2语法：

$.each(boject,function(index,element){xxx;})

1.$.each()方法可用于变量任何对象，主要用于数据处理，比如数组，对象

2.里面的函数有2个：index是每个元素的索引号，element 遍历对象

创建元素

语法：

$(’<li></li>’);

动态创建li标签

添加元素

内部添加

语法：

element.append(‘内容’)

把内容放入匹配内部最后面，类似原生appendChild

element.prepend(‘内容’)

把内容放入匹配内部最前面，类似原生appendChild

外部添加

语法：

element.after(‘内容’) 把内容放入目标元素后面

element.before(‘内容’) 把内容放入目标元素前面

• 内部元素生成的是父子关系
• 外部元素生成的是兄弟关系

删除元素

语法：

element.remove() 删除匹配元素（本身）

element.empty() 删除匹配元素的集合中所有子节点

element.html(’’) 删除匹配元素的集合中所有子节点

jQuery尺寸，位置操作

jQuery尺寸

语法	用法
width()/height()	取消匹配元素宽度和高度值 只算width/herght
innerWidth()/innerHeight()	取消匹配元素宽度和高度值 包含padding
outerWidth()/outerHeight()	取消匹配元素宽度和高度值 包含padding，border
outerWidth(ture)/outerHeight(true)	取消匹配元素宽度和高度值 包含padding，border，margin

• 以上参数为空，则是获取相应数值，返回的是数字型
• 如果参数为数字，则是修改相应数值
• 参数可以不必写单位

jQuery位置

位置主要有三种：offset，position，scrollTop()/scrollLeft()

1.offset()设置或获取元素的偏移

• offset()方法设置或返回被选元素相对文档的偏移坐标，跟父级没有关系

• 该方法有2个属性Left和Top，offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离

• 可以设置元素的偏移：offset{(top:10,left:10)}

2.position()获取元素偏移

• position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为主。

• 这个方法只能获取，不能设置定位

3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部或左部

• scrollTop()方法设置或返回元素被卷去的头部

jQuery事件

jQuery事件注册

单个事件注册

语法：

element.事件（function(){}）

事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：

element.on(events,[selector,fn])

1.events一个或多个用空格分隔的事件类型，如‘click’或‘keydown’

2.selector元素的子元素选择器

3.可以事件委派操作。事件委派就是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

4.可以创建动态的元素，click（）没有办法绑定事件，on()可以给动态生成的元素绑定

事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

语法：

$(‘p’).off() 解绑p元素所有事件处理程序

$(‘p’).off(‘click’) 解绑p元素上面的点击事件

$(‘p’).off(‘click’,‘li’) 解绑事件委托

如果有事件只想触发一次，可以使用one()来绑定事件

自动触发事件trigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按键一致，可以利用定时器自动触发右侧按键点击事件，不必鼠标点击触发

语法1：

elelment.click()

语法2：

element.trigger(‘type’)

语法3：

element.triggerHandler(type) 不会触发默认事件

jQuery事件对象

事件被触发，就会有事件对象的产生

element.on(events,[selector],function(event){})

阻止默认行为：event.preventDault()或者return false

阻止冒泡：event.stopPrapagation

jQuery其他方法

jQuery对象拷贝

语法：

$.extend([deep],target,object1,[objectN])

1.deep:如果没有ture为深拷贝，默认为false浅拷贝

2.target：要拷贝的目标对象

3.object1：待拷贝到第一个对象的对象

4.bojectN：待拷贝到第N个对象的对象

5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

6.深拷贝，前面加true，完全克隆（拷贝对象，而不是地址），修改目标对象不会影响被拷贝对象

多库共存

问题描述：

jQuery使用$作为标示符，随着jQuery的流行，其他js库也会用$作为标示符，这样一起使用会引起冲突

客观需求：

需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫多库共存

jQuery解决方案：

1.把里面的$符号，统一更改为jQuery，比如jQuery(‘div’)

2.jQuery变量规定新的名称：$.noConflict()varxx=$.noConflict()