jQuery的基本使用学习笔记

jQuery的基本使用

jQuery的入口函数

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

$(()=>{
   //此处是页面DOM加载完成的入口
})
或者
$(document).ready(()=>{
   //此处是页面DOM加载完成的入口
})

jQuery的顶级对象 $

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

     $(()=>{
         alert('11')
     })
     jQuery(()=>{
         alert('11');
     })
   

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

        $(()=>{
            $('div').hide()
        })
   

jQuery对象和DOM对象

1. DOM对象：用原生js获取过来的对象就是DOM对象
2. jQuery对象：用jQuery方式获取过来的对象是jQuery对象
   本质：通过 $ 把DOM元素进行了包装

注意：jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法

jQuery对象和DOM对象的互相转换

• DOM对象和jQuery对象是可以互相转换的
• 因为原生js比jQuery更大，原生的一些属性和方法jQuery没有封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用

1. DOM对象转换为jQuery对象：

$(DOM对象)

3. jQuery对象转换为DOM对象（两种方式）

$(‘div’)[index] index是索引号
$(‘div’).get(index) index是索引号

jQuery选择器

jQuery基础选择器

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

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

jQuery层级选择器

隐式迭代

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

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

jQuery筛选选择器

jQuery筛选方法！！！

jQuery里面的排他思想

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

jQuery的链式编程

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

                //将当前按钮变为红色
                $(this).css("color","red")
                //让其余兄弟元素不变色
                $(this).siblings().css("color","")

                //链式编程
                $(this).css("color","red").siblings().css("color","")

jQuery的样式操作

操作CSS方法

• jQuery可以使用CSS方法来修改简单元素样式；也可以操作类，修改多个样式
  • 参数只写属性名，则是返回属性值

$(this).css(“color”)

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

$(this).css(“color”,“red”);

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

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

设置类样式方法

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

添加类

$(“div”).addClass(“current”);

移除类

$(“div”).removeClass(“current”);

切换类

$(“div”).toggleClass(“current”)

类操作与className的区别

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

jQuery效果

显示隐藏效果

1. 语法规范：
   show([ speed, [easing], [fn] ])
2. 参数都可以忽略，无动画直接显示
3. speed：三种预定速度之一的字符串(slow ; normal ; fast)或表示动画时长的毫秒数值(如：1000)
4. easing：用来指定切换效果，默认是 swing ,可用参数 linear 。
5. fn：回调函数，在动画完成时执行的函数，每个元素执行一次
6. hide()：隐藏
7. toggle()：切换

滑动效果

1. slideUp() ;
2. slideDown() ;
3. slideToggle() ;

事件切换：hover

• 事件切换hover就是鼠标经过和离开的复合写法
• 如果只写一个函数 ，那么鼠标经过和鼠标离开都会触发这个函数

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

动画或者效果队列

• 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
  使用stop()方法来停止上一次的动画
  注意：stop()要写到动画的前面

淡入淡出效果

1. fadeIn()
2. fadeOut()
3. fadeToggle()
   语法规范与显示的语法规范一致
4. fadeTo([ speed , opacity , [easing] , [fn] ])
   效果参数：
5. opacity透明度必须写，取值为0~1之间。
6. speed：三种预定速度之一的字符串（slow ，normal ，fast）或者表示动画时长的毫秒数值（1000）。必须写
7. easing：用来指定切换效果，默认是swing ，可用参数为 linear。

自定义动画animate

语法：
animate(params , [speed] ,[easing] , fn[])

参数：

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