首页 > 其他分享 >01_jQuery 核心函数和选择器

01_jQuery 核心函数和选择器

时间：2023-10-31 14:46:11浏览次数：30  
标签：jQuery 01 DOM 对象 元素 js 选择器

目录

一、jQuery概述

1.1、什么是框架?

软件框架（software framework），通常指的是为了实现某个业界标准或完成特定基本任务的软件组件规范，也指为了实现某个软件组件规范时，提供规范所要求之基础功能的软件产品。

框架的功能类似于基础设施，与具体的软件应用无关，但是提供并实现最为基础的软件架构和体系。软件开发者通常依据特定的框架实现更为复杂的商业运用和业务逻辑。这样的软件应用可以在支持同一种框架的软件系统中运行。

​简而言之，框架就是制定一套规范或者规则（思想），大家（程序员）在该规范或者规则（思想）下工作。或者说使用别人搭好的舞台来做编剧和表演。

1.2、主流的前端框架（UI/JS）框架

如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富。

要做WEB前端，就需要知道前端到底是什么，需要学习那些知识；前端至少要懂的三个部分：HTML，CSS，JavaScript（简称JS），那首先先明确这三个概念：

  • HTML负责结构，网页想要表达的内容由html书写。

  • CSS负责样式，网页的美与丑由它来控制

  • JS负责交互，用户和网页产生的互动由它来控制。

web前端发展至今，演变出了无数的库和框架；说到库第一时间想到的都是是jquery。大部分人在刚接触库的时候也是从jQuery开始的；今天我们就来说说前端发展到现在都有哪些好用的库框架。

2016年开始应该是互联网飞速发展的几年，同时也是Web前端开发非常火爆的一年，Web 前端技术发展速度让人感觉几乎不是继承式的迭代，而是一次次的变革和创造。这一年中有很多热门的前端开发框架，下面为大家总结2016年至今最受欢迎的几款前端框架。

1.2.1、JS框架库

1、Node.Js

描述：

Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。

Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

简单的说 node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome javascript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

用途：

  • RESTful API（目前比较流行的接口开发风格）

这是NodeJS最理想的应用场景，可以处理数万条连接，本身没有太多的逻辑，只需要请求API，组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本，入站请求也是少量的文本，因此流量不高，一台机器甚至也可以处理最繁忙的公司的API需求。

  • 统一Web应用的UI层

目前MVC的架构，在某种意义上来说，Web开发有两个UI层，一个是在浏览器里面我们最终看到的，另一个在server端，负责生成和拼接页面。

不讨论这种架构是好是坏，但是有另外一种实践，面向服务的架构，更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用，就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。那些后端程序员们根本不操心具体数据是如何从一个页面传递到另一个页面的，他们也不用管用户数据更新是通过Ajax异步获取的还是通过刷新页面。

  • 大量Ajax请求的应用

​例如个性化应用，每个用户看到的页面都不一样，缓存失效，需要在页面加载的时候发起Ajax请求，NodeJS能响应大量的并发请求。　　总而言之，NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。

2、Angular.Js

描述：

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

用途：

1.通过描述我们应该就能很好的明白AngularJS的真实用途了，MVVM，模块化，自动化双向数据绑定等等。除了简单的dom操作外，更能体现Js编程的强大。当然应用应该视场合而定。
2.它的出现比较早，也是曾经比较流行的前端js框架，但是今年来随着reactJS与VueJS的出现，它的热度在慢慢降低。

3、JQuery Mobile

描述：

jQuery Mobile是jQuery 在手机上和平板设备上的版本。

jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。

用途：

  • jQuery Mobile 是创建移动 web 应用程序的框架。

  • jQuery Mobile 适用于所有流行的智能手机和平板电脑。

  • ​jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

4、Zepto.js

描述:

随着移动端的愈加火爆，目前很多HTML5的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native等等。

Zepto是一个轻量级的针对现代高级浏览器的JavaScript 库， 它与jquery 有着类似的api。 如果你会用 jquery，那么你也会用 zepto。

Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。

应用：移动端应用

