jQuery的基本使用学习笔记

文章目录

jQuery的基本使用
- jQuery的入口函数
- jQuery的顶级对象 $
- jQuery对象和DOM对象
- jQuery对象和DOM对象的互相转换
jQuery选择器
- jQuery基础选择器
- jQuery层级选择器
- 隐式迭代
- jQuery筛选选择器
- jQuery筛选方法！！！
- jQuery里面的排他思想
- jQuery的链式编程
jQuery的样式操作
- 操作CSS方法
- 设置类样式方法
- - 添加类
  - 移除类
  - 切换类
  - 类操作与className的区别
jQuery效果
- 显示隐藏效果
- 滑动效果
- 事件切换：hover
- 动画队列及其停止排队方法
- 淡入淡出效果
- 自定义动画animate

jQuery的基本使用

jQuery的入口函数

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

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

jQuery的顶级对象 $

$ 是jQuery的别称，在代码中可以使用jQuery代替 $，但一般为了方便，通常都直接使用 $
```
  $(()=>{
      alert('11')
  })
  jQuery(()=>{
      alert('11');
  })
```
$ 是 jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法
```
     $(()=>{
         $('div').hide()
     })
```

jQuery对象和DOM对象

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

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

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

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

DOM对象转换为jQuery对象：

$(DOM对象)

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","")