[JS]JQuery 引入、入口函数、JQuery 对象
前言
- 系列文章目录：
- [目录]HTML CSS JS
- 根据视频和PPT整理
- 视频及对应资料：
- JS
- 视频：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程
- 视频对应资源(在视频简介里面)
- 链接：【https://gitee.com/xiaoqiang001/java-script.git】
- 视频对应资源(百度网盘)
- 链接：【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】
- 提取码：1234
文章目录
- 前言
- 1. JQuery 引入
- 2. JQuery 入口函数
- 3. JQuery 对象
- 4. JQuery 对象与 DOM 对象的转换
- 4.1 DOM 对象转换为 JQuery 对象
- 4.2 JQuery 对象转换为 DOM 对象
1. JQuery 引入
JQuery 官网下载地址：https://jquery.com/download/
JQuery CDN 引入：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">script>
2. JQuery 入口函数
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">script>
<script>// jquey 入口函数，会等页面加载完成再执行$(document).ready(function(){// ......})// 简写$(function() {// ......})
script>
3. JQuery 对象
$ 是 JQuey 的别称。
$ 是 JQuey 的顶级对象，相当于原生 js 的 window。
原生 js 获取的元素对象为 DOM 对象，通过 JQuery 提供的方法获取的元素对象为 JQuery 对象，JQuey 对象是对原生 DOM 对象进行包装后产生的对象(伪数组形式存储元素对象)。
JQuey 对象只能使用 JQuey 提供的方法，DOM 对象只能使用原生 js 的方法。
4. JQuery 对象与 DOM 对象的转换
原生的一些方法和属性，JQuery 没有进行封装，使用这些方法和属性需要将JQuery 对象转化为 DOM 对象。
4.1 DOM 对象转换为 JQuery 对象
语法：
$(DOM对象)
<body><div>div>
body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">script>
<script>$(function() {var div = document.querySelector('div')console.log(div)var $div = $(div)console.log($div)})
script>
4.2 JQuery 对象转换为 DOM 对象
语法：
// 方法1
$('div')[index] // index 为伪数组中元素对应的索引// 方法2
$('div').get(index)
<body><div>div>
body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">script>
<script>$(function() {var $div = $('div')console.log($div)var div1 = $div[0]console.log(div1)var div2 = $div.get(0)console.log(div2)})
script>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！