思考：jQuery和Zepto.js的区别在哪里？

  • jQuery更多是在PC端被应用，因此，考虑了很多低级浏览器的的兼容性问题；而Zepto.js则是直接抛弃了低级浏览器的适配问题，显得很轻盈；

  • Zepto.js在移动端被运用的更加广泛；更注重在移动端的使用

  • ​jQuery的底层是通过DOM来实现效果的，zepto.js 是用css3来实现的；

5、Requirejs

描述：

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。

用途：模块化动态加载。

6、Vue.js(目前市场上的主流)

描述：

Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。

用途：目前市场上比较流行的前后端分离的开发模式，大多前端都是vueJS做的，具体的优点请大家看官方文档。

7、React.js（gihub排名仅次于vue.js）

描述：

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

​React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

1.2.2、UI框架

UI即User Interface(用户界面)的简称。泛指用户的操作界面，UI设计主要指界面的样式，美观程度。而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

​ui框架也就是ui模板。这和编程里的封装有些类似，就是说一些ui设计的常用效果已经被别人封装成了ui框架，你想实现哪个效果只要直接调用就行，不需要太纠结于底层实现。

什么才是真正的前端框架？前端框指的是哪些？那UI框架呢？
https://bbs.csdn.net/topics/392559617

简单来说：前端框架和UI框架的区别,一个注重逻辑，一个注重颜值。

1、Bootstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

​国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

2、Layui

layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

事实上，layui更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。

layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块！

​layui 认为这种轻量的组织方式，仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化，也正是能让人避开工具的复杂配置，重新回归到原生态的 HTML/CSS/JavaScript本身！

3、ElementUI

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。适合于Vue的UI框架；

4、Mint UI

Mint-UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

​真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

​考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

​依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 100+ K。

5、QUICK UI

QUICK UI是一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量，提高开发效率，快速构建功能强大、美观、兼容的web应用系统。

6、Amaze UI

描述:

​Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

​Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

1.2.3、框架和类库的区别

框架，是一套完整的解决方案，对项目侵入性大，项目如果需要更换框架，则需要重新架构整个项目。

库，提供某些小的功能，对项目侵入性小，如果某个库无法满足需求，可以很容易切换到其他库实现需求。

比如，从jQuery切换到 Zepto ，或者从EJS切换到art-template

1.3、什么是jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

随着JavaScript、CSS、Ajax等技术的进步，越来越多的开发者将丰富多彩的程序及其功能进行封装，供其他人可以调用这些封装好的程序组件（框架）

​jQuery说白了就是一些人写好的一些具有某些功能的组件,比如图片的切换,div的隐藏和显示等,之前使用js需要些很多js代码,但是jQuery封装了之后,就可以直接调用已经写好的组件来实现这些功能,而不需要再写很多的js代码。

1.4、jQuery的特点

1：轻量级的JS函数库

​ jQuery的核心js文件几十KB，不会影响页面加载速度。

2：强大的DOM选择器

3：链式表达式

​ jQuery的链式操作可以把多个操作写在一行代码里，更为简洁。

4：简洁的样式操作，动画支持

5：Ajax操作支持

​ jQuery简化了Ajax操作，后台只需返回一个json格式的字符串就能完成与前台的通信。

6：跨浏览器兼容

​ jQuery兼容了所有主流浏览器。

7：插件扩展开发

​ jQuery有着丰富的第三方插件，如：树形菜单，日期控件，图片切换插件，弹出窗口等等基本前台页面上的组件。

​ 而且用jQuery插件做出来的效果很酷炫，并且可以根据自己的想法去改写和封装插件，简单实用。

8：可扩展性强

​ jQuery提供了扩展接口：jQuery.extend(object),可以在jQuery的命名空间上增加新函数。jQuery的所有插件都是基于这个扩展接口开发的。

1.5、jQuery的优缺点

（1）优点：

​ 1：脚本与页面的分离

​ 2：代码简洁

​ 3：性能支持好

​ 4：是各大厂商使用的类库的标准

​ 5：丰富的插件开发

​ 6：节约学习成本

（2）缺点：

​ 1：不能向后兼容，不能兼容早期版本，早期版本插件不能用。

​ 2：在同个页面使用多个插件，会出现冲突现象。

