从js实例学习jQuery———基础内容初整合

最新推荐文章于 2024-02-24 00:12:50 发布

学号Java

最新推荐文章于 2024-02-24 00:12:50 发布

阅读量342

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_42147171/article/details/104929707

版权

前端基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

基础内容

1.jQuery和原生js的区别
2.jQuery的三种入口方式
3.$()核心函数
4.jQuery获取的实质:不是数组

1.jQuery和原生js的区别

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height:200px;
				border: 1px solid red;
			}
		</style>
		<!--导入jquery-->
		<script type="text/javascript" src="jquery-1.11.3.min.js" ></script>
			<script type="text/javascript">
				//原生js写法
				window.onload=function(ev){
					var div1=document.getElementsByTagName("div")[0];
					var div2=document.getElementsByClassName("box1");
					var div3=document.getElementById("box2");
/*					console.log(div1);
					console.log(div2);
					console.log(div3);
					div1.style.backgroundColor="#808080";
					div2[0].style.backgroundColor="#f40";
					div3.style.backgroundColor="#808080";*/
				}
				
				//jquery写法
				$(function(){
				var $div1=$("div");
				var $div2=$(".box1");
				var $div3=$("#box2");
				console.log($div1);
				console.log($div2);
				console.log($div3);
				$div1.css({
					backgroundColor:"#808080"
				})
				$div2.css({
					backgroundColor:"#f40"
				})
				$div3.css({
					backgroundColor:"#246445"
				})
				})
			</script>
	</head>
	<body>
		<div></div>
		<div class="box1"></div>
		<div id="box2"></div>
	</body>
</html>

2.jQuery的三种入口方式

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.11.3.min.js" ></script>
		<script type="text/javascript">	
			//入口函数
			//1.
/*			$(document).ready(function(){
				alert("qwerdf123");
			});*/
			//2.
/*			jQuery(document).ready(function(){
				alert("qwerdf123");
			});*/
			//3.
			$(function(){
				alert("qwerdf123");
			});
		</script>
	</head>
	<body>
	</body>
</html>

3.$()核心函数

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.1.1.min.js" ></script>
	</head>
	<body>
		<div></div>
		<div class="box1"></div>
		<div id="box2"></div>
		<script type="text/javascript">
			//$()核心函数
			//1.接收函数
			$(function(){
				//alert("qwerdf123");
			});
			//2.字符串$
				var $div1=$("div");
				var $div2=$(".box1");
				var $div3=$("#box2");
				console.log($div1);
				console.log($div2);
				console.log($div3);
			//3.字符串代码段
			var $p=$("<p>这是一个段落</p>");
			console.log($p);
			$div2.append($p);
			//4.DOM元素
			var span=document.getElementsByTagName("span")[0];
			console.log("Dom"+span);
			var $span=$(span);
			console.log("jQuery"+span);
		</script>
	</body>
</html>

4.jQuery获取的实质:不是数组

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.1.1.min.js" ></script>
	</head>
	<body>
		<div>div_01</div>
		<div>div_02</div>
		<div>div_03</div>
		<div>div_04</div>
		<div>div_05</div>
		<div>div_06</div>
		<div>div_07</div>
		
		<script type="text/javascript">
			var $div=$("div");//伪数组
			console.log($div);
			console.log(Object.prototype.toString.call($div));
			var arr=[1,2,5,4,3];
			console.log(arr);
			console.log(Object.prototype.toString.call(arr));
		</script>
	</body>
</html>

看控制台：伪数组
在这里插入图片描述

学号Java

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从js实例学习jQuery———基础内容初整合

基础内容1.jQuery和原生js的区别2.jQuery的三种入口方式3.$()核心函数4.jQuery获取的实质:不是数组1.jQuery和原生js的区别代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &l...
复制链接

扫一扫

专栏目录