jQuery
1.jQuery一统江湖10年,只是js封装,现今已经开始衰落,已经不作为重点,Vue替代(封装) Vue底层会使用一些jQuery语法。
在js上做了很多工作,代码更加简洁,新的特性 ajax封装
ajax它可以访问后台(java) 访问京东网站,获取商品信息,价格
3.使用jQuery
1)下载jQuery.js文件
javascript已经被集成到各大浏览器中,所以开发者是可以直接使用
jQuery是第三方发明,必须额外引入js文件支持
jQuery 作用是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
美元符号替代 document
选择器(selector)“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
2)怎么加入页面中?
<script src= "jquery.min.js">
jquery.min.js 压缩,核心代码是一行,换行,空格都去掉
3)利用它来实现dom树操作,替代JavaScript基本函数
document.getElementById("username");
$("username")
document $()
getElementById #
document.getElementsByClassName("msg")
$(".msg")
$(选择器).执行的动作
var msg = ...
msg.innerText innerHTML
$("msg").text(); .html();
value .val();
jQuery有多简洁呢?
jQuery和JS相比:
1)简写,代码量急剧下降
2)选择器,快速查找页面上的元素,非常丰富
3)jquery提供一套新的方法或者属性(不好,学习成本,需要单独记忆)
JavaScript获取元素的4种方式:
var ele = document.getElementsByTagName("p"); //标签 36
var ele = document.getElementsByName("username"); //名称 50
var ele = document.getElementsByClassName("info"); //样式
var ele = document.getElementById("username"); //id属性
jQuery选择器获取元素的4种方式:
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属性
可以看出jQuery本质其实就是简化了js的写法,用$替代了document.getXxx,代码简洁,清爽。
使用之前的案例,我们进行改造对比
<!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>
使用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>
可以看出jQuery不仅是写法简单,还提供了很多增强方法这些比原生的简洁,当然也体现了极大一个缺点,它的方法和原生的js不同,带来了一定的学习成本。
下载安装 node-v12.18.1 -x64.msi
链接:https://pan.baidu.com/s/18lz4KW1GbedODs-sKHHlRw
提取码:j3gl
选择安装路径
剩下的直接next
安装完成…
典型案例
绑定事件 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>
网页效果:
按钮禁止
按钮消失
多个复选框全选和取消
<!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>
网页效果:
全选
取消