​ 3：jQuery版本稳定性较差，版本更新较快。

1.6、为什么要使用jQuery

学习JS的遇到的痛点

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        #box {
            position: relative;
            background-color: red;
            width: 100px;
            height: 100px;
            color: white;
        }
    </style>
</head>

<body>

    <input type="button" value="开始" id="btn">
    <div id="box"></div>
    <script>
        window.onload = function () {
            // 给btn添加点击事件; 当我点击按钮的时候,让box移动
            var btn = document.getElementById("btn");
            var box = document.getElementById("box");

            var step = 5; // 每次移动6
            var target = 500; // 目标
            btn.onclick = function () {
                setInterval(function () {
                    if (box.offsetLeft >= target) {
                        box.style.left = target + "px";
                        return;
                    }
                    // box.offsetLeft 获取box在页面中的x轴位置
                    box.style.left = box.offsetLeft + step + "px";
                    // 给box设置文本内容
                    setInnerText(box, "目前div距离左边的位置:" + box.style.left);
                }, 20)
            }

            function setInnerText(element, content) {
                // 判断当前浏览器是否支持 innerText
                if (typeof element.innerText === 'string') {
                    element.innerText = content;
                } else {
                    element.textContent = content;
                }
            }
        }
    </script>

</body>

</html>
  • window.onload事件只能出现一次；如果出现多次，后面的事件会覆盖掉前面的事件；
  • 代码容错性差
  • 浏览器兼容性差
  • 简单功能实现很繁琐，比如：渐变的动画效果

jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。

Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。

comm.js是我们自己封装的库，而jQuery是别人帮我们封装好的库。

虽然目前 MVVM 框架很流行，但 jQuery 依然占据一定地位。某些特定场景的项目 jQuery 依然是最好的选择，jQuery帮助我们解决了太多的兼容性问题，而且对于有一定JS基础的人来说学习 jQuery 的成本很低，没必要去掌握全部API，只要会查文档就可以。虽然新项目中不一定会使用 jQuery ，但是学习 jQuery ，尤其是去阅读 jQuery 源码，理解其设计思想、设计模式，你将会颇有收获。

二、jQuery入门

2.1、jQuery下载和引入

2.1.1、jQuery的下载

我们可以通过官网https://jquery.com/ 或者 http://www.jq22.com/jquery-info122 下载jQuery；

2.1.2、jQuery的引入

使用jQuery非常简单，只需要在html页面的<head></head>之间引入下载的jQuery类库即可。如：

<script type="text/javascript" src="jquery.min.js"></script>

注:引入jquery的标签对不可以写js代码
将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。

2.2、Jquery初体验

2.2.1、jQuery实现动画

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            margin-top: 10px;
            margin-left: 100px;
        }

        #bigDiv {
            width: 183px;
            height: 550px;
            overflow: hidden;
            background: url("images/customer.jpg");
        }

        #imgDiv {
            margin: 210px auto 0;
            text-align: center;
            font-size: 14px;
            user-select: none;
            cursor: pointer;
            color: orangered;
            font-weight: bold;
        }

        #imgDiv>img {
            margin-top: -3px;
            cursor: pointer;
        }

        #imgDiv p {
            line-height: 26px;
        }

        #imgDiv>div {
            display: none;
        }
    </style>
</head>

<body>
    <div id="bigDiv">
        <div id="imgDiv">
            <img src="images/reg.jpg" alt="">
            <div>
                <p>点击注册</p>
                <p>认证中心</p>
            </div>
            <img src="images/buy.jpg" alt="">
            <div>
                <p>咨询</p>
                <p>投诉</p>
                <p>举报</p>
                <p>退款</p>
            </div>
            <img src="images/sale.jpg" alt="">
            <div>
                <p>安全中心</p>
                <p>物流中心</p>
                <p>资金流动</p>
                <p>纠纷处理</p>
            </div>
            <img src="images/person.jpg" alt="">
            <div>
                <p>修改资料</p>
                <p>账号申诉</p>
            </div>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        $("#imgDiv>img").click(function () {
            $(this).next("div").slideToggle(300).siblings("div").slideUp(300);
        })
    </script>
