Web前端第四季(jQuery):二:104-使用jQuery获取HTML元素并进行简单操作+105-jQuery对象和DOM对象的区别+106-关于jQuery的API文档

最新推荐文章于 2022-12-07 08:57:41 发布

Smart_zy

最新推荐文章于 2022-12-07 08:57:41 发布

阅读量139

点赞数

分类专栏： # jQuery 文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/qq_40544338/article/details/121497565

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

5.Web前端第一季(HTML):我自己写的笔记博客

6.Web前端第二季(CSS):我自己写的笔记博客

7.Web前端第三季(JavaScript):我自己写的笔记博客

三.注意

操作:1:成功:104-使用jQuery获取HTML元素并进行简单操作

1.运行结果:成功:

1.jQuery查询字典

操作:2:成功:105-jQuery对象和DOM对象的区别

1.运行结果:成功:

操作:3:成功:106-关于jQuery的API文档

1.运行结果:成功:

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

1.我自己代码的GitHub网址

GitHub - xzy506670541/WebTest: SIKI学院的Web前端

2.SIKI学院:我参考此视频实操

登录 - SiKi学院 - 生命不息，学习不止！siki老师的Unity3D专业视频学习平台，上千门实时更新课程，供学员在线观看，为国内开发者提供最新、最全、最快的视频学习教程http://www.sikiedu.com/my/course/212

我参考此视频实操

三.注意

操作:1:成功:104-使用jQuery获取HTML元素并进行简单操作

1.运行结果:成功:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>
		<script type="text/javascript">
			$(function(){
				// $("#one")会返回一个jQury对象
				//#one：通过document的id找到标签
				
				$("#one").show();//显示
				
				$("#one").text("通过jQuery修改了div里面的内容");
			});
		</script>
	</head>
	<body>
		<div id="one" style="display: none;">Category: Selectors</div>
	</body>
</html>

1.jQuery查询字典

Selectors | jQuery API Documentationhttps://api.jquery.com/category/selectors/

操作:2:成功:105-jQuery对象和DOM对象的区别

1.运行结果:成功:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript" src="js/jQuery/jQuery%20Core%203.3.1-uncompressed.js"></script>
		
		<script type="text/javascript">

		
		//不使用jQuery无法实现
		// var div=document.getElementById("one");
		// div.innerText="不使用jQuery无法实现";
		
		 $(function(){
			 //1.jQuery方法
			 // $("#one")会返回一个jQury对象
			 //#one：通过document的id找到标签		
			 // $("#one").show();//显示		
			 // $("#one").text("通过jQuery修改了div里面的内容");
			 
			 
			 // 2.DOM方法
			 //方法一:
			 // var div=document.getElementById("one");
			 // div.innerText="方法一:DOM方法修改标签内容";
			 
			 //方法二：
			 // var div=document.getElementById("one").innerText="方法二：DOM方法修改标签内容";
			 
			 //方法三：
			 // document.getElementById("one").innerText="方法三:DOM方法修改标签内容";
			 
			 //3.注意：jQuery和DOM对象的属性有区别
			 // $("#one").innerText="注意：jQuery和DOM对象的属性有区别";
			 
			 // 4.jQuery转换为DOM对象,就可以使用DOM对象属性了
			 $("#one").get(0).innerText="jQuery转换为DOM对象";
		 })
			
		</script>
	</head>
	<body>
		<div id="one">Category: Selectors</div>
	</body>
</html>

操作:3:成功:106-关于jQuery的API文档

1.运行结果:成功:

jQuery文档
地址：http://api.jquery.com/
文档下面的几个分类
选择器       Selectors
属性操作   Attributes
特效       Effects
事件       Events
CSS样式处理   CSS
遍历       Traversing
操作DOM节点   Manipulation

Smart_zy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端第四季(jQuery):二:104-使用jQuery获取HTML元素并进行简单操作+105-jQuery对象和DOM对象的区别+106-关于jQuery的API文档

一.目的1.想：学习前端知识2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。二.参考1.我自己代码的GitHub网址GitHub - xzy506670541/WebTest: SIKI学院的Web前端2.SIKI学院:我参考此视频实操登录 - SiKi学院 - 生命不息，学习不止！siki老师的Unity3D专业视频学习平台，上千门实时更新课程，供学员在线观看，为国内开发者提供最新、最全、最快的视频学习教程http://www.siki...
复制链接

扫一扫

专栏目录