jQuery的使用

入口函数

第一种：

$(function(){
            
})

第二种：

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

注意：

只要DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装，不同于原生JS中的load事件等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码

基本使用

jQuery 的顶级对象$

$相当于jQuery的别称，在代码中可以用jQuery代替$,但是为了方便一般都直接使用$

jQuery 对象和DOM对象

• js对象只能用js的属性和方法
• jQuery的对象只能用jQuery的属性和方法
• 用原生js获取对象DOM对象：document.getElement
• 用jQuery获取元素就是jQuery对象：$('button')

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

DOM对象转换成jQuery对象

$(DOM对象)  //一般用css选择器来选取DOM对象

jQuery对象转换成DOM对象

 第一种方法：

$('button')[索引号]  //索引号从0开始

第二种方法：

$('button').get(索引号)  //索引号从0开始

jQuery 常用API

jQuery选择器

$('#id') //指定id元素
$('*') //所有元素
$('.class') //指定class
$('div') //根据标签获取元素
$('div,p,li') //获取多个
$('li.class') //交集获取
$('ul>li') //子代
$('ul li') //后代

 jQuery筛选方法

$('li').parent() //父级
$('ul').children('li') //子集（如果不加参数，则获取所有的，如果添加指定的元素，按照指定的找）
$('ul').find('li') //后代
$('li').siblings('li') //兄弟
$('li').nextAll() //后面的
$('li').prevAll() //前面的
$('div').hasClass('aaaa')        //判断是否具有某个类名
$('div').eq(index)                //指定索引方法

jQuery的排他思想

针对案例：多个按钮点击改变当前按钮的颜色，其他不变

方法：当前元素设置样式，其他的兄弟元素清楚样式

 $("li").mousemove(function() {
$(this).css('color', 'red')
$(this).siblings().css('color', '')
})

jQuery的特性

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

例子：上面的排他思想我们就可以直接通过对该节点的兄弟节点设置样式，不需要遍历

$(this).css('color', 'red').siblings().css('color', '')

 jQuery样式操作

单个样式操作

参数：属性名，属性值，以逗号分隔

注意：属性必须加引号，值如果是数字可以不用跟单位和引号

$('li').css('color', "red")

多个样式操作

参数：以对象的形式，属性名和属性值，以冒号隔开

注意，在多个样式操作下，单个单词的属性名可以不加引号，但是有-连接的属性名要加引号，属性值必须加引号

 $('li').css({
color: "white",
"font-size": '20px'
})

 jQuery设置样式的方法

• 添加类

$('li').addClass('current')   //括号里放类名，不是css类选择器

• 移除类

 $('li').removeClass('current')

• 切换类

 $('li').toggleClass('current')

注意：原生JS中类名会覆盖元素原先的类名，但是 jQuery里面类操作只是对指定类进行操作，不影响原先的类名

 jQuery效果

显示隐藏

方法	参数	说明
show	speed，easing，fn	显示
hide	speed，easing，fn	隐藏
toggle	speed，easing，fn	隐藏时显示，显示时隐藏

参数说明：

• speed：三种预定速度（“slow”，“normal”，“fast”）或表示动画时长的毫秒数值，使用三种预定数值的时候都必须使用引号包裹
• esing：用来指定切换效果，默认是“swing-在开头/结尾移动慢，在中间移动快”，可选参数“linear-匀速运动”
• fn：回调函数，在动画完成的时候执行，每个元素执行一次

注意：参数都可以省略

滑动效果

方法	参数	说明
slideDown	speed，easing，fn	用滑动动画显示一个匹配元素
slideUp	speed，easing，fn	用滑动动画隐藏一个匹配元素
slideToggle	speed，easing，fn	用滑动动画显示或隐藏一个匹配元素

参数说明：同显示隐藏

事件切换

方法	参数	说明
hover	over，out	鼠标的经过和移开

说明：

• over：鼠标移到元素上要触发的函数（相当于mouseenter）
• out：鼠标移出元素要触发的函数（相当于mouseleave）

注：如果只写一个函数，则鼠标经过和离开都会触发它

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

方法	说明
stop	停止匹配元素当前正在运行的动画

淡入淡出效果

方法	参数	说明
fadeIn	speed，easing，fn	通过淡入的方式显示匹配元素
fadeOut	speed，easing，fn	通过淡出的方式隐藏匹配元素
fadeToggle	speed，easing，fn	用淡入淡出动画显示或隐藏一个匹配元素
fadeTo	speed，opacity,easing，fn	方法逐渐改变被选元素的不透明度为指定的值（褪色效果）

参数说明：同滑动效果

另外说明：

opacity参数是规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。

注意：fadeTo必须写speed和opacity参数

自定义动画

方法	参数	说明
animate	params、speed、easing、fn	自定义动画

说明：

params：想要更改的样式属性，以对象的形式传递，必须写。属性名可以不带引号，

如果是复合属性需采取驼峰式命名法。其余参数可以省略。

speed：还是同滑动效果一样，可以往回看

easing：同滑动效果一样

fn：Callback，回调函数，同滑动效果一样

$('.box')
.animate({
    width: '200'
})
.animate({
    height: '200',
});

jQuery元素操作

设置、获取固有属性值

prop("属性")    //获取
prop("属性","属性值")   //设置

 设置、获取自定义属性值

attr("属性")  //获取、类似原生 getAttribute()
attr("属性","属性值")   //设置，类似原生setAttribute()

 数据缓存

data（）方法可以在指定的元素上存取数据，并不会修改DOM元素结构，所以元素上无法查看

注意：一旦页面刷新，之前存放的数据都将别移除

用法

data('name','value')  //向被选元素附加数据
data('name')   //向被选元素获取数据

内容文本值

普通元素内容：相当于原生innerHTML

html()  //获取元素内容
html("内容")  //设置元素内容

普通元素文本内容：相当于innerText

text()   //获取
text('内容')   //设置元素内容

表单值：相当于原生value

val()  //获取表单的值
val("文本内容")  //设置元素的文本内容

jQuery元素操作遍历

语法一：

eatch(function(index,domEle){})

注意：

• 方法遍历匹配每一个元素。主要用DOM处理。each每一个
• eatch的回调函数参数有2个：index是个每个元素的索引号，demEle是每个DOM元素对象，不是jQuery对象

方法二：

$.each(object,function(index,element){})

注意：

• 方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
• 参数说明：index是每个元素的索引号；element ：遍历内容

jQuery事件