</body>

</html>

对比以前的代码，是不是觉得jQuery实现非常简洁啊，jQuery的宗旨就是：write less，do more；

2.2.2、隐式迭代

​在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用,这就叫做隐式迭代。

jQuery对象就是一个对象数组(伪数组)，对其调用方法其实是对这个数组中每个元素迭代调用这个方法，相当于使用了循环，遍历每个元素调用该方法。

​比如添加单击事件:对于DOM对象获取到的多个元素,我们需要通过循环给其分别添加事件,但是jQuery对象则不需要,只要调用jQuery里面的点击事件方法,就可以给所有添加事件。

// JS给获取到的所有a标签添加鼠标单击事件:
var aArr=document.getElementsByTagName('a');
for(var i=0;i<aArr.length;i++){
	aArr[i].onclick=function(){
		alert("click me!");
	}
}

// jQuery给获取到的所有a标签添加鼠标单击事件
$("a").click(function(){
	alert("click me！");
});

2.2.3、链式编程

链式编程，是将多个操作（多行代码）通过点号"."链接在一起成为一句代码。

​首先来看一个例子：

$("#myphoto").css("border","2px solid #FF0000").attr("alt","good");

​对一个jQuery对象先调用了css()函数修改样式，然后使用attr()函数修改属性，这种调用方式像链一样，所以称为“链式操作”。

链式操作能够让代码变得简洁，因为往往可以在一条语句中实现以往多条语句才能完成的任务。比如如果不使用链式操作，需要用两条语句才能完成上面的任务：

$("#myphoto").css("border","2px solid #FF0000");

$("#myphoto").attr("alt","good");

​除了增加了代码量，还调用了两次选择器，降低了速度。

但是链式操作不应该太长，否则会造成语句难以理解，因为要查看jQuery对象当前的状态并不是容易的事，尤其如果涉及jQuery对象中元素的增删操作是更加难以判断。

​并不是所有的jQuery函数都可以使用链式操作。这与链式操作的原理有关，之所以可以实现链式操作是因为其中的每个函数返回的都是jQuery对象本身。


链式编程可以使得代码可读性高，链式编程的原理就是返回一个this对象，就是返回本身，达到链式效果

2.3、jQuery思想理解

2.3.1、设计思想

​ jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

​ 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

​ jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果

​ jQuery设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来

​ jQuery设计思想之四，就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。

​ jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

​ jQuery设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。

​ jQuery设计思想之七，就是把事件直接绑定在网页元素之上。

​ 最后，jQuery允许对象呈现某些特殊效果。

More:http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html

2.3.2、jQuery的$符号

JS命名规范允许出现的字符有：数字、字母、下划线、$。

JS命名规范允许作为变量命名开头的字符有：字母、下划线、$；但是，不允许以数字作为变量命名的开头。

var $ = "我是字符串";

var $ = 123;

function $() {
    alert("我是函数$");
}

jQuery使用$的原因是： 书写简洁， 相对于其他字符与众不同， 容易被记住。

JQuery占用了两个变量： $ 和 jQuery。

当在代码中打印 $ 和 jQuery时：

<script src="jquery.js"></script>
<script type="text/javascript">
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);
</script>

显示的结果如下：

从结果中可以得出结论： $代表的就是jQuery。

那么应该如何理解jQuery里面的 $ 符号呢？

$ 实际上表示的是一个函数名， 如下所示：

$() //调用上面我们自定义的函数$

$(document).ready(function () {

}) //调用入口函数

$(function () {

}) //调用入口函数

$("#container") //调用id属性为container的元素

$("div") //获取所有的div标签元素

如上方所示， jQuery里面的$函数， 根据传入参数的不同， 进行不同的调用， 实现不同的功能， 返回的jQuery对象。

jQuery这个js库， 除了 $ 之外， 还提供了另外一个函数：jQuery。

jQuery函数跟 $ 函数的关系： jQuery === $。

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

​第一次学习jQuery,经常分辨不清哪些是jQuery对象，哪些是 DOM对象，因此需要了解jQuery对象和DOM对象以及它们之间的关系。

2.3.3.1、DOM对象

