jQuery学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

FL_csdn1

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量146

点赞数

分类专栏： Web前端 jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/FL_csdn1/article/details/115640260

版权

Web前端同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

jQuery学习目标 TARGET

什么是jQuery
jQuery的优点
简单使用jQuery
DOM对象和jQuery对象的区别
能够写出常用的jQuery选择器
能够操作jQuery样式
能够写出常用的jQuery动画
能够操作jQuery属性
能够操作jQuery元素
能够操作jQuery元素尺寸，位置

一、jQuery概述

1. 什么是jQuery

1.1 JavaScript库

我们先了解一个概念仓库，仓库是可以把很多东西放到里面，找东西就可以去仓库直接找就可以了，而JavaScript库就是一个封装好的JS方法和函数的集合，也就是一个仓库，我们所需要的功能直接调用这个仓库中函数或方法就可以。
简单理解就是一个JS文件里对原生JS代码进行封装，这样我们就可以快速而高效的使用这些封装好的功能。
而jQuery刚好就是一个JavaScript库，里面封装好了很多预先定义好的函数，比如动画animate，hide，show，获取元素等。

1.2 常见的JavaScript库

jQuery
prototype
YUL
Dojo
Ext JS
移动端的zepto

2. jQuery的优点
优点

轻量级，核心文件几十kb，不会影响页面的加载速度
跨浏览器兼容，基本兼容了现在主流的浏览器
链式编程，隐式迭代
对事件，样式，动画支持，大大简化了DOM操作
支持插件扩展开发，有着丰富的第三方插件，例如：树形菜单，日期控件，轮播图等
免费，开源

二、jQuery的基本使用

1. jQuery 的下载

官网地址：https://jquery.com

在这里插入图片描述

版本：

1X：兼容 IE678等低版本浏览器，官网不在更新
2X：不兼容IE678等低版本浏览器，官网不在更新
3X：不兼容IE678等低版本浏览器，是官方主要更新维护的版本

2. jQuery 的使用

在官网下载所需的jQuery版本将其联入页面中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 链入jQuery库 -->
    <link rel="stylesheet" href="https://code.jquery.com/jquery-3.6.0.js" />
  </head>
  <body></body>
</html>

测试jQuery是否链入成功

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 链入jQuery库 -->
    <script src="jquery.js"></script>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      $("div").hide();
    </script>
  </body>
</html>

当页面中没有出现任何元素时证明jQuery已经链入成功，script标签中的意思是将页面中div元素隐藏，在后面的学习中会逐步加深。

三、jQuery的顶级对象

1.jQuery的顶级对象是jQuery对象，也可以用$代替。

使用jQuery对象

jQuery(function () {
        alert("jQuery链入成功");
      });

使用 $ 符号代替(在开发中一般使用 $ 符号)

$(function () {
        alert("jQuery链入成功");
      });

四、jQuery对象和DOM对象的区别

1.DOM对象
什么是dom对象，利用原生js获取过来的对象就是dom对象

例如下面这样的获取方式：

let obj=document.querySelector('body');

2.jQuery对象
什么是jQuery对象，利用原生jQuery获取过来的对象就是jQuery对象，本质就是通过jQuery对象把DOM元素进行了包装。

例如下面这样的获取方式：

$('body');

3.对比二者的区别

我们将这两个对象输出到控制台上

$(function () {
        let obj = document.querySelector("body");
        console.dir(obj);
        console.dir($("body"));
      });

在这里插入图片描述
可以看到jQuery获取的对象是以伪数组的形式存储的，注意：jQuery对象只能使用jQuery中的方法，DOM对象也只能使用原生js中的属性和方法

五、jQuery对象和DOM对象之间的相互转换

1.为什么要转换jQuery对象和DOM对象

因为原生js的方法始终是比jQuery中的方法更多，jQuery只是给我们封装了一些原生js中常用的属性和方法，还有一些属性和方法没有给我们封装，所以要想使用原生js中的属性和方法需要把jQuery对象转换成为DOM对象才能使用。

2.DOM对象转换为jQuery对象

let myvideo=document.querySelector('video');
$(myvideo);

3.jQuery对象转换为DOM对象

第一种方式：

$('video')[0];

第二种方式：

$('video').get[0];

六、jQuery选择器

原生JS获取元素的方式繁杂，而且兼容性不一致，jQuery给我们做了封装，使获取元素统一标准

下面这些就是原生js获取原生对象的方式，看起来是不是头很大

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

让我们在来看一看jQuery选择器的使用

语法规则：$(“选择器名称”)

$("div");

这么短短一行代码就可以选择一个元素，跟之前的js选择元素对象的方式相比方便了很多。

下面是我们常用的jQuery选择器

名称	用法	描述
ID选择器	$("#id")	获取指定ID元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div ，.p， .li”)	选取多个元素
交集选择器	$(“li .current”)	交集元素

七、jQuery的隐式迭代

隐式迭代的概念

jQuery遍历DOM元素以伪数组的形式存储的过程就叫做隐式迭代，简单理解，就是给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作。

