jQuery
1.介绍
-
目的：简化JavaScript对HTML DOM操作。是一个JS库，里面有很多函数（操作dom,事件处理，动画，ajax）。免费开源，小巧87k,兼容各类浏览器，文档齐备。
-
dom对象和jQuery对象。例子见**E:\Study-Webdevelope\codes\2020华电培训作业\project\jQuer学习笔记**
-
dom对象(操作dom属性方法)：使用js创建的对象，js对象（dom对象），var obj = document.getElementById(“name”);obj为dom(js)对象。
-
jquery对象(操作jquery库中函数和方法)：使用jquery语法创建的对象，【jquery表示的对象都是数组，每个成员是一个DOM对象】。var obj = $("#txt"),obj为jquery对象，它是一个数组，现在数组中就一个值。
-
【dom对象和jquery对象可以相互转换】。
dom---->jquery: 语法：$(dom对象)
jquery—>dom: 语法：从数组获取第一个对象，第一个对象就是dom对象。使用[0]或get(0)。
<!--/dom----jquery:--> <script type="text/javascript"> window.onload = function(){ //获取dom对象 var obj = document.getElementById("btn"); obj.onclick = function(){ alert(obj.value); } //dom对象转jquery对象 var $obj = $(obj); console.log("按钮value="+$obj.val());//调用val()方法 } </script> <input type="button" id="btn" value="按钮"/> <!--================= jquery---》dom:=========================--> <script type="text/javascript"> function btnClick(){ //获取jquery对象 var obj = $("#txt"); alert("jquery获取到"+obj.val()); //jquery对象转dom对象 var obj1 = obj.get(0);//这里id="txt"的只有一个值，所以数组长度为1.【等价var obj1 = obj[0]】 var num = obj1.value; obj1.value = num * num; alert("dom计算结果："+obj1.value); } </script> </head> <body> <div> <input type="button" id="btn" value="计算平方" onclick="btnClick()" /> <input type="text" id="txt" /> </div> </body> -
-
2.选择器：
-
注意：标签没有，表单选择器照样可以使用。$(":tr");不能用，tr不是input标签，无type属性
-
id选择器 class选择器 标签选择器 所有选择器 组合选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <script type="text/javascript" src="../js/jquery-3.4.1.js"></script> <script type="text/javascript"> function btnID(){ //id选择器 var obj1 = $("#div1"); obj1.css("background","blue"); } function btnClass(){ //class选择器 var obj2 = $(".div2"); obj2.css("background","yellow"); } function btnDiv(){ //标签选择器 var obj3 = $("div"); obj3.css("background","red"); } function allDom(){ //使用所有选择器 var obj4 = $("*"); obj4.css("background","green"); } function btnCom(){ //组合选择器 var obj5 = $("#div1,.div2,input"); obj5.css("background","pink"); } </script> </head> <style> div{ width: 200px; height: 200px; background-color: gray; } </style> <body> <div id="div1">第一个div</div><br/> <div class="div2">第二个div</div><br/> <div>第三个div</div><br/> <span class="div2">span标签</span><br/> <input type="button" value="id选择器获取dom对象" onclick="btnID()"/> <input type="button" value="class选择器获取dom对象" onclick="btnClass()"/> <input type="button" value="标签选择器获取dom对象" onclick="btnDiv()"/> <input type="button" value="所有选择器获取dom对象" onclick="allDom()"/> <input type="button" value="组合选择器获取dom对象" onclick="btnCom()"/> </body> </html> -
表单选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单选择器</title> <script type="text/javascript" src="../js/jquery-3.4.1.js"></script> <script type="text/javascript"> function btnText(){ //获取所有属性text的单行文本框【数组】 var txt = $(":text"); alert(txt.val()); } function btnPwd(){ //获取所有password【数组】 var pwd = $(":password"); alert(pwd.val()); } function btnRadio(){ //获取所有radio【数组】 var rad = $(":radio"); for(var i=0;i<rad.length;i++){ alert(rad[i].value); } } function btnCb(){ //获取所有的checkbox【数组】 var cb = $(":checkbox"); for(var i=0;i<cb.length;i++){ alert(cb[i].value);//数组每一个成员是一个dom对象 //转成jquery对象 console.log($(cb[i]).val());//bike run basketball } console.log($(cb).val());//bike只能得到第一个 } </script> </head> <body> <input type="text" id="txt" /><br/> <input type="password" id="pwd" /> <br/> <input type="radio" name="sex" value="men"/>男 <input type="radio" name="sex" value="women"/>女 <br/> <input type="checkbox" name="hobby" value="bike"/>骑行 <input type="checkbox" name="hobby" value="run"/>跑步 <input type="checkbox" name="hobby" value="basketball"/>篮球 <br/> <input type="button" value="获取text" onclick="btnText()" /> <input type="button" value="获取password" onclick="btnPwd()" /> <input type="button" value="获取radio" onclick="btnRadio()" /> <input type="button" value="获取checkbox" onclick="btnCb()" /> </body> </html>
3.过滤器
3.1介绍
3.2基本过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<style>
div{
background-color: gray;
}
</style>
<script type="text/javascript">
//基本过滤器
$(function(){//等价于$(document).ready(function(){...})相当于js中的onload(),页面加载完毕
//绑定事件，语法：$(选择器).事件名称(function(){...})
$("#btn1").click(function(){
$("div:first").css("background","green");
})
//绑定事件，语法：$(选择器).事件名称(function(){...})
$("#btn2").click(function(){
$("div:last").css("background","yellow");
})
//绑定事件，语法：$(选择器).事件名称(function(){...})
$("#btn3").click(function(){
$("div:eq(3)").css("background","green");
})
//绑定事件，语法：$(选择器).事件名称(function(){...})
$("#btn4").click(function(){
$("div:lt(3)").css("background","pink");
})
//绑定事件，语法：$(选择器).事件名称(function(){...})
$("#btn5").click(function(){
$("div:gt(3)").css("background","white");
})
})
</script>
</head>
<body>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3
<div>我是div3-1</div>
<div>我是div3-2</div>
</div>
<div>我是div4</div>
<div>我是div5</div>
<input type="button" id="btn1" value="改变first"/>
<input type="button" id="btn2" value="改变last"/>
<input type="button" id="btn3" value="改变div[3]"/>
<input type="button" id="btn4" value="改变div下标<(3)"/>
<input type="button" id="btn5" value="改变div下标>(3)"/>
</body>
</html>
3.3表单对象属性过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单属性过滤器</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
//绑定事件
$("#btn1").click(function(){
var obj = $(":text:enabled");//获取可使用的text文本框
for(var i=0;i<obj.length;i++){
obj[i].value = "hello";
}
})
//绑定事件
$("#btn1-1").click(function(){
var obj = $(":text:disabled");//获取不可使用的text文本框
for(var i=0;i<obj.length;i++){
obj[i].value = "world";
}
})
//绑定事件
$("#btn2").click(function(){
var obj = $(":radio:checked");//获取选中单选框value
for(var i=0;i<obj.length;i++){
alert(obj[i].value);
}
})
//绑定事件
$("#btn3").click(function(){
var obj = $(":checkbox:checked");//获取选中复选框value
for(var i=0;i<obj.length;i++){
//alert(obj[i].value);
alert($(obj[i]).val());
}
})
//绑定事件
$("#btn4").click(function(){
//var obj = $("select>option:selected");
var obj = $("#language>option:selected");//获取选中下拉列value
alert(obj.val());
})
})
</script>
</head>
<body>
<input type="text" /><br/>
<input type="text" disabled="true"/><br/>
<input type="text" /><br/>
<input type="text" disabled /><br/>
<input type="radio" name="sex" value="男"/>男<br/>
<input type="radio" name="sex" value="女" checked="true"/>女<br/>
<input type="checkbox" name="hobby" value="篮球" />篮球<br/>
<input type="checkbox" name="hobby" value="音乐" checked="true" />音乐<br/>
<input type="checkbox" name="hobby" value="足球" checked/>足球<br/>
<select id="language">
<option value="java语言">java语言</option>
<option value="go语言" selected="true">go语言</option>
<option value="python语言">python语言</option>
<option value="c语言">c语言</option>
</select><br/>
<input type="button" id="btn1" value="改变可使用text的值为hello"/>
<input type="button" id="btn1-1" value="改变不可使用text的值为world"/><br/>
<button id="btn2" >显示选中单选框的值</button>
<button id="btn3" >显示选中复选框的值</button>
<button id="btn4" >显示选中下拉列的值</button>
</body>
</html>
4.函数
4.1 val() text() attr()
$(function(){
//绑定事件
$("#btn1").click(function(){
alert($(":text").val());//获取第一个:text的value。
})
//绑定事件
$("#btn1-1").click(function(){
$(":text").val("hello");//给所有:text统一赋值hello
})
//绑定事件
$("#btn2").click(function(){
alert($("div").text());//获取所有div文本值，以字符串展示。
})
//绑定事件
$("#btn3").click(function(){
$("div").text("hello world");//设置所有div文本值为hello world。
})
//绑定事件
$("#btn4").click(function(){
alert($("img").attr("src"));//获取第一个img的属性值src.
})
//绑定事件
$("#btn5").click(function(){
$("img").attr("src","./img/2.jpg");//设置所有img的属性src的值为2.jpg
})
})
</script>
</head>
<body>
<input type="text" /><br/>
<input type="text" disabled="true"/><br/>
<input type="text" /><br/>
<input type="text" disabled /><br/>
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div><br/>
<img src="./img/1.jpg" /><br/>
<input type="button" id="btn1" value="获取第一text文本框值"/>
<input type="button" id="btn1-1" value="对所有text文本框统一赋值hello"/><br/>
<button id="btn2" >显示所有div文本值,合成字符串</button>
<button id="btn3" >设置所有div文本值为hello world</button>
<button id="btn4" >获取第一个img的属性src值</button>
<button id="btn5" >设置所有img的属性src值为2.jpg</button>
4.2 第二组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数1</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
//绑定事件
$("#btn1").click(function(){
$("div").hide();//隐藏所有div。
})
//绑定事件
$("#btn1-1").click(function(){
$("div").show();//显示所有div
})
//绑定事件
$("#btn2").click(function(){
$("select").remove();//删除所有下拉列表和子选择项。
})
//绑定事件
$("#btn3").click(function(){
$("select").empty();//删除所有下拉列表的子选择项。
})
//绑定事件
$("#btn4").click(function(){
$("p").append("<div><button>新增的按钮</button></div>");//p中append后添加html代码展示.
})
//绑定事件
$("#btn5").click(function(){
alert($("span").html());//获取第一个span的html内容[mysql是一个<b>数据库</b>]
})
//绑定事件
$("#btn6").click(function(){
alert($("span").text());//获取所有span的text内容[mysql是一个数据库JDBC访问书库]
})
//绑定事件
$("#btn7").click(function(){
$("span").html("<b>设置span</b>");//设置所有span文本内容
})
//绑定事件
$("#btn8").click(function(){
//$.each(对象，function(i.e){....})
var arra = [1,2,"abc"]//循环数组
$.each(arra,function(i,n){
alert("i=="+i+",n=="+n);
})
var json = {"name":"jack","age":20}//循环json
$.each(json,function(i,n){
alert("i=="+i+",n=="+n);
})
var obj = $(":text");//dom对象数组
$.each(obj,function(i,n){
alert("i=="+i+",n=="+n.value);
})
//jquery对象.each(function(i,e){....})//dom对象数组
$(":text").each(function(i,e){
alert("i=="+i+",e=="+e.value);
})
})
})
</script>
</head>
<body>
<input type="text" value="1111"/><br/>
<input type="text" value="222" disabled="true"/><br/>
<input type="text" value="333" /><br/>
<input type="text" value="44" disabled /><br/>
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div><br/>
<p>append</p>
<span>mysql是一个<b>数据库</b></span><br/>
<span>JDBC访问书库</b></span>
<br/>
<br/>
<select id="language">
<option value="java语言">java语言</option>
<option value="go语言" selected="true">go语言</option>
<option value="python语言">python语言</option>
<option value="c语言">c语言</option>
</select><br/><br/>
<select id="language">
<option value="java语言" selected="true">java语言</option>
<option value="go语言" >go语言</option>
<option value="python语言">python语言</option>
<option value="c语言">c语言</option>
</select><br/><br/>
<input type="button" id="btn1" value="隐藏所有div"/><br/>
<input type="button" id="btn1-1" value="显示所有div"/><br/>
<button id="btn2" >删除所有下拉列表和子选择项</button><br/>
<button id="btn3" >删除所有下拉列表的子选择项</button><br/>
<button id="btn4" >p中append后添加html代码展示</button><br/>
<button id="btn5" >获取第一个span文本html内容原样</button><br/>
<button id="btn6" >获取所有span的text内容字符串</button><br/>
<button id="btn7" >html样式设置所有span文本内容</button><br/>
<button id="btn8" >each循环</button><br/>
</body>
</html>
5.事件绑定
-
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="../js/jquery-3.4.1.js"></script> <title>事件绑定两种方式</title> <script type="text/javascript"> $(function(){ //第一种事件绑定绑定 $(":button").click(function(){ $("div").append("<br/><button id='newBtn'>新增的按钮</button>"); //第二种事件绑定绑定 $("#newBtn").on("click",function(){ alert("新增按钮被点击了"); }) }) }) </script> </head> <body> <div>我是一个div,我需要新增一个按钮</div><br/> <input type="button" value="动态新增按钮"/> </body> </html>
6.Ajax（******）
6.1介绍
6.2 $.ajax()函数演示:
改进**E:\学习文档\数据库课程设计\IDE-Workspace\Ajax+jQuery\002-ajaxDatabase==****
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>展示省份和城市信息</title>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<style>
/*背景层*/
#popLayer {
display: none;
background-color: #B3B3B3;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */
}
/*弹出层*/
#popBox {
display: none;
background-color: #FFFFFF;
z-index: 11;
width: 200px;
height: 200px;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
#popBox .close{
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
/*关闭按钮*/
#popBox .close a {
text-decoration: none;
color: #2D2C3B;
}
</style>
</head>
<body>
<%--//利用Ajax+jquery实现局部刷新--%>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//获取dom对象
var proviceID = $("#proviceID").val();
//ajax发送请求
$.ajax({
url:"/myWeb/provice/search",
data:{"proviceID":proviceID},
dataType:"json",
success:function(resp){
$("#provAllName").val(resp.provAllName);
$("#provSimName").val(resp.provSimName);
$("#priCity").val(resp.priCity);
}
})
})
})
//===================================================================================
/*点击关闭按钮*/
function closeBox() {
//隐藏弹框
$("#popBox").css("display","none");
$("#popLayer").css("display","none");
}
//点击弹出弹框
$(function () {
$("#btn2").click(function(){
//展示弹框
$("#popBox").css("display","block");
$("#popLayer").css("display","block");
//获取dom对象
var proviceID = $("#proviceID").val();
$.ajax({
url:"/myWeb/cities/search",
data:{"proviceID":proviceID},
dataType:"json",
success:function(resp){
$.each(resp,function (i,e) {
$("#content").append("<p>"+e.cityName+"</p>");
})
}
})
})
})
// var text = "";
// for(i in data) text += data[i].cityName+"\n";
// content.innerText = text;
</script>
<center>
<table border="0">
<tr>
<td>省份编号</td>
<td>
<select id="proviceID" style="width: -moz-available">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td><input type="button" id="btn1" value="搜索"/></td>
</tr>
<tr>
<td>省份全称</td>
<td><input type="text" id="provAllName" style="border-radius: 4px;background-color: darkgray"/></td>
</tr>
<tr>
<td>省份简称</td>
<td><input type="text" id="provSimName" style="border-radius: 4px;background-color: darkgray"/></td>
</tr>
<tr>
<td>省份省会</td>
<td><input type="text" id="priCity" style="border-radius: 4px;background-color: darkgray"/></td>
</tr>
<tr>
<td>所有城市</td>
<td><input type="button" name="popBox" id="btn2" value="展示所有城市" style="border-radius: 4px; color: darkseagreen"/></td>
</tr>
</table>
</center>
<div id="popLayer"></div>
<div id="popBox" style="background-color: #B3B3B3">
<div class="close">
<a href="javascript:void(0)" onclick="closeBox()" style="color: red">关闭</a>
</div>
<div id="content" align="center" style="font-size: 20px"></div>
</div>
</body>
</html>
6.3 . g e t ( ) 函 数 同 .get()函数同 .get()函数同.post()函数
-
-
代码展示
**注意点：**不这样写必报错
$.post("/myWeb/cities/search", {proviceID: proviceID},callback,“json”);
发送的参数名：proviceID，【不是**“proviceID”**】
调用的函数：callback【不是callback()】
<%--//利用Ajax+jquery实现局部刷新--%> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ //获取dom对象 var proviceID = $("#proviceID").val(); //【ajax发送请求】 $.ajax({ url:"/myWeb/provice/search", data:{"proviceID":proviceID}, dataType:"json", success:function(resp){ $("#provAllName").val(resp.provAllName); $("#provSimName").val(resp.provSimName); $("#priCity").val(resp.priCity); } }) }) }) //=================================================================================== /*点击关闭按钮*/ function closeBox() { //隐藏弹框 $("#popBox").css("display","none"); $("#popLayer").css("display","none"); } //点击弹出弹框 $(function () { $("#btn2").click(function() { //展示弹框 $("#popBox").css("display", "block"); $("#popLayer").css("display", "block"); //获取dom对象 var proviceID = $("#proviceID").val(); //【post方式发起ajax请求】 $.post("/myWeb/cities/search", {proviceID: proviceID},callback,"json"); }) }) function callback(resp) { //清除旧数据 $("#content").empty(); $.each(resp, function (i, e) { $("#content").append("<p>" + e.cityName + "</p>"); }) } </script>
扫一扫
2876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