文档对象模型简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。

  • DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、
    这些对象的行为和属性以及这些对象之间的关系。
  • 通过DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的
    内容进行修改和删除，同时也可以创建新的元素。
  • DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和VBScript 使用。
  • DOM对象，即是我们用传统的方法(javascript)获得的对象。
  • DOM准确说是对文档对象的一种规范标准(文档对象模型),标准只定义了属性和方法行为。

简单来说：DOM对象指的是，使用JavaScript操作DOM返回的结果。

var btn = document.getElementById("btnShow"); // btn就是一个DOM对象

2.3.3.2、jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法;反过来Dom对象也不能使用jQuery的方法。

简单来说：jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果。

jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。

var $btn = $("#btnShow"); // $btn就是一个jQuery对象

案例：DOM操作返回值和jQuery操作返回值

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

<div>我是第1个div</div>
<div class="box">我是第2个div</div>
<div id="box">我是第3个div</div>
<div class="box">我是第4个div</div>
<div>我是第5个div</div>
<script>
    // 通过js获取页面元素节点
    var box = document.getElementById("box");
    var cboxs = document.getElementsByClassName("box");
    var divs = document.getElementsByTagName("div");
    console.log(box);
    console.log(cboxs);
    console.log(divs);
    console.log("------------------------")

    // 通过jQuery获取页面元素
    var jbox = $("#box");
    var jCboxs = $(".box");
    var jdivs = $("div");
    console.log(jbox);
    console.log(jCboxs);
    console.log(jdivs);

    var arr = [1, 2, 3, 4, 5];
    console.log(arr)
</script>

案例：jQuery对象和DOM对象API不能混搭

// 通过js获取页面元素节点
var box = document.getElementById("box");
// DOM对象调用DOM API,没有问题
box.style.background = "red";
// DOM对象没有css(),报错box.css is not a function
// box.css("background", "yellow");

// 通过jQuery获取页面元素
var jbox = $("#box");
// jQuery对象调用jQuery API,没有问题
jbox.css("background", "yellow");
// jQuery对象调用DOM API,存在问题：Cannot set property 'background' of undefined
jbox.style.background = "red";

2.3.3.3、jQuery对象转成DOM对象

jQuery对象不能使用DOM中的方法，但如果对jQuery对象提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有两种处理方法。

（1）jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。例如只有一个类名为“bind”的DIV，在控制台输出console.log($(".bind"))

如图，通过调试工具，我们可以清除的看到，jQuery对象是一个类数组对象，我们可以通过$(".bind")[0]获得DOM对象。

（2）另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。还是上面的.bind对象 ，我们可以通过 $(".bind").get(0)获得DOM对象。如图：

2.3.3.4、DOM对象转成jQuery对象

对于一个DOM对象，只需要用\(()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为\)(DOM对象), 转换后，就可以任意使用jQuery中的方法了。

注意： 平时用的jQuery对象都是通过\(()函数制造出来的，\)()函数就是一个jQuery对象的制造工厂。

图解：

所有这些，都体现了jQuery对js的封装！

【思考】JS跟jQuery的区别是什么？

2.4、如何使用jQuery

2.4.1、使用步骤

  • 第一步引入jQuery文件
  • 第二步入口函数
  • 第三步编写功能代码

2.4.2、版本介绍

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了， 推荐使用版本1.8.3 和 1.11.3

2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

min：压缩版，压缩过后，体积会更小

​ 压缩指的是：把注释、空格、换行全部去掉，把变量名称尽可能的换成更加简短的字符。

​ 压缩的主要目的：就是让文件变的更小。

​ 平时开发过程中，这两个文件使用哪个都可以；但是，项目上线的时候，推荐使用压缩版。

注意：引包注意点

第一点：在使用jQuery之前，先把jQuery文件引到页面中来

如果在使用jQuery之前，没有引用jQuery文件，会报错：

第二点：src路径一定要写正确

如果src路径写错，也会报错：

2.4.3、jQuery的入口函数

原生的JS的入口函数指的是：window.onload = function(){}: 如下所示：

