jQuery内容（一）

目录

1.jQuery入口函数

2.jQuery对象和DOM对象

3.隐式迭代

4.筛选选择器

5.筛选方法

6.操作CSS方法

7.设置类样式方法

8.jQuery动画效果

9.属性操作 

10.内容文本值

---

---

1.jQuery入口函数

1. 引入jQuery文件
2. 入口函数
3. 功能实现

   //第一种
   $(document).ready(function() {})
   
   //第二种
   $(function() {})

2.jQuery对象和DOM对象

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。

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

// 1. DOM对象转换为 jQuery对象
$('div');

// 2.  jQuery对象转换为DOM对象
//第一种
$('video')[0].play()

//第二种
$('video').get(0).play()

3.隐式迭代

把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法

4.筛选选择器

5.筛选方法

6.操作CSS方法

jQuery可以使用CSS方法来修改简单元素样式；也可以操作类，修改多个样式。

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

$(this).css("color");

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

$(this).css("color","red");

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

$(this).css({"color":"white";"font-size":"20px"});

7.设置类样式方法

作用等同于classList，可以操作类样式，注意操作类里面的参数不要加点。

        1.添加类 

$(this).addClass("current");

        2.移除类

$(this).rmoveClass("current");

        3.切换类

$(this).toggleClass("current");

---

注意：jQuery类操作只会对指定类进行操作，不影响原先的类名

---

8.jQuery动画效果

显示与隐藏效果

        1.显示

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

        2.隐藏

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

        3.切换

toggle([speed,[easing],[fn]])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

参数一般不写

滑动效果 

        1.上滑动

slideUp([speed,[easing],[fn]])

        2.下滑动

slideDown([speed,[easing],[fn]])

        3.上下滑动切换

slideToggle([speed,[easing],[fn]])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

参数一般也不写

事件切换

hover([over,]out)

over:鼠标移到元素上面要触发的函数（相当于mouseenter）

out:鼠标移出元素上面要触发的函数（相当于mouseleave）

 动画队列停止排队

stop()

stop()用于停止动画效果，但是一定要写下动画效果前面。

淡入淡出效果

         1.淡入

fadeIn([speed],[easing],[fn])

        2.淡出

fadeOut([speed],[easing],[fn])

        3.切换

fadeToggle([speed],[easing],[fn])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

参数一般也不写

        4.改变不透明度 

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

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)  必须写

opacity:一个0至1之间表示透明度的数字。必须写

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

自定义动画 

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

params:一组包含作为动画属性和终值的样式属性和及其值的集合 必须写

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

9.属性操作 

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

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

        1.获取属性

prop("属性")

        2.设置属性

prop("属性","属性值")

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

        所谓元素自定义属性值就是用户添加的属性

        1.获取属性

attr("属性")//类似原生getAttribute()

        2.设置属性

attr("属性","属性值")//类似原生setAttribute()

10.内容文本值

        1.普通元素内容

html() //获取元素的内容

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

        2.普通文本内容

text()  //获取元素文本内容

text("内容")  //设置元素文本内容

        3.表单内容

val()  //获取表单元素内容

val("内容")  //设置表单元素内容