直接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>