一. jQuery介绍

1 什么是jQuery

jQuery是一个JavaScript函数库 ,可以处理兼容性问题,方便操作DOM

在早期的时候, 浏览器有很多不同的版本, 如果要做各种浏览器兼容是很头疼的事.

jQuery的出现解决了这个问题, 处理了兼容问题, 并提供了一系列简洁的, 统一的操作DOM的方式

jQuery的口号是”write less, do more”

2 jQuery包含哪些功能

jQuery库包含以下功能：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX

除此之外, 还提供了大量的插件.

二. jQuery快速上手

1 jQuery的安装

jQuery的安装只需要引入jQuery的js文件即可, 常用的获取jquery.js文件的方式:

  • 从 jquery.com 下载 jQuery 库

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>Document</title>
    6.   <!-- 本地引入 -->
    7.   <script src="./jquery.min.js"></script>
    8. </head>

  • 从 CDN 中载入 jQuery, 如从 jsDelivr 中加载 jQuery

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>Document</title>
    6.   <!-- 网络引入 推荐-->
    7.   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    8. </head>

这里, 更推荐大家使用CDN的方式引入

推荐的CDN公共资源网站

jsDelivr

  1. <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

bootCDN

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

更多公共资源CDN可以参考: [菜鸟驿站-jQuery安装]

2 jQuery语法

jQuery最主要的作用就是操作DOM

步骤:

  1. 选择DOM元素
  2. 执行操作(事件, 属性, 效果…)

    语法

  1. $('选择器').action

示例

  1. <script>
  2.         //1. $是jQuery的别名
  3.         //2. $也是jquery的顶级对象,后面所有的操作都是以$开头,因为jquery里面都是方法,方法是由对象调用($对象调用)
  4.         //3. 使用$,可以使我们的书写更加简洁
  5.         jQuery(function(){
  7.             jQuery('div').hide(3000)
  8.         })
  9.     </script>
  12.     <div>慢慢的你就看不见我了....</div>

3 入口函数

当DOM元素加载完成后执行. 不用等所有内容(包括图片, css)加载完成

示例

  1. $(function(){
  2.     // 执行代码
  3. })

4 DOM对象与jQuery对象

dom对象和jquery对象区别

  1. **dom对象是通过原生的js获取过来的.本质是操作元素的属性,不能调用jquery方法**<br />**    jquery对象通过jquery方法获取过来的,本质是调用方法,不能使用dom的属性来操作元素**

DOM对象是通过原生的DOM API得到的对象
jQuery对象是通过$()得到的对象
两者可以使用方法不一样

  1. <div>中国移动</div>
  3.     <script>
  4.         //原生js对象 DOM对象 : 就是通过原生的js获取过来的对象
  5.         var div = document.querySelector('div')
  6.         console.log(div);
  8.         //jquery对象 用jquery的方法获取过来的对象,
  9.         var jqDiv = $('div')//本质:利用$对dom对象包装后产生的对象
  10.         console.log(jqDiv);//S.fn.init 以伪数组的方式来存储的
  12.         //dom对象只能使用原生js的方法,jquery对象也只能使用jquery对象得到方法
  13.         //div.style.display='none'
  14.         //div.hide(3000) dom对象不能调用jquery方法
  15.         //jqDiv.style.display='none'//jquery对象不能使用dom的属性
  17.         //结论:dom对象本质是修改元素的属性 jquery本质是在调用方法,不能混着使用
  18.     </script>

