提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
尚硅谷平台学习的jQuery知识回顾(https://www.gulixueyuan.com/my/course/61)
一、jQuery是什么?
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
⚠️面试考点:jQuery设计的宗旨是“write Less,Do More”
二、jQuery引入使用
可以看jQuery支持什么api(方法):jQuery在线中文手册
1.引入jQury库
<!--<script> 标签用于定义客户端脚本,比如 JavaScript。
引入jQuery包(本地进入) 测试使用的未压缩的版本,上线使用的压缩版本
-->
<!-- <script type="text/javascript" src="js/jquery-1.10.1.js"> </script>-->
<!-- 远程引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
2.简单使用
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_初识jQuery</title>
<!--原生的-->
<script type="text/javascript">
window.onload =function(){
var btn1 = document.getElementById("btn1");
btn1.onclick =function () {
var username = document.getElementById("username");
alert(username.value)
}
}
</script>
<!--引入jQuery包(本地进入) 测试使用的未压缩的版本,上线使用的压缩版本
-->
<!-- <script type="text/javascript" src="js/jquery-1.10.1.js"> </script>-->
<!-- 远程引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<!-- jQuery版 -->
<script type="text/javascript">
//绑定文档加载完成监听
//使用jQuery核心函数($/jQuery)
// $(
// function () {
// $('#btn2').click(function () {
// //给btn2绑定点击监听
// var username = $('#username').val()
// alert("username:"+username)
// })
// }
// )
jQuery(
function () {
$('#btn2').click(function () {
//给btn2绑定点击监听
var username = $('#username').val()
alert("username:"+username)
})
}
)
</script>
</head>
<body>
<!--
需求: 点击"确定"按钮, 提示输入的值
-->
用户名: <input type="text" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>
</body>
</html>
对照原生和jQuer版本,可见jQuery版本更简洁
三、jQuery的两把利器
1.jQuery核心函数
- 简称: jQuery函数($/jQuery)
- jQuery库向外直接暴露的就是$/jQuery
- 引入jQuery库后, 直接使用$即可
- 当函数用: $(xxx)
- 当对象用: $.xxx()
2.jQuery核心对象
- 简称: jQuery对象
- 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
- 使用jQuery对象: $obj.xxx()
<!--引入库-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
//jQuery 函数 只对外暴露这些
console.log($);
console.log(typeof $); //function
console.log(jQuery===$);//true
//jQuery对象
console.log($() instanceof Object)//true
</script>