jquery学习01篇

直接po图和代码

效果图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery入门,JQuery学习01篇</title>
<!-- 
小技巧:不导入jquery-2.1.4.min.js文件,而是拷贝一份jquery-2.1.4.min.js文件,并改
名为jquery.js,这么做的目的主要是万一将来jquery-2.1.4.min.js升级成jquery-2.1.5.min.js的话,
所有的页面都要改成jquery-2.1.5.min.js
 -->
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
	alert($);//打印变量$
	console.log($);
	console.log($());
	/*
	$("选择器")获得的是jquery对象,无innerHTML
	$("选择器")获得的是juqery对象,可以使用juery方法
	$("选择器")[0]得到的是原生的js对象(即是一个DOM对象),可以使用js方法
	$("#id")[0]; = document.getElementById("id"); 原生的js对象,可以使用js方法
	$("#id"); juqery对象,可以使用juery方法
	注意:$("选择器")[0]  得到的对象是一个DOM对象,他不是一个值,所以在使用过程中,如
	果你要获取这个DOM对象的值还需要进行一次jQuery封装,$($("选择器")[0]).val();
	
	$("#id")这是jquery获取通过juqery包装后的对象
	而$("#id")[0]是获取js原生的dom对象
	
	参考链接https://blog.csdn.net/sl1990129/article/details/101308953
		https://blog.csdn.net/servlet905/article/details/78563694
		https://www.w3school.com.cn/jquery/jquery_selectors.asp
		https://blog.csdn.net/ltfgood/article/details/6248379
	*/
	
	//结果为JQuery入门,JQuery学习01篇
	console.log($("title").html());
	//结果为JQuery入门,JQuery学习01篇 undefined
	console.log($("title")[0].innerHTML, $("title").innerHTML);
	console.log($("#h1").html());//结果为undefined
	window.onload = function() {
		//结果为JQuery学习01篇 undefined
		console.log($("#h1").html(), $("#h1").innerHTML);
	};

	var fn1 = function() {return 'hello';};
	console.log(fn1);
	alert(fn1);
	//要把以下代码注释掉,要不然后面使用$()的话,会报错$ is not a function
// 	var $ = '江西省赣州市于都县';
// 	alert($);
// 	console.log($);
	
// 	console.log($()); //报错TypeError: $ is not a function
</script>
</head>
<body style="background-color: #CCE8CF">
	<h2 style="color: red;" id="h1">JQuery学习01篇</h2>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值