dom对象和jquery对象的互转

  1. **dom对象 ->jquery对象  jquery(dom对象)**<br />**    jquery对象 -> dom对象 jquery对象[0] 或者 jquery对象.get(0)**
  1. <div>中国移动</div>
  3.     <script>
  4.         //1,dom对象转成jquery对象  $(dom对象)
  5.         var divDOM = document.querySelector('div')
  6.         //$(divDOM).hide(3000)
  8.         //2,jquery对象转成dom对象  jquery对象[0] 或者 jquery对象.get(0)
  9.         var jqDiv = $('div')
  10.         console.log(jqDiv);//jquery对象
  12.         console.log(jqDiv[0]);//dom对象
  13.         //jqDiv[0].style.display='none'
  15.         console.log(jqDiv.get(0));//dom对象
  16.         jqDiv.get(0).style.display='none'
  18.     </script>
  1.  <button>唐伯虎</button>
  3.     <script>
  4.         /* 格式
  5.             jq对象.事件名称(匿名函数)   事件触发之后要做的操作都写在匿名函数中
  6.         */
  8.         $('button').click(function(){
  9.             //alert('秋香')
  10.             console.log(this);//注意 在jquery事件内部this代表的是dom对象,不是jquery对象
  11.         })
  13.         //鼠标移入事件
  14.         $('button').mouseover(function(){
  15.             console.log(111);
  16.         })
  17.     </script>

三. jQuery选择器

类似于CSS选择器, jQuery提供丰富的选择器, 可以快速准确的选出DOM元素.

1.选择器和筛选选择器

  1.    基本选择器<br />        #id值<br />        .class类名<br />        元素名<br />    复合选择器<br />        并集选择器 a,b<br />        交集选择器 a.b<br />        后代选择器 a b<br />        子选择器   a>b<br />    筛选选择器<br />        :first<br />        :last<br />        :odd<br />        :even