<script type="text/javascript">
	//原生js的入口函数。页面上所有内容加载完毕， 才执行。
	//不仅要等文本加载完毕， 而且要等图片也加载完毕， 才执行函数。
    window.onload = function () {
        alert("hello");
    }
</script>

而jQuery的入口函数， 有以下几种写法：

写法一：

<script type="text/javascript">
	//文档加载完毕， 图片不加载的时候， 就可以执行这个函数。
    $(document).ready(function () {
        alert("hello");
    })
</script>

写法二：(写法一的简洁版)

<script type="text/javascript">
    //文档加载完毕， 图片不加载的时候， 就可以执行这个函数。
    $(function () {
        alert("hello");
    })
</script>

写法三：

<script type="text/javascript">
    //文档加载完毕， 图片也加载完毕的时候， 再执行这个函数。
    $(window).ready(function () {
        alert("hello");
    })
</script>

2.4.4、jQuery入口函数与js入口函数的区别

区别一： 书写个数不同：

​（1）JS的入口函数只能出现一次， 出现多次会存在事件覆盖的问题。

（2）jQuery的入口函数， 可以出现任意多次， 并不存在事件覆盖问题。

区别二：执行时机不同：

（1）JS的入口函数是在所有的文件资源加载完成后， 才执行。这些文件资源包括：页面文档、外部的JS文件、外部的CSS文件、图片等。

（2）jQuery的入口函数， 是在文档加载完成后就执行。 文档加载指的是：DOM树加载完成后， 就可以操作DOM了， 不用等到所有的外部资源都加载成功。

Ps： 文档加载的顺序为：从上往下， 边解析边执行。

三、 jQuery核心函数

  • jQuery([selector,[context]])
这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。

jQuery 的核心功能都是通过这个函数实现的。 

jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。	

默认情况下, 如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。	

参数：
	selector,[context]
		selector:用来查找的字符串
		context:作为待查找的 DOM 元素集、文档或 jQuery 对象。
	element
		一个用于封装成jQuery对象的DOM元素
	elementArray
		一个用于封装成jQuery对象的DOM元素数组。
注：jQuery()，返回一个空的jQuery对象。

示例代码:

// 返回一个空的jQuery对象。
$("div > p");

// 设置页面背景色。
$(document.body).css( "background", "black" );

// 隐藏一个表单中所有元素。
$(myForm.elements).hide()

// 在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
$("input:radio", document.forms[0]);
  • jQuery(html,[ownerDocument])
根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等.

你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。

当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用$("<span/>") 或 $("<span></span>") ，但不推荐 $("<span>")。在jQuery 中，这个语法等同于$(document.createElement("span")) 。

参数：
	html,[ownerDocument]
    	html:用于动态创建DOM元素的HTML标记字符串
		ownerDocument:创建DOM元素所在的文档
    html,props
    	html:用于动态创建DOM元素的HTML标记字符串
		props:用于附加到新创建元素上的属性、事件和方法

示例代码:

// 动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。
$("<div><p>Hello</p></div>").appendTo("body");

// 创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");

// 动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。同时设置属性和事件
$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");
  • jQuery(callback)
$(document).ready()的简写。

允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。 你可以在一个页面中使用任意多个$(document).ready事件。

参数：
	callback
		当DOM加载完成后要执行的函数

示例代码:

$(function(){
  // 文档就绪
});
  • jQuery.holdReady(hold)
暂停或恢复.ready() 事件的执行。 

在$.holdReady()方法允许调用者延迟jQuery的ready事件。这种先进的功能，通常是使用动态脚本加载器，要加载的JavaScript比如 jQuery插件，如额外的ready事件才让事件发生，即使在DOM可能准备。此方法必须早在文件调用，在这样<head> jQuery脚本后，立即标记。ready事件之后调用此方法即使已经发射也将没有任何效果。

要延迟ready事件，第一次调用的$.holdReady(true)。当ready事件应该执行时，调用$.holdReady(false) 。请注意，多个holds可以放在ready事件上，每个$.holdReady(true)逐一调用。ready事件将不会执行，直到所有已发布了相应的一个$.holdReady(false) 和正常的文件准备好条件得到满足。（见ready的更多信息。）

参数：
    hold
    	指示是否暂停或恢复被请求的ready事件

