jQuery
1. jQuery has dominated the world for 10 years. It is only js packaging. Now it has begun to decline and is no longer the focus. Vue replaces (encapsulates) Vue with some jQuery syntax at the bottom.
Do a lot of work on js, the code is more concise, new features ajax package
Ajax can visit the background (java) to visit the Jingdong website to obtain product information and prices
3. Use jQuery
1) Download the jQuery.js file
javascript has been integrated into major browsers, so developers can directly use
jQuery. It is a third-party invention and must additionally introduce js file support
The function of jQuery is to select HTML elements and perform certain operations on the selected elements.
Basic syntax: $(selector).action() The
dollar sign replaces the document
selector (selector) "query" and "find" HTML element
jQuery's action() performs operations on the element
2) How to add to the page?
<script src= "jquery.min.js">
jquery.min.js compression, the core code is one line, line breaks, and spaces are removed
3) Use it to implement dom tree operations, replacing basic JavaScript functions
document.getElementById("username");
$("username")
document $()
getElementById #
document.getElementsByClassName("msg")
$(".msg")
$(Selector). Action to perform
var msg = ...
msg.innerText innerHTML
$("msg").text(); .html();
value .val();
How concise is jQuery?
Compared with jQuery and JS:
1) Shorthand, the amount of code drops sharply
2) Selector, which can quickly find elements on the page, very rich
3) jQuery provides a set of new methods or attributes (not good, learning cost, need to be memorized separately)
4 ways to get elements in JavaScript:
var ele = document.getElementsByTagName("p"); //标签 36
var ele = document.getElementsByName("username"); //名称 50
var ele = document.getElementsByClassName("info"); //样式
var ele = document.getElementById("username"); //id属性
There are 4 ways for jQuery selector to get elements:
var ele = $("p"); //访问标签 18
var ele = $('input[name="username"]'); //访问名称 39
var ele = $('input[type="text"]'); //访问text框
var ele = $(':text'); //访问text框
var ele = $(".info"); //访问css的class样式
var ele = $("#username"); //访问id属性
It can be seen that jQuery actually simplifies the writing of js, replacing document.getXxx with $, and the code is concise and refreshing.
Using the previous case, we will carry out the transformation and comparison
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
body{
width: 300px;
margin:20px;
}
button{
margin-top: 5px;
margin-right: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div>
<h2 class = "msg">登录</h2>
<!--输入框-->
<div class="form-group">
<label>用户名:</label>
<input type="text" class="form-control" name="username" id="username" autocomplete="off" autofocus="autofocus"
placeholder="请输入用户名..." ; />
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码..." />
</div>
<!--button按钮-->
<div class="form-group" align="center">
<button class="btn btn-primary" onclick="doSubmit()">提交</button>
<button class="btn btn-danger">取消</button>
<!--button按钮-->
</div>
</div>
</body>
<script>
//按钮标签onclick事件，单击才是触发
//οnclick="doSubmit()" 点击后去执行doSubmit()函数 (方法)
//点击提交按钮出发事件 doSubmit()，自定义一个函数
function doSubmit() {
//获取页面的用户名，获取数组的第一个元素
var username = document.getElementsByName("username")[0]; //获取这个对象的值
//获取唯一，html规范，标签的id属性，在页面声明时,必须唯一
var username = document.getElementById("username");
console.log(username.value); //这个对象他的值
//<div class = "msg">登录成功</div>
//标签的class属性进行访问 msg dic
var msg = document.getElementsByClassName("msg")[0];
console.log(msg.innerText);
//msg.innerText="登录成功，欢迎" + username.value();
msg.innerHTML="<font color='red'>登录成功，欢迎"+username.value+"</font>";
}
</script>
</html>
Retrofit with jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
body{
width: 300px;
margin:20px;
}
button{
margin-top: 5px;
margin-right: 20px;
margin-left: 20px;
}
</style>
<!--引入js-->
<script src="js/jquery.min.js"></script>
</head>
<body>
<div>
<h2 class = "msg">登录</h2>
<!--输入框-->
<div class="form-group">
<label>用户名:</label>
<input type="text" class="form-control" name="username" id="username" autocomplete="off" autofocus="autofocus"
placeholder="请输入用户名..." ; />
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码..." />
</div>
<!--button按钮-->
<div class="form-group" align="center">
<button class="btn btn-primary" onclick="doSubmit()">提交</button>
<button class="btn btn-danger">取消</button>
<!--button按钮-->
</div>
</div>
</body>
<script>
function doSubmit() {
//var username = document.getElementById("username");
//console.log(username.value);
//通过jQuery选择器#username，找到页面input，val()获取到这个框中的值
var username = $("#username").val();
//var msg = document.getElementsByClassName("msg")[0];
//console.log(msg.innerText);
console.log($(".msg").text());//获取div的文字
//msg.innerHTML="<font color='red'>登录成功，欢迎"+username.value+"</font>";
$(".msg ").text("登录成功，欢迎:"+$("#username").val());//设置新的文字
$(".msg").css("color","red"); //.css代表动态设置它的样式 (k,v)结构
}
</script>
</html>
It can be seen that jQuery is not only simple to write, but also provides a lot of enhancement methods. These are more concise than native. Of course, it also reflects a great disadvantage. Its method is different from native js, which brings a certain learning cost.
Download and install node-v12.18.1 -x64.msi
Link: https://pan.baidu.com/s/18lz4KW1GbedODs-sKHHlRw
Extraction code: j3gl
Choose installation path
The rest directly next
The installation is complete…
Typical Case
Binding event jq-click.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定按钮</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div>
<!--前期绑定-->
<button id="zfbPay" onclick="zfbPay()">支付宝支付</button>
<!--//后期绑定-->
<button id="wxPay">微信支付</button>
</div>
</body>
<script>
//自定义一个js的函数
function zfbPay(){
//1.把按钮消失
//$("#zfbPay").hide(); //隐藏方法
//2.把按钮禁止
$("#zfbPay").attr("disabled",true);
$("#zfbPay").text("您以支付成功,不要再次点击，请稍后！")
}
//后期绑定，利用jQuery代码给上面按钮加一个事件
//匿名函数function() 好处就是私有，其他线程无法访问，线程安全
$("#wxPay").click(function(){
//1.把按钮消失
//$("#wxPay").hide();
//简写: $(this)代表当前对象，微信按钮
$(this).hide();
})
</script>
</html>
Page performance:
Button disabled
button disappeared
Multiple checkboxes to select and cancel all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多个复选框全选和取消</title>
<script src="js/jquery.min.js"></script>
<style>
body{
width: 350px;
}
button{
margin-top: 10px;
margin-left: 60px;
}
</style>
</head>
<body>
<h1>多个复选框全选和取消</h1>
<div >
喜欢颜色：
<input type="checkbox" id="ckColor"> 红色
<input type="checkbox" id="ckColor"> 绿色
<input type="checkbox" id="ckColor"> 蓝色
<input type="checkbox" id="ckColor"> 黄色
</div>
<div style="margin:10px;">
<button id="selectAll">全选</button>
<button id="unSelectAll">取消</button>
</div>
</body>
<script>
//属性：attr，prop 1.6扩展，1.9 attr只能生效一次
//实现按钮的后期绑定
$("#selectAll").click(function() {
//获取到页面上所有ckColor（多个元素）
$("[id=ckColor]").prop("checked", true); //打钩
})
$("#unSelectAll").click(function() {
$("[id=ckColor]").prop("checked", false); //去掉打钩
})
</script>
</html>
Page performance:
Select all
cancel
