jQuery 的基本使用
时间:2022-07-28
本文章向大家介绍jQuery 的基本使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. jQuery 的下载
jQuery的官网地址: https://jquery.com/,官网即可下载最新版本。
各个版本的下载:https://code.jquery.com/
版本介绍:
1x :兼容 IE 678 等低版本浏览器, 官网不再更新 2x :不兼容 IE 678 等低版本浏览器, 官网不再更新 3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本
2. 体验jQuery
步骤:
- 引入jQuery文件。
- 在文档最末尾插入 script 标签,书写体验代码。
- $('div').hide() 可以隐藏盒子。
3. jQuery的入口函数
jQuery中常见的两种入口函数:
// 第一种: 简单易用。
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
// 第二种: 繁琐,但是也可以实现
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
总结:
- 等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装。
- 相当于原生 js 中的 DOMContentLoaded。
- 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
- 更推荐使用第一种方式。
4. jQuery中的顶级对象$
- 是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 。
- 是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。
5. jQuery 对象和 DOM 对象
使用 jQuery 方法和原生JS获取的元素是不一样的,总结如下 :
- 用原生 JS 获取来的对象就是 DOM 对象
- jQuery 方法获取的元素就是 jQuery 对象。
- jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。
注意: 只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。
6. jQuery 对象和 DOM 对象转换
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
// 1.DOM对象转换成jQuery对象,方法只有一种
var box = document.getElementById('box'); // 获取DOM对象
var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象
// 2.jQuery 对象转换为 DOM 对象有两种方法:
// 2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]
// 2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)
总结:实际开发比较常用的是把DOM对象转换为jQuery对象,这样能够调用功能更加强大的jQuery中的方法。
- 厚土Go学习笔记 | 21. range用法
- Golang Stub初体验
- 厚土Go学习笔记 | 20. slice 继续
- 数据挖掘算法之深入朴素贝叶斯分类
- 歪?我想要一个XXE。
- 厚土Go学习笔记 | 19. slice和数组很像,但是slice可以添加元素
- 工具| 手把手教你制作信息收集器之网站备案号
- 厚土Go学习笔记 | 18. 数组
- 厚土Go学习笔记 | 17. 结构体及用指针访问结构体
- Java枚举类型的原理
- 厚土Go学习笔记 | 27. 斐波纳契闭包
- 代码审计| APPCMS SQL-XSS-CSRF-SHELL
- 厚土Go学习笔记 | 33. 利用数据流实现密码代换功能
- 厚土Go学习笔记 | 32. Readers读取数据流
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- String - 344. Reverse String
- String - 383. Ransom Note
- String - 58. Length of Last Word
- String - 14. Longest Common Prefix
- String - 28. Implement strStr()
- Subsequence - 187. Repeated DNA Sequences
- Subsequence - 392. Is Subsequence
- parentheses - 241. Different Ways to Add Parentheses
- parentheses - 32. Longest Valid Parentheses
- parentheses - 22. Generate Parentheses
- palindrome - 132. Palindrome Partitioning II
- palindrome - 131. Palindrome Partitioning
- Parentheses - 20. Valid Parentheses
- Palindrome - 9. Palindrome Number
- Palindrome - 5. Longest Palindromic Substring