首页 前端知识 一、JQuery的基本使用

一、JQuery的基本使用

2024-08-14 22:08:28 前端知识 前端哥 42 434 我要收藏

目录

一、jQuery的基本使用

1.jQuery概念

2.jQuery的顶级对象

(一)jQuery的基本使用

1.jQuery概念

jQuery是一个快速、简洁的JavaScript库。

JavaScript库即library,是一个封装好的特定的集合(方法和函数)。

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

2.jQuery的顶级对象

1.$是jQuery的别称,在代码中可以使用jQuery代替$,一般为了方便,通常直接使用$。

2.$是jQuery的顶级对象,相当于原生JavaScript中window,用$把元素包装成jQuery对象,就能调用jQuery方法。

如下代码所示,div隐藏不显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jq.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<script>
// $ 相当于 window
// 等着dom加载完毕在执行js代码
$(document).ready(function () {
$("div").hide()
})
</script>
<div></div>
</body>
</html>
复制

特别注意

<script>
// js的加载事件
// 只能写一个,后面的会覆盖前面的
window.onload = function () {
alert(1)
}
window.onload = function () {
alert(2)
}
</script>
复制
<script>
// jq中的页面加载事件 可以写多个 都会被按顺序执行
$(function () {
alert(1)
})
$(function () {
alert(2)
})
</script>
复制

3.jQuery对象和DOM对象

 dom对象--使用原生js获取过来的对象

jq对象--使用jq获取过来的对象  通过$进行包装(伪数组的形式存储)

 jq的本质是一个数组

 var jq={dom对象,dom对象,dom对象....}

在jq中不能使用js的属性和方法,在js中不能使用jq的属性和方法,但 二者之间可以相互转换

1.dom对象 -> jq对象

 格式$(dom对象)

 2.jq对象转换成dom对象

$对象[索引值]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15581.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!