jQuery的基本使用

jQuery的基本使用

jQuery的入口函数

     第一种：
	     $(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
 }) ; 

	   第二种：
	   $(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});  

注意：$可换成jQuery。

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

2. 相当于原生 js 中的 DOMContentLoaded。

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

jQuery的顶级对象

1. $是jQuery的别称，在代码中使用jQuery代替$,但一般为了方便，通常都是直接使用$.
2. $是jQuery的顶级对象，相当于原始JavaScript中的Window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

jQuery对象和DOM对象

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

1. DOM对象转换成jQuery对象：$(DOM对象)

   $("p")
   

2. jQuery对象装换为DOM对象

   • $("div")[index] //index是索引号
     

   • $("div").get(index) //index是索引号
     

jQuery选择器

jQuery基础选择器

原生js获取元素的方式很多，很杂，而且兼容情况不一致，因此jQuery给我们做了封装使获取元素同一标准。

$("选择器") //里面选择器直接写css选择器即可，需要加引号

jQuery层级选择器

​

jQuery设置样式

$("div").css("属性"，"值")

隐式迭代

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

​ 简单理解:给匹配到的所有元素进行循环遍历，执行相应的方法，而不是进行循环，简化我们的操作，方便使用。

jQuery筛选选择器

jQuery筛选方法

jQuery中的排他思想

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

jQuery样式操作

操作css方法

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

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

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

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

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

   $(this).css("color":"red","font-size":"20px")
   

设置类样式方法

1. 添加类

   $("div").addclass("current");
   

2. 移除类

   $("div").removeClass("current");
   

3. 切换类

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

类操作与className区别

原生js中className会覆盖元素原先里面的类名。

jQuery里面类操作只会对制定类进行操作，不会影响原先的类名。

jQuery效果

jQuery封装的动画效果

显示隐藏效果

显示语法规范

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

隐藏语法规范

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

切换语法规范

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

滑动切换语法规范

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

参数

1. 参数都可以省略，无动画直接显示。
2. speed：三种预定速度之一的字符串(“slow”,“nomal”,“fast”)或者表示动画时长的毫秒数值。
3. easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear".
4. fn:回调函数，在动画执行完时执行的函数，每个元素执行一次。

事件切换

howar([over,]out)

1. over:鼠标移动到元素上就触发的函数
2. out:鼠标移出元素就触发的函数

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

1. 动画或效果队列

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

2. 停止排队

   stop()
   

   • stop()方法用于停止动画或效果
   • stop()写到动画或者效果的前面，相当于停止上一次的动画

淡入淡出效果

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

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

2. 效果参数

   • opacity透明度必须写，取值0~1之间。
   • speed：三种预定速度之一的字符串(“slow”,“nomal”,“fast”)或者表示动画时长的毫秒数值。
   • easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear".

自定义动画animate

1. 语法

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

2. 参数

   • params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法。其余参数都可以省略
   • speed：三种预定速度之一的字符串(“slow”,“nomal”,“fast”)或者表示动画时长的毫秒数值。
   • easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear".
   • fn:回调函数，在动画执行完时执行的函数，每个元素执行一次。