jquery

最新推荐文章于 2023-07-25 10:25:08 发布

Monk8660

最新推荐文章于 2023-07-25 10:25:08 发布

阅读量88

点赞数

分类专栏：总结类文章标签： Jquery

本文链接：https://blog.csdn.net/weixin_43173012/article/details/94380212

版权

总结同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

类

16 篇文章 0 订阅

订阅专栏

1 首先要引入引入Jquery的核心JS文件,要放在我们编译器同包的项目中,这里要注意src的路径问题,要是路径有问题在运行的时候会提示引入失败,一般同包下新建一个文件目录用来专门存放我们引入的JQ文件,同包下的路径为相对路径.
2 如果script标签设置了src属性，则在script双标签中写的js代码无效
3 代码部分:

	<body>
	
	<div id="mydiv">Hello</div>
	
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>

<script type="text/javascript">

// 通过原生JS的ID选择器获取DOM对象
var mydivDom = document.getElementById(“mydiv”);
console.log(mydivDom);

	// 通过Jquery的Id选择器获取Jquery包装集对象
	var mydivJquery = $("#mydiv");
	console.log(mydivJquery);
	
	var mydivJquery2 = jQuery("#mydiv");
	console.log(mydivJquery2);
	
	
	/*DOM对象与Jquery的互相转换*/
	// 1、将Dom对象转换为Jquery包装集对象：只需要在dom对象外面包装Jquery即可  	$(dom对象)
	var domToJquery = $(mydivDom);
	console.log(domToJquery);
	
	// 2.1、将Jquery包装集对象转换为Dom对象：Jquery包装集取下标 	  jquery包装集对象[0]
	var jqueryToDom = mydivJquery[0];
	console.log(jqueryToDom);
	// 2.2 Jquery中的each()函数，会将遍历的jquery对象变成dom对象
	/**
	 * each(fucntion):
	 * 	语法：
	 * 		jquery对象.each(fucntion([当前下标,当前被遍历到的元素]){
	 * 	
	 * 		});
	 * 
	 *	this：谁调用函数，this指代谁
	 */
	mydivJquery.each(function(index,element){
		console.log(index);
		console.log(element);
		console.log(this);
		console.log($(this));
	});
	
	
	console.log("==================注意点===================");
	// 注意点：通过原生JS获取节点，如果节点不存在，返回null；
	// 如果通过Jquery获取节点，如果节点不存在，会返回空包装集对象。所以判断Jqury对象是否存在需要使用length
	var mydiv1 = document.getElementById("mydiv1");
	console.log(mydiv1);
	var mydiv2 = $("#mydiv1");
	console.log(mydiv2);
</script>

<!--<script src="js/test.js" type="text/javascript" charset="utf-8"></script>-->