jquery详解

VIP文章 已于 2022-04-12 09:51:12 修改
阅读量3k 收藏 26
点赞数 2
分类专栏： jQuery 文章标签： 前端 jquery
于 2022-04-09 21:02:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45240472/article/details/124067888
版权

1、jQuery概述

1.1、JavaScript库

仓库:可以把很多东西放到这个仓库里面。 找东西只需要到仓库里面查找到就可以了。

JavaScript库:即library ,是-个封装好的特定的集合(方法和函数)。从封装-大堆函数的角度理解库,就是在这个库中,卦装了很多预先定义好的函数在面,比如动画animate、hide、 show ,比如获取元素等。

简单理解:就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。

常见的JavaScript库

  • jQuery
  • Prototype
  • YUI
  • Dojo
  • Ext JS
  • 移动端的zepto

这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的,我们主要学习的是jQuery。

1.2、jQuery概念

jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是"write Less , Do More”, 即倡导写更少的代码,做更多的事情。

j就是JavaScript; Query 查询;意思就是查询js ,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。

**jQuery封装了JavaScript常用的功能代码,**优化了DOM操作、事件处理、动画设计和Ajax交互。

学习jQuery本质:就是学习调用这些函数(方法)。

jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是"write Less , Do More”, 即倡导写更少的代码,做更多的事情。

优点

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

2、jQuery的基本使用

2.1、jQuery下载

官网：jquery.com

版本:

  • 1x:兼容IE 678等低版本浏览器,官网不再更新
  • 2x:不兼容IE 678等低版本浏览器，官网不再更新
  • 3x:不兼容IE 678等低版本浏览器，是官方主要更新维护的版本

各个版本下载：https://code.jquery.com/

2.2、jquery使用

1.引入jquery文件

<script src="jquery.min.js"></script>

​ jquery.min.js

2.3、jquery的入口函数

在这里插入图片描述

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

2.4、jQuery的顶级对象$

在这里插入图片描述

<script>
    $(function(){
     
        alert(11)
    });
</script>

<script>
    jQuery(function(){
     
        alert(11)
    });
</script>
  1. 是 j Q u e r y 的 别 称 , 在 代 码 中 可 以 使 用 j Q u e r y 代 替 是jQuery的别称,在代码中可以使用jQuery代替 是jQuery的别称,在代码中可以使用jQuery代替 ,但-般为了方便,通常都直接使用$.
  2. 是 j Q u e r y 的 顶 级 对 象 , 相 当 于 原 生 J a v a S c r i p t 中 的 w i n d o w 。 把 元 素 利 用 是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用 是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用包装成jQuery对象,就可以调用jQuery的方法。

2.5、jQuery对象和DOM对象

  1. 用原生JS获取来的对象就是DOM对象

  2. jQuery方法获取的元素就是jQuery对象。

  3. jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。
    在这里插入图片描述

jQuery对象和DOM对象之间是可以相互转换的。

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

  1. DOM对象转换为jQuery对象: $(DOM对象)
$('div')
  1. jQuery对象转化为DOM对象（两种方式）