ID选择器 $(‘#id’) 获取指定ID的元素
类选择器 $(‘.class’) 获取一类class的元素
标签选择器 $(‘div’) 获取所有div元素
名称 用法 描述
后代选择器 $(‘ul li’) 获取ul下所有的li元素
:first $(‘li:first’) 获取第一个li元素
eq(index) $(‘li:eq(2)’) 获取索引号为2的元素, 从0开始
find(selector) $(‘ul’).find(‘li’) 在ul下找所有的li元素
eq(index) $(‘li’).eq(2) 相当于$(‘li:eq(2)’)
siblings(selector) $(this).siblings() 选择自己的兄弟元素, 不包括自己
属性选择器 $(“a[target=’_blank’]”) target 属性值等于 “_blank” 的 a元素

基本和后代选择器:

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  7. </head>
  8. <body>
  9.     <div>我是 div</div>
  10.     <div class="nav">我是 nav div</div>
  12.     <ol>
  13.         <li>我是ol下的li</li>
  14.         <li>我是ol下的li</li>
  15.         <li>我是ol下的li</li>
  16.         <li>我是ol下的li</li>
  17.     </ol>
  20.     <script>
  21.         //只选择第二个div
  22.         $('.nav').css('background','red') 
  24.         //选择ol下面的li
  25.         //这里面其实隐含了一个隐式迭代
  26.         //隐式迭代就是把匹配的所有元素进行遍历,然后给每个元素都添加css这个方法
  27.         $('ol li').css('background','red') 
  28.         console.log($('ol li'));//这个获取的是伪数组,里面有4个元素
  30.         //让前面两个div都变成粉红色
  31.         $('div').css('backgroundColor','pink')
  33.     </script>

筛选选择器:

  1. <ol>
  2.         <li>我是ol下面的li</li>
  3.         <li>我是ol下面的li</li>
  4.         <li>我是ol下面的li</li>
  5.         <li>我是ol下面的li</li>
  6.         <li>我是ol下面的li</li>
  7.     </ol>
  9.     <ul>
  10.         <li>我是ul下面的li</li>
  11.         <li>我是ul下面的li</li>
  12.         <li>我是ul下面的li</li>
  13.         <li>我是ul下面的li</li>
  14.         <li>我是ul下面的li</li>
  15.     </ul>
  17.     <script>
  18.         //选中ol下的第一个li设置成红色
  19.         $('ol li:first').css('color','red')
  21.         //选中ol下第三个li设置成蓝色
  22.         $('ol li:eq(2)').css('color','blue')
  24.         //选中ul下奇数的li设置紫色(奇数索引)
  25.         $('ul li:odd').css('color','purple')
  27.         //选中ul下偶数的li设置成粉红色(偶数索引)
  28.         $('ul li:even').css('color','pink')
  30.     </script>

2.筛选方法(推荐使用)

jquery自带的筛选方法:
first( ) 第一个
last( ) 最后一个
parent( ) 父元素
children( ) 子元素
find( ) 后代元素
siblings( )其他兄弟元素

如果有筛选方法,优先使用筛选方法

  1. <ol>
  2.         <li>我是ol下面的li</li>
  3.         <li>我是ol下面的li</li>
  4.         <li>我是ol下面的li</li>
  5.         <li>我是ol下面的li</li>
  6.         <li>我是ol下面的li</li>
  7.     </ol>
  9.     <ul>
  10.         <li>我是ul下面的li</li>
  11.         <li>我是ul下面的li</li>
  12.         <li>我是ul下面的li</li>
  13.         <li>我是ul下面的li</li>
  14.         <li>我是ul下面的li</li>
  15.     </ul>
  17.     <script>
  18.         //选中ol下的第一个li设置成红色
  19.         //$('ol li:first').css('color','red')
  20.         $('ol li').first().css('background','red'); //推荐使用筛选方法来筛选元素
  22.         //选中ol下第三个li设置成蓝色
  23.         //$('ol li:eq(2)').css('color','blue')
  24.         $('ol li').eq(2).css('background','blue'); //推荐使用筛选方法来筛选元素
  26.         var index = 2;
  27.         $('ol li').eq(index).css('background','pink');//筛选方法传递参数非常方便
  29.     </script>
  1.  <div class="yeye">
  2.         <div class="father">
  3.             <div class="son">儿子</div>
  4.         </div>
  5.     </div>
  8.     <div class="nav">
  9.         <p>我是外面的p</p>
  10.         <div>
  11.             <p>我是里面的p</p>
  12.         </div>
  13.     </div>
  15.     <script>
  16.         //1.打印son的亲爸爸
  17.         console.log($('.son').parent());
  19.         //2,打印nav的亲儿子p
  20.         //console.log($('.nav>p')); //传统选择器
  21.         console.log($('.nav').children('p'));//jquery的筛选方法
  23.         //3,打印nav下所有的p
  24.         //console.log($('.nav p'));
  25.         console.log($('.nav').find('p'));
  26.     </script>
  1. <ol>
  2.         <li>我是ol下的li</li>
  3.         <li>我是ol下的li</li>
  4.         <li class="item">我是ol下的li</li>
  5.         <li>我是ol下的li</li>
  6.         <li>我是ol下的li</li>
  7.     </ol>
  9.     <div class="current">中国移动</div>
  10.     <div>中国联通</div>
  12.     <script>
  13.         //选中除第三个li以外的其他元素
  14.         $('ol .item').siblings('li').css('background','pink')
  16.         //判断是否有current类名
  17.         console.log($('div').first().hasClass('current'));
  18.         console.log($('div').last().hasClass('current'));
  19.     </script>

3.选择器_排他思想和链式编程

  1.     <button>快速</button>
  2.     <button>快速</button>
  3.     <button>快速</button>
  4.     <button>快速</button>
  5.     <button>快速</button>
  6.     <button>快速</button>
  7.     <button>快速</button>
  9.     <script>
  10.         //实现效果,关标点到哪个按钮上面,哪个按钮背景就变成粉红色,其他按钮背景不变
  11.         //1,获取按钮对象,添加点击事件
  12.         $('button').click(function(){
  13.             //this就代表当前点击的按钮
  15.             //1.当前按钮背景改成粉红色
  16.             $(this).css('background','pink')
  18.             //2,其他兄弟按钮背景颜色去掉
  19.             $(this).siblings('button').css('background','')
  21.         })
  23.     </script>
  1.     <button>快速</button>
  2.     <button>快速</button>
  3.     <button>快速</button>
  4.     <button>快速</button>
  5.     <button>快速</button>
  6.     <button>快速</button>
  7.     <button>快速</button>
  9.     <script>
  10.         //实现效果,关标点到哪个按钮上面,哪个按钮背景就变成粉红色,其他按钮背景不变
  11.         //1,获取按钮对象,添加点击事件
  12.         $('button').click(function(){
  13.             //this就代表当前点击的按钮
  15.             //1.当前按钮背景改成粉红色
  16.             console.log($(this).css('background','pink'))//返回的是当前的对象,后面还可以继续调用方法
  17.             console.log($(this));
  19.             //2,其他兄弟按钮背景颜色去掉
  20.             //$(this).siblings('button').css('background','');
  22.             //链式编程  
  23.             $(this).css('background','pink').siblings('button').css('background','')
  25.         })
  27.     </script>

四. jQuery事件

1 什么是事件

当用户浏览网页时, 网页上一些可以交互的元素(按钮)对用户操作的反应就是事件.

比如

  • 用户点击登录按钮
  • 看小说, 漫画时按键盘的左右键进行翻页

这些都是事件

2 常见的事件

常见的事件可以分为

  • 鼠标事件
  • 键盘事件
  • 表单事件

  • 窗口事件

    1. <button>唐伯虎</button>
    3.   <script>
    4.       /* 格式
    5.           jq对象.事件名称(匿名函数)   事件触发之后要做的操作都写在匿名函数中
    6.       */
    8.       $('button').click(function(){
    9.           //alert('秋香')
    10.           console.log(this);//注意 在jquery事件内部this代表的是dom对象,不是jquery对象
    11.       })
    13.       //鼠标移入事件
    14.       $('button').mouseover(function(){
    15.           console.log(111);
    16.       })
    17.   </script>

    3 jQuery如何处理事件

    1.   **jQuery对象.事件名称(匿名函数)  **<br />        事件触发之后要操作的代码都写在匿名函数里面

    语法

  1. $("选择器").事件名(function(){
  2.     // 事件处理函数
  3. });

示例

  1. $("btn").click(function(){
  2.     alert('我被点击了')
  3. });

五. jQuery CSS操作

通过jQuery可以快速的添加CSS样式

1 CSS操作

  1.     css(属性名)        获取属性名对应的值<br />    css(属性名,值)    设置指定的属性的值

语法

  1. // 设置单个属性
  2. $("选择器").css('属性名', '属性值')
  3. // 设置多个属性
  4. $("选择器").css({
  5.   属性名1: 属性值1,
  6.   属性名2: 属性值2
  7. })

示例

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  7.     <style>
  8.         div{
  9.             width: 200px;
  10.             height: 200px;
  11.             background: pink;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div></div>
  17.     <script>
  18.         //css()方法只有一个参数,就是获取当前属性的值
  19.         console.log($('div').css('width'));
  21.         //css()方法有两个参数,就是设置当前属性的值
  22.         $('div').css('width','300px')
  23.         $('div').css('height','300px')
  24.         $('div').css('background','purple')
  26.         //还可以使用{}批量设置属性(复合属性名采用驼峰命名法,属性值不是数字要加引号)
  27.         $('div').css({
  28.             width:400,
  29.             height:400,
  30.             backgroundColor:'red'
  31.         })
  32.     </script>
  33. </body>

2 类操作

更多的时候, 我们使用类操作

  • 添加一个类样式: addClass
  • 删除一个类样式: removeClass
  • 切换类样式: toggleClass

    示例

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  7.     <style>
  8.         div{
  9.             width: 200px;
  10.             height: 200px;
  11.             background: pink;
  12.             margin: 100px auto;
  13.             transition: all 0.5;
  14.         }
  16.         .current{
  17.             background: red;
  18.             transform: rotate(60deg);
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="current"></div>
  24.     <script>
  25.         //添加类 addClass
  26.         /* $('div').click(function(){
  27.             $(this).addClass('current')
  28.         }) */
  30.         //删除类 removeClass
  31.         /* $('div').click(function(){
  32.             $(this).removeClass('current')
  33.         }) */
  35.         //切换类 toggleClass
  36.         $('div').click(function(){
  37.             $(this).toggleClass('current')
  38.         })
  40.     </script>
  41. </body>