我们通过一个案例来加深理解一下什么是隐式迭代

案例要求：获取四个div元素，给四个div设置背景颜色为蓝色

原生js的写法

let div = document.querySelectorAll("div");
    for (let i = 0; i <= div.length - 1; i++) {
      div[i].style.backgroundColor = "blue";
    }

可以看到，利用原生js的方法设置背景颜色还需要把获取到的元素对象全部都循环出来，然后在为每一个div添加背景颜色。

我们再看一下jQuery的写法

$("div").css("background", "blue");

jQuery只需要一行代码就可以把案例完成。
在上面已经提及，jQuery将我们常用的功能都封装为函数，我们在使用函数时，这个函数的底层已经将循环的功能写好，我们就不需要在写遍历对象的功能，只需要调用即可，这就是隐式迭代。

八、jQuery筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

九、jQuery筛选方法

语法	用法	描述
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(‘li’)	相当于$(‘ul>li’)，最近一级（亲儿子）
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”)，后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后的所有同辈元素
prevtAll([expr])	$(".first").prevtAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$(“div”).hasClass(‘protected’)	检查当前的元素是否有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”)，index从0开始

新浪下拉菜单案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jquery.js"></script>
    <style>
      ul .noe {
        float: left;
        list-style: none;
      }
      a {
        text-decoration: none;
        color: black;
      }
      li {
        list-style: none;
      }
      .tow {
        margin-left: -45px;
        display: none;
      }
      .tow li {
        border: 1px solid orange;
      }
      .tow li {
        border-top: none;
      }
      ul li {
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <ul class="nav">
      <li class="noe">
        <a href="#">微博</a>
        <ul class="tow">
          <li><a href="#">私信</a></li>
          <li><a href="#">评论</a></li>
          <li><a href="#">@我</a></li>
        </ul>
      </li>
      <li class="noe">
        <a href="#">微博</a>
        <ul class="tow">
          <li><a href="#">私信</a></li>
          <li><a href="#">评论</a></li>
          <li><a href="#">@我</a></li>
        </ul>
      </li>
      <li class="noe">
        <a href="#">微博</a>
        <ul class="tow">
          <li><a href="#">私信</a></li>
          <li><a href="#">评论</a></li>
          <li><a href="#">@我</a></li>
        </ul>
      </li>
      <li class="noe">
        <a href="#">微博</a>
        <ul class="tow">
          <li><a href="#">私信</a></li>
          <li><a href="#">评论</a></li>
          <li><a href="#">@我</a></li>
        </ul>
      </li>
    </ul>
    <script>
      // var nav = document.querySelector(".nav");
      // var lis = nav.children;
      // for (var i = 0; i < lis.length; i++) {
      //   lis[i].onmouseover = function () {
      //     this.children[1].style.display = "block";
      //   };
      //   lis[i].onmouseout = function () {
      //     this.children[1].style.display = "none";
      //   };
      // }
      $(function () {
        $(".nav>li").mouseover(function () {
          $(this).children("ul").show();
        });
        $(".nav>li").mouseout(function () {
          $(this).children("ul").hide();
        });
      });
    </script>
  </body>
</html>

排他思想

1. 什么是排他思想

就是在监听成立时，先把所有的样式清除为空，随后按照需求添加需要的样式。Tab栏效果切换是常见的功能需求，它运用的就是JS的排他思想。

2. 排他思想的应用

在没有jQuery之前，原生js写出来的tab栏步骤比较繁琐

像这样：

 var tab_list = document.querySelector(".tab_list");
      var lis = tab_list.querySelectorAll("li");
      var items = document.querySelectorAll(".item");
      for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute("index", i);
        lis[i].onclick = function () {
          for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
          }
          this.className = "current";
          var index = this.getAttribute("index");
          for (var i = 0; i < items.length; i++) {
            items[i].style.display = "none";
          }
          items[index].style.display = "block";
        };
      }

而jQuery写出来的tab栏

是这样的：

$(function () {
      $("button").click(function () {
        let index = $(this).index();
        $(this).css("background", "red");
        $(this).siblings("button").css("background", "");
        $(".content div").eq(index).siblings().hide();
        $(".content div").eq(index).show();
        $(".content").addClass("yellow");
      });
    });

从这几个案例，我们可以看出，jQuery中的筛选方法很方便的实现我们想要实现的一些效果。

持续更新…

FL_csdn1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记

jQuery学习目标 TARGET什么是jQueryjQuery的优点简单使用jQueryDOM对象和jQuery对象的区别一、jQuery概述1. 什么是jQuery1.1 JavaScript库我们先了解一个概念仓库，仓库是可以把很多东西放到里面，找东西就可以去仓库直接找就可以了，而JavaScript库就是一个封装好的JS方法和函数的集合，也就是一个仓库，我们所需要的功能直接调用这个仓库中函数或方法就可以。简单理解就是一个JS文件里对原生JS代码进行封装，这样我们就可以快速而高
复制链接

扫一扫

专栏目录