示例代码：

// 延迟就绪事件，直到已加载的插件。
$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});

四、什么是jQuery选择器

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。

jQuery选择器很强大：jQuery实现了从CSS1到CSS3所有的选择器以及其他常用的选择器。

各种选择器之间可以相互代替，所以，平时真正用到的只是最常用的选择器。

4.1、基本选择器

  • #id：根据给定的ID匹配一个元素。
  • element：根据给定的元素名匹配所有元素
  • .class：根据给定的类匹配元素。
  • *：匹配所有元素
  • selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回。

4.2、层级选择器

  • ancestor descendant：在给定的祖先元素下匹配所有的后代元素
  • parent > child：在给定的父元素下匹配所有的子元素
  • prev + next：匹配所有紧接在 prev 元素后的 next 元素
  • prev ~ siblings： 匹配 prev 元素的所有同辈 siblings 元素

4.3、基本过滤选择器

  • :first：获取第一个元素
  • :not(selector)： 去除所有与给定选择器匹配的元素
  • :even：匹配所有索引值为偶数的元素，从 0 开始计数
  • :odd：匹配所有索引值为奇数的元素，从 0 开始计数
  • :eq(index)： 匹配一个给定索引值的元素
  • :gt(index)：匹配所有大于给定索引值的元素
  • :lang()1.9+：选择指定语言的所有元素。
  • :last()：获取最后个元素
  • :lt(index)： 匹配所有小于给定索引值的元素
  • :header：匹配如 h1, h2, h3之类的标题元素
  • :animated： 匹配所有正在执行动画效果的元素
  • :focus：匹配当前获取焦点的元素。
  • :root1.9+： 选择该文档的根元素。
  • :target1.9+：选择由文档URI的格式化识别码表示的目标元素。

4.4、内容选择器

  • :contains(text)：匹配包含给定文本的元素
  • :empty：匹配所有不包含子元素或者文本的空元素
  • :has(selector)： 匹配含有选择器所匹配的元素的元素
  • :parent：匹配含有子元素或者文本的元素

4.5、可见性选择器

  • :hidden：匹配所有不可见元素，或者type为hidden的元素
  • :visible：匹配所有的可见元素

4.6、属性选择器

  • [attribute]：匹配包含给定属性的元素。
  • [attribute=value]： 匹配给定的属性是某个特定值的元素
  • [attribute!=value] ：匹配所有不含有指定的属性，或者属性不等于特定值的元素。
  • [attribute^=value] ：匹配给定的属性是以某些值开始的元素
  • [attribute$=value] ：匹配给定的属性是以某些值结尾的元素
  • [attribute*=value] ：匹配给定的属性是以包含某些值的元素
  • [attrSel1][attrSel2][attrSelN] ：复合属性选择器，需要同时满足多个条件时使用。

4.7、子元素选择器

  • :first-child：匹配第一个子元素
  • :first-of-type1.9+：选择所有相同的元素名称的第一个兄弟元素。
  • :last-child：匹配最后一个子元素
  • :last-of-type1.9+：选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
  • :nth-child：匹配其父元素下的第N个子或奇偶元素
  • :nth-last-child()1.9+：选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
  • :nth-last-of-type()1.9+：选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
  • :nth-of-type()1.9+：选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
  • :only-child：如果某个元素是父元素中唯一的子元素，那将会被匹配
  • :only-of-type1.9+：选择所有没有兄弟元素，且具有相同的元素名称的元素。

4.8、表单选择器

  • :input：匹配所有 input, textarea, select 和 button 元素
  • :text：匹配所有的单行文本框
  • :password：匹配所有密码框
  • :radio：匹配所有单选按钮
  • :checkbox：匹配所有复选框
  • :submit：匹配所有提交按钮
  • :image：匹配所有图像域
  • :reset：匹配所有重置按钮
  • :button：匹配所有按钮
  • :file：匹配所有文件域
  • :hidden：匹配所有不可见元素，或者type为hidden的元素

4.9、表单对象属性选择器

  • :enabled：匹配所有可用元素
  • :disabled：匹配所有不可用元素
  • :checked：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
  • :selected：匹配所有选中的option元素

