不要问我前端代码怎么写，我只会告诉你我用JQuery...(一)

2022-06-09 375

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jQuery 底层 AJAX 实现。简单易用的高层实现见 .get,.get, .get,.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。话不多说，接下来详细给大家介绍jQuery核心知识。

jQuery

1.jQuery介绍

JS中支持使用 $ 这个标识符

引入：我们以前使用DOM对象来改变或者获取相关属性的value值，DOM对象的方法都特别的长，不容易记住，而且代码的观赏性较差，因此就出现了一种新的技术JQuery。
jQuery:是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化 JavaScript 对 HTML DOM 操作
jQuery是一个Java的工具类，库是存放东西的，JQuery是存放js代码的地方。
放的是用js代码写的function() --> (函数)
jQuery官网介绍：jQuery是一个快速、小且功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，并提供了一个跨多种浏览器的易于使用的API。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。
write less , do more

2. 为什么使用 jQuery

它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX 异步对象。

3. jQuery的特点

（1）写少代码,做多事情【write less do more】

（2）免费，开源且轻量级的 js 库，容量很小

（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX 功能（5）文档手册很全，很详细

（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）

（7）出错后，有一定的提示信息

（8）不用再在 html 里面通过

例如：使用 JavaScript 定位 DOM 对象常用的三种方式：

（1）通过 ID 属性：document.getElementById()

（2）通过 class 属性：getElementsByClassName()

（3）通过标签名：document.getElementsByTagName()

上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率容易出错。

jQuery 分别使用(“#id”) , (“.class 名”) , $(“标签名") 封装了上面的 js 方法。

4.关于jQuery的下载

官网地址：jQuery，在官网地址点击要下载的版本，会发现是一堆代码，直接将这个网页保存即可。（Ctrl+S 直接进行保存到本地即可）

官网名称：

微信截图_20220609234431.png

本地下载完的名称

微信截图_20220609234438.png

开发时使用的是：uncompressed 未压缩版
工作时使用的是：compressed （min）压缩版
压缩版与未压缩版的区别：

压缩版压缩掉了代码原来的空白以及注释，代码紧密的凑在一起。
未压缩版就是开发人员书写时的格式，不会去除空白地方和注释。

5. DOM对象

DOM 对象文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。比如：网页中的按钮、文本、盒子等等...

6. JavaScript 对象和 jQuery 对象

用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对象的 API。用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。
jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。 JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，我们都是将 JavaScript 对象转化成 Jquery 对象

7.DOM 对象和 jQuery 对象

微信截图_20220609234540.png

8. DOM 对象与 jQuery 对象之间的转换

8.1 DOM 对象转换 jQuery 对象

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象，转换为 jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

微信截图_20220609234614.png

8.2 jQuery 对象转换DOM对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM 对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

9.选择器（非常重要）

选择器就是一个字符串，是用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom对象。
通过选择器定位获取的dom对象，此时会转变为 jQuery对象

9.1 基本选择器

id选择器：通过dom对象的id定位dom对象，通过id找对象，id在当前页面中是唯一的。

$("#dom对象的id值")

class选择器：class表示css中的样式，使用样式的名称定位dom对象。

$(".class样式名")

标签选择器：使用标签的名称定位dom对象。

$("标签名称")

9.2 所有选择器

所有选择器：选取页面中所有的DOM对象

$("*")

9.3 组合选择器

组合选择器是多个被选中对象间使用逗号隔开后形成的选择器，可以组合 id、class、标签名等
可以任意组合，一个、两个、三个都可以。

$("#id,.class,标签名")

jQuery基础知识总结

微信截图_20220609234708.png

10.表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
注意：无论是否存在表单，表单选择器都会根据相应的type属性值做出选择。
表单选择器主要是根据 type值进行定位的
只有type属性的标签才具有表单选择器

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
$(":tr"): 不能用，tr 不是 input 标签
复制代码

表单选择器: 使用标签的type属性值，定位dom对象的方法。

语法格式 : $(":type属性值")

例如：
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
$(":butten")选取所有的按钮
复制代码

微信截图_20220609234750.png 微信截图_20220609234804.png