$("div')[index]        index是索引号
$("div').get(index)    index是索引号

在这里插入图片描述

3、jQuery选择器

3.1、jquery基础选择器

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

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

<script>
	$(function(){
     
        console.log($(".nav"));
    });
</script>

在这里插入图片描述

3.2、jQuery层级选择器

在这里插入图片描述

<script>
	$(function(){
     
        console.log($("ul li"));
    });
</script>

在这里插入图片描述

3.3、隐式迭代

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

简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
在这里插入图片描述

3.4、jQuery筛选选择器

在这里插入图片描述

<script>
	$(function(){
     
        $("ul li:first").css("color","red");
		$("ul li:eq(2)").css("color", "blue");
		$("o1 li:odd").css("color", "skyblue");
		$("o1 li:even") .css("color","pink");
    });
</script>

3.5、jQuery筛选方法（重点）

在这里插入图片描述

重点记住parent() children() find() siblings() eq()

在这里插入图片描述

新浪下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        
        li {
     
            list-style-type: none;
        }
        
        a {
     
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
     
            margin: 100px;
        }
        
        .nav>li {
     
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
     
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
     
            background-color: #eee;
        }
        
        .nav ul {
     
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
     
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
     
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
     
            // 鼠标经过
            $(".nav>li").mouseover(function() {
     
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素
                $
最低0.47元/天 解锁文章
小张学编程
关注
  • 2
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery 效果使用详解
10-23
jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便，本篇文章给大家介绍jquery效果使用详解，感兴趣的朋友一起学习吧
JavaScript开发利器之jQuery
你好, 我在学java的博客
04-30 4479
基本选择器是jQuery中最常用的选择器, 也是最简单的选择器, 它通过id, class和标签名来查找DOM对象 1.5.2 jquery层次选择器 如果想要通过DOM元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器 1.5.3 基础过滤选择器 基础过滤选择器介绍: 1.5.4 内容过滤选择器 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上 1.5.5 可见度过滤选择器 可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
JQuery 详细教程
qq15035899256的博客
05-13 5744
本文是对JQuery的学习，首先认识了JQuery包装集对象和Dom对象的区别，又学习了JQuery选择器，后续又学习了JQuery对元素的增删查改，以及加载事件和绑定事件，最后使用了JQuery Ajax的四种封装方法。
jQuery详解
m0_52634705的博客
05-24 538
jQuery一、概述二、基本使用三、jquery选择器四、样式操作五、操作元素类名六、属性操作七、内容文本操作八、元素操作九、事件绑定十、获取元素的尺寸、位置 一、概述 1、什么是jQuery jQuery是一个快速、小型且功能丰富的JavaScript库。通过易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作、事件处理、动画和Ajax等操作变得更加简单。结合了多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。 2、jQuery 优点 轻量级，核心文件才十几k
一个小时学会jQuery<最通俗易懂的讲解>
chetianyao8457的博客
08-07 1461
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读...
jQuery入门教程
hy250_的博客
05-17 7382
一、jQuery是什么？ jQuery是一种方法库 语法：$ jQuery 二、jQuery文件引用 1、本地引用 语法：<script type="text/javascript" src="jquery.js"></script> 2、远程调用： 语法：<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery1.4....
jQuery入门、选择器、事件、静态方法、动画
qq_51066068的博客
04-20 2047
目录 第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuery事件 3.1.事件的基本使用 3.2.事件代理 3.3.事件类型 4.jQueryDOM操作 5.jQuery静态方法 5.1.数组及对象操作 5.2.测试操作 5.3.字符串操作 6.jQuery动画 第一章-jQuery基础知识 第一天的授课重点在于梳理与对比..
JQuery详解JQuery详解
05-07
JQuery详解JQuery详解JQuery详解JQuery详解JQuery详解JQuery详解
jQuery详解与实践.pdf
03-16
一本很好的jQuery的书，想深入理解jQuery的朋友，赶快下载吧！
JQuery入门基础
m0_74934282的博客
03-30 8557
jQuery 是一个快速、简洁的 **`JavaScript 库`**，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JavaScript库**`仓库`**： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。**`JavaScript库`**：即 library，是一个封装好的特定的集合（方法和函数）。
jQuery使用（超详细）
最新发布
Eliauk_Doubling的博客
08-12 1万+
会把这个dom对象转换成jQuery对象,即 [object HTMLSpanElement] ======> [object Object]* 4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回。* 2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象。* 3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象。*1. 传入参数为[函数]是，在文档加载完成以后执行这个函数。jQuery对象的本质时dom对象的数组+jQuery提供的一系列的功能函数。
jQuery 简介
MX22724的博客
01-30 2391
jQuery 简介
jQuery - 获得内容和属性
BishopTylaor的博客
04-11 318
获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： ● text() - 设置或返回所选元素的文本内容 ● html() - 设置或返回所选元素的内容（包括 HTML 标记） ● val() - 设置或返回表单字段的值 $("#btn1").click(function(){ alert("Text: ...
JQuery(下) DOM操作&习题
LP_5371的博客
06-28 1631
jQuery DOM 操作文本 常用方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作文本</title> </head> <body>
什么是jQuery 怎么使用jQuery
yushu778的博客
03-16 2117
jQuery特点 1.写的代码少，做的事情多。（代码简洁）...
jQuery基础知识
woyejiu的博客
08-26 3113
jQuery基础知识
jQuery概述及基本语法
来日可期的博客
06-01 1048
一、jQuery简介 1. 简介 jQuery是继Prototype之后又一个优秀的JavaScript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插...
jQuery(JS库) | 一文带你掌握jQuery的使用
m0_61933976的博客
01-06 7627
jQuery(JS库) | 一文带你掌握jQuery的使用
jquery源码逐行详解
05-18
jQuery 是一个非常流行的 JavaScript 库，它简化了 JavaScript 代码的编写和操作 DOM 的过程。以下是 jQuery 源码的逐行详解： ```javascript (function( global, factory ) { "use strict"; if ( typeof module === "object" && typeof module.exports === "object" ) { // 如果是 CommonJS 规范，则添加到模块中 // 在 Node.js 环境中，module 对象代表当前模块，exports 对象是 module 的属性，用于指定模块对外输出的接口。 // 通过 exports 对象把模块导出，其他文件就可以通过 require() 函数来引用该模块。 module.exports = global.document ? factory( global, true ) : function( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }; } else { // 如果是浏览器环境，则将 jQuery 添加到全局对象 window 中 factory( global ); } // 在这里传入了两个参数，global 和 factory，分别表示全局对象和一个工厂函数 }(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { "use strict"; var deletedIds = []; var document = window.document; var slice = deletedIds.slice; var concat = deletedIds.concat; var push = deletedIds.push; var indexOf = deletedIds.indexOf; // ... ``` 这段代码定义了一个立即执行函数，其目的是为了防止变量污染全局作用域。如果是在 Node.js 环境中，那么需要将 jQuery 添加到模块中，否则将 jQuery 添加到全局对象 window 中。然后定义了一些变量，包括 deletedIds、document、slice、concat、push 和 indexOf 等。这些变量都是为了后面的代码服务。 ```javascript var version = "3.6.0", // 定义了一个空函数 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }, // ... ``` 这里定义了 jQuery 的版本号和 jQuery 函数。jQuery 函数是一个工厂函数，用于创建 jQuery 对象，其实现是通过调用 jQuery.fn.init 函数实现的。 ```javascript jQuery.fn = jQuery.prototype = { // jQuery 对象的方法和属性 }; jQuery.fn.init.prototype = jQuery.fn; ``` 这里定义了 jQuery 对象的原型，包括 jQuery.fn 和 jQuery.prototype。jQuery.fn 和 jQuery.prototype 是等价的，都是为了扩展 jQuery 对象的方法和属性。同时还将 jQuery.fn.init 的原型指向了 jQuery.fn，这样可以让 jQuery.fn.init 实例化出来的对象拥有 jQuery.fn 的方法和属性。 ```javascript jQuery.extend = jQuery.fn.extend = function() { // ... }; jQuery.extend({ // 一些静态方法和属性 }); jQuery.fn.extend({ // 一些实例方法和属性 }); ``` 这里定义了 jQuery 的 extend 方法，用于实现对象的合并。同时还定义了一些静态方法和属性，以及一些实例方法和属性。 ```javascript jQuery.expr = { // ... }; jQuery.expr[ ":" ] = { // ... }; ``` 这里定义了 jQuery 的表达式引擎，用于实现选择器的解析。其中，jQuery.expr 是一个对象，存储了所有的选择器类型。jQuery.expr[ ":" ] 表示的是伪类选择器。 ```javascript jQuery.ajax = function( url, options ) { // ... }; jQuery.fn.load = function( url, params, callback ) { // ... }; ``` 这里定义了 jQuery 的 ajax 和 load 方法，用于实现异步请求和载入 HTML 片段。 ```javascript var // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$; jQuery.noConflict = function( deep ) { // ... }; if ( typeof noGlobal === "undefined" ) { window.jQuery = window.$ = jQuery; } ``` 这里定义了 jQuery 的 noConflict 方法，用于解决命名冲突问题。同时还保存了 window.jQuery 和 window.$ 的引用，以便在需要时恢复原来的状态。最后，将 jQuery 和 $ 添加到全局对象 window 中。 以上是 jQuery 源码的部分逐行详解，希望能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值