标签：jQuery,01,DOM,对象,元素,js,选择器
From： https://www.cnblogs.com/51fly/p/17799763.html

相关文章

  • 03_jQuery 事件和动画
    目录一、事件页面载入ready(fn)事件处理on(eve,[sel],[data],fn)1.7+off(eve,[sel],[fn])1.7+bind(type,[data],fn)one(type,[data],fn)trigger(type,[data])triggerHandler(type,[data])unbind(t,[d|f])事件委派delegate(s,[t],[d],fn)undelegate([s,[t],fn])事件切换hover([ove......
  • 02_jQuery DOM操作
    目录一、jQuery对象访问each(callback)size()和lengthselectorcontextget([index])index([selector|element])二、数据缓存data([key],[value])removeData([name|list])三、属性操作属性attr(name|pro|key,val|fn)removeAttr(name)prop(n|p|k,v|f)removeProp(name)attr()方法和......
  • [极客大挑战 2019]BuyFlag
    打开网页，发现右手边的菜单中有个PAYFLAG，打开后跳转到pay.php中，其中网页源代码有提示，主要内容如下：IfyouwanttobuytheFLAG:YoumustbeastudentfromCUIT!!!Youmustbeanswerthecorrectpassword!!!OnlyCuit'sstudentscanbuytheFLAG ~~~postmoneyand......
  • [RoarCTF 2019]Easy Calc
    题目一打开，是一个计算器。主页源代码如下，这里可以看到有一个calc.php文件，并且提示存在WAF（疑）。<!--I'vesetupWAFtoensuresecurity.--><script>$('#calc').submit(function(){$.ajax({url:"calc.php?num="+encodeURIComponent($(&q......
  • [极客大挑战 2019]PHP
    打开靶机页面后发现有提示：因为每次猫猫都在我键盘上乱跳，所以我有一个良好的备份网站的习惯。结合常用的备份字典，直接扫到存在www.zip文件，下载后解压打开，发现源码。在index.php中，关键代码如下：<?phpinclude'class.php';$select=$_GET['select'];$res=unserialize......
  • [极客大挑战 2019]PHP
    打开靶机页面后发现有提示：因为每次猫猫都在我键盘上乱跳，所以我有一个良好的备份网站的习惯。结合常用的备份字典，直接扫到存在www.zip文件，下载后解压打开，发现源码。在index.php中，关键代码如下：<?phpinclude'class.php';$select=$_GET['select'];$res=unseria......
  • [安洵杯 2019]吹着贝斯扫二维码
    [安洵杯2019]吹着贝斯扫二维码压缩包里面有个flag.zip文件，但是有密码无法打开并且注释信息里有一串字符GNATOMJVIQZUKNJXGRCTGNRTGI3EMNZTGNBTKRJWGI2UIMRRGNBDEQZWGI3DKMSFGNCDMRJTII3TMNBQGM4TERRTGEZTOMRXGQYDGOBWGI2DCNBY经过base32解码和16进制转换后得到另一串，但是显......
  • day01
    5.今日内容概要1.typora软件 下载与安装 文件路径 主要功能2.markdown语法3.网络博文编写教程4.计算机本质5.计算机五大组成部分6.计算机三大核心硬件6.typora软件简介typora软件是一款文本编辑器是目前非常火爆的文本编辑器默认情况下该软件是收费的!!......
  • 伺服电机入门01
    伺服电机入门01伺服电机=电机+编码器，电机闭环电机：pmsmbldc有刷电机acim电机步进电机等，编码器：绝对编码器和增量编码器等编码器入门：信号：总线信号RS422RS485基础上面的总线方式以下面几种信号是可以细分，也就是通过细分增加编码器的分辨率，分辨率不直接代表编码器的精......
  • 用migrate将映像数据写入数据库常见问题01
    django开发时，models.py文件创建正常，makemigrations也正常，但migrate却提示没有需要迁移的数据，查看sqlite数据库也没有建立相应的数据表。相关文件#coding:utf-8#file-name:models.pyfromdjango.dbimportmodelsclassDepartment(models.Model): '''部门表''' title=mode......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99