jQuery第一章 jQuery概述

最新推荐文章于 2022-07-19 14:34:58 发布

Jayco江柯

最新推荐文章于 2022-07-19 14:34:58 发布

阅读量232

点赞数

分类专栏： jQuery学习路线文章标签： jquery js javascript html

本文链接：https://blog.csdn.net/LvJzzZ/article/details/108294029

版权

jQuery学习路线专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript自我学习路线

jQuery概述

jQuery概述

jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作（即jQuery是存放用JS代码写的function的地方）

一、jQuery特点

write less do more

免费、开源且轻量级的JS库，容量小
兼容市面上的主流浏览器
能处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
有多种JS组件，插件成熟，文档较为齐全

二、定位DOM对象常用的三种方式

使用JavaScript：

通过ID属性：document.getElementById()
通过class属性：getElementsByClassName()
通过标签名：document.getElementsByTagName()

使用jQuery：

$("#id")
$(".class名")
$(“标签名”)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位DOM对象</title>
		<!-- 指定jQuery的库文件位置，使用相对路径，当前项目的JS目录下的指定文件 -->
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
				1.$(document)：$是jQuery中的函数名称，document是函数的参数，作用是将document对象变成jQuery函数库可以使用的对象
				2.ready：是jQuery中的函数，“准备”的意思，相当于JS中的onload事件，即当页面的DOM对象加载成功后会执行ready函数的内容
				3.function()自定义的表示onload后要执行的功能
			*/
			/* 标准写法*/
			/* $(document).ready(function(){
				// 自定义的功能代码
				alert("Hello jQuery");
			}) */
			/* $(document).ready()与$()、jQuery()、window.jQuery()是等价的 */
			/* 简写 */
			$(function() {
				alert("Hello jQuery");
			})
		</script>
	</head>
	<body>
	</body>
</html>

三、DOM对象和jQuery对象

DOM对象：用JavaScript语法创建的对象，也看做是JS对象

var obj = document.getElementById("lzj"); // obj是DOM对象，也叫做JS对象

jQuery对象：使用jQuery语法表示的对象叫做jQuery对象，jQuery表示的对象都是数组

var obj = $("#lzj"); // obj是使用jQuery语法表示的对象，即jQuery对象，是一个数组（现在数组中就一个值）

DOM对象与jQuery对象可以相互转换

DOM->jQuery：$(DOM对象)
var $obj = $(lzj);

jQuery->DOM：从数组中获取第n个对象，第n个对象就是DOM对象，使用[n]或get[n]
var obj = $("#lzj")[0];
var obj = $("#lzj").get(0);

进行DOM对象与jQuery对象的转换的目的是要使用对象的函数或者函数（即你的对象为DOM对象时，可以使用DOM对象的属性或函数，要想使用jQuery提供的函数，必须是jQuery对象才可以）
DOM中使用value获取对象属性值，jQuery中使用val()函数获取对象属性值
$(选择器).val()：无参调用形式，读取数组中第一个DOM对象的value属性值
$(选择器).val(值)：有参调用形式，对数组中所有DOM对象的value属性值进行统一赋值

Jayco江柯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery第一章 jQuery概述

JavaScript自我学习路线jQuery概述一、jQuery特点二、定位DOM对象常用的三种方式三、DOM对象和jQuery对象jQuery概述jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作（即jQuery是存放用JS代码写的function的地方）一、jQuery特点write less do more免费、开源且轻量级的JS库，容量小兼容市面上的主流浏览器能处理HTML/JSP/X
复制链接

扫一扫