Web进阶 - jQuery
0、$ 可以当做一个函数名
在 JavaScript 中， $ 是一个合法的标识符。
$ 可以当做一个函数名：
function $(形参) {
函数体
}
优点：
1、只有一个字符，写的时候快；
2、平常很少用，具有辨识性。
曾经在EL表达式用到$, 但它是大括号: ${作用域对象别名.共享数据}
<!DOCTYPE html>
<html>
<head>
<!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
注意：并不是设置当前页面的字符编码方式。-->
<meta charset="utf-8">
<title>$可以当做一个函数名 </title>
<script type="text/javascript">
//自定义方法, 获取js中的dom对象 .
// 要尽量少的书写代码,节省时间
//自己写一个方法(函数),下面两个函数来调用它,减少代码书写量:
//function getObject(domId){ //getObject函数名
//function g(domId){ //g函数名,更简单
// $ 在这里也是一个函数的名称,更具有辨识性，平常很少用。比如上面的函数名g,有时候可能为变量名g
function $(domId){
var obj = document.getElementById(domId);
return obj ;
}
function fun1(){
//通过id获取dom对象
// var obj = document.getElementById("txt1");
//var obj =getObject("txt1"); //调用上面自己写的函数,减少代码书写量
var obj =$("txt1");
alert(obj.value);
}
function fun2(){
//通过id获取dom对象
//var obj = document.getElementById("txt2");
//var obj =getObject("txt2"); //调用上面自己写的函数,减少代码书写量
var obj =$("txt2");
alert(obj.value);
}
</script>
</head>
<body>
<input type="text" id="txt1" value="我是txt1"/> <br/>
<input type="text" id="txt2" value="我是txt2"/> <br/>
<input type="button" value="单击按钮 1 " onclick="fun1()" /> <br/>
<input type="button" value="单击按钮 2 " onclick="fun2()" />
</body>
</html>
1、jQuery 介绍
- jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化JavaScript 对 HTML DOM 操作
jQuery是js库。
库：相当于java的工具类，库是存放东西的，
jQuery是存放js代码的地方，放的用js代码写的function函数
- 为什么[why] 使用 jQuery？
重要理由：
它能够兼容市面上主流的浏览器。
IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，
而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX异步对象。
其他优点：
（1）写少代码,做多事情【write less do more】
（2）免费，开源且轻量级的 js 库，容量很小
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）
（7）出错后，有一定的提示信息
（8）不用再在 html 里面通过< script>标签插入一大堆 js 来调用命令了
例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
（1）通过 ID 属性：document.getElementById()
（2）通过 class 属性：getElementsByClassName()
（3）通过标签名：document.getElementsByTagName()
上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率低，容易出错。
jQuery 分别使用$("#id") , $(".class 名") , $(“标签名”) 封装了上面的 js 方法。
2、使用JQurey 的第一个例子
- 第一步：获取 jQuery
官网下载地址：https://jquery.com/download/
每一个同一版本号的 jQuery，其库又分为两个。
一个是未压缩版，可查看源码 ————> [开发时使用]；
一个是压缩版，将注释、空格均做了删除，将变量字符数减少 ————> [产品上线时使用]
这里使用【jquery-3.4.1.js】、【jquery-3.4.1.min.js】
- 第二步：选择开发工具
编写 jQuery 的工具很多，能编写 HTML 的工具都支持 jQuery
单独学习 jQuery 库使用，可以轻量的开发工具，例如 记事本、 EditPlus、HBuilder、HbuilderX等
编写项目可以使用集成开发工具，例如在 IDEA， Eclipse , MyEclipse ,WebStorm 等
- 这里我使用HbuilderX
1）打开HbuilderX，创建一个项目（名称：jQuery-code），给项目选择一个文件存放目录
2）在项目中再创建一个目录：右键项目名称—新建—目录，常用名称为 js
3）拷贝下载的 jquery-3.4.1.js 文件到目录
4）先建好html后，使用 jQuery，首先要将 jQuery 库引入。使用如下语句：
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
5）$(dom对象)：表示将 dom对象 转换为 jQuery 对象。
$(document).ready() 函数：表示当DOM 对象全部加载完毕后，马上执行的函数。和load事件一样的
$(document).ready() 与 $() 、 jQuery() 、 window.jQuery() 是等价的
6）完整代码：【1-hellojQuery.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个例子</title>
<!-- 指定jquery的库文件位置， 使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
/*
将JavaScript中的document对象 转换为 jQuery 对象
使用jQuery中的函数ready，当DOM对象全部加载完毕后，执行function中的内容
*/
/*
$(document).ready(function(){
//自定义的功能代码
alert("Hello jQuery,你好")
}) */
$( function(){ //和上面的等价的，更简单
//自定义的功能代码
alert("Hello jQuery,你好啊！！")
} )
</script>
</head>
<body>
</body>
</html>
【jQuery 和JavaScript 的入口函数】
- jQuery 入口函数:
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});
- JavaScript 入口函数:
window.onload = function () {
// 执行代码
}
- jQuery 入口函数与 JavaScript 入口函数的区别：
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
3、 DOM对象和 jQuery对象
-
DOM（Document Object Model,文档对象模型），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。
可以对其中的内容进行修改和删除，同时也可以创建新的元素。 -
DOM 对象:
用 JavaScript 语法创建的对象，也看做是 js 对象。
var obj= document.getElementById(“txt1”); // obj是dom对象，也叫做js对象
obj.value; -
jquery对象：
使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组!!!
例如 var jobj = $("#txt1") , jobj就是使用jquery语法表示的对象。也就是jquery对象。
它是一个数组。现在数组中就一个值。 -
dom对象可以和jquery对象相互的转换
（1）dom对象可以转为jquery
【语法】：$ (dom对象)
一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，但这不是必须的
（2）jquery对象也可以转为dom对象
【语法】：jQuery对象.get(0) 或 jQuery对象[0]
例如：$("#txt1").get(0) 或者 $("#txt1")[0]
从数组中获取第一个对象， 就是dom对象， 使用[0]或者get(0).
为什么要进行dom和jquery的转换：
目的是要使用对象的方法，或者方法。
当你是dom对象时，可以使用dom对象的属性或者方法，
如果你要想使用jquery提供的函数，必须是jquery对象才可以。
【2-domTojQuery.html】:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象 转jQuery对象</title>
<!-- 指定jquery的库文件位置 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
//使用js语法获取dom对象
var domBtn = document.getElementById("btn1")
alert("dom对象的属性值："+domBtn.value)
//使用jQuery库中的函数$(),把dom对象转jQuery对象
var $btn = $(domBtn) //$btn中的$不是必须的,这只是一个变量名而已
//使用jQuery库中的的函数val(),获取值
alert("jQuery对象的值："+ $btn.val() )
}
</script>
</head>
<body>
<input type="button" value="我是按钮" id="btn1" onclick="btnClick()" />
</body>
</html>
【3-jqueryToDom.html】:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery对象 转为 DOM 对象</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
//使用jquery的语法,获取页面中的dom对象:
// $("#txt1") //这是一个jQuery对象
//jQuery对象 转为 dom：
//var obj = $("#txt1")[0]; // 从数组中获取下标是0的dom对象
var obj = $("#txt1").get(0); //从数组中获取下标是0的dom对象
//alert( obj.value)
var num = obj.value
//计算平方
obj.value = num * num;
}
</script>
</head>
<body>
<div>
<input type="text" id="txt1" value="输入整数" />
<input type="button" value="计算平方" onclick="btnClick()" /><br/>
</div>
</body>
</html>
4、选择器
-
选择器: 就是定位条件；通知 jquery函数 定位满足条件的 DOM对象
-
基本选择器：（与css中是对应的）
| 选择器 | 语法 | 说明 |
|---|---|---|
| id 选择器 | $("#id名") | 通过dom对象的id属性定位dom对象的。id在当前页面中是唯一值。 |
| class 选择器 | $(".class名") | 通过dom对象的class属性定位dom对象的 |
| 标签 选择器 | $(“标签名”) | 使用标签名称定位dom对象的 |
| 所有选择器 | $("*") | 选取页面中 所有dom对象 |
| 组合选择器 | $(“id名, .class名, 标签名”) | 多个被选对象间使用逗号分隔后形成的选择器 |
【4-selector.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<!--在页面 head 部分定义 css样式块：-->
<style type="text/css">
#one{ /*这是一个id选择器，定位所有的id=one的元素（实际上也就一个，id唯一性）*/
font-size: 20pt;
}
div{ /*这是一个标签选择器，定位所有的div标签*/
background: gray;
width : 300px;
height : 100px;
}
.two{ /* 这是一个class类选择器，定位所有的class=two的元素（class没有唯一性要求）*/
background: gold;
font-size: 20pt;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1(){
//获取 id选择器
var obj = $("#one"); //id=one的所有元素
//使用jquery中改变样式的函数
obj.css("background","red"); //变红
}
function fun2(){
//获取 class类选择器
var obj = $(".two"); //class=two的所有元素
obj.css("background","green"); //变绿
}
function fun3(){
//获取 标签选择器
var obj = $("div"); //所有的div
//数组有3个对象
//jquery的操作都是操作数组中的全部成员.
//所以是给所有的div都设置的背景色
obj.css("background","blue"); //变蓝
}
function fun4(){
//所有选择器(页面的所有元素)
var obj = $("*");
obj.css("background","LightBlue"); //变 浅蓝色
}
function fun5(){
//组合选择器
var obj = $("#one,span,.two"); //id=one的id选择器、span标签 、class选择器
obj.css("background","red"); //变红
//obj是一个数组, 有两个成员, 下标1 是第二个元素：span标签
$( obj[1] ).css("background","green");//变绿
}
</script>
</head>
<body>
<div id="one">我是id=one的div </div> <br/>
<div class="two">我是class=two的div</div> <br/>
<div>我是没有id、class的div </div> <br/>
<span class="two">我是class=two的span </span> <br/><br/>
点击下方按钮，使上面的DOM对象颜色发生变化：<br/>
<input type="button" value="获取id=one的dom对象————>变红" onclick="fun1()" /> <br/>
<input type="button" value="获取class=two的dom对象————>变绿" onclick="fun2()" /> <br/>
<input type="button" value="获取div标签————>变蓝" onclick="fun3()" /> <br/>
<input type="button" value="所有选择器(所有dom对象)————>变浅蓝色" onclick="fun4()"/> <br/>
<input type="button" value="组合选择器" onclick="fun5()"/>
</body>
</html>
5、表单选择器
- 表单选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。
该方法【无论是否存在表单< form>，均可做出相应选择】。表单选择器是为了能更加容易地操作表单，
表单选择器是根据元素类型来定义的：
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
- 使用标签的type属性值，定位dom对象的方式。
语法： $(":type属性值")
例如：
$(":text") , 选择所有的单行文本框
$(":password")选取所有的密码框
$(":radio") 选取所有的单选按钮
$(":checkbox")选取所有的复选框
$(":button") ,选择所有的按钮
【5-formSelector.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 fun1(){
//使用表单选择器 $(":type的值")
var obj = $(":text"); //所有的type=text的元素
//获取对象的值————val()是jquery中的函数, 读取value属性值
alert( obj.val());
}
function fun2(){
var obj = $(":radio"); //数组,有2个对象 man ,woman
for(i=0; i<obj.length; i++){ //循环数组,数组中的成员是 dom对象,可以dom的属性或者函数
//将jquery对象转为dom对象
var v = obj[i];
//获取对象的值————value是dom对象的属性, 读取value属性值
alert( v.value );
}
}
function fun3(){
var obj = $(":checkbox"); //数组,有3个对象
for(i=0; i<obj.length; i++){
var v = obj[i]; //dom对象
//alert( v.value ); //dom的value属性
//如果使用jqueyr的val函数, 获取value的值?
//1. 需要jquery对象
var jObj = $(v); //jquery对象
//2. 调用jquery函数
alert("jquery的函数调用=" + jObj.val());
}
}
</script>
</head>
<body>
文 本 框 ：
<input type="text" value="我是type=text" /> <br/><br/>
单选按钮：
<input type="radio" name="sex" value="man" /> 男
<input type="radio" name="sex" value="woman" /> 女 <br/><br/>
复 选 框 ：
<input type="checkbox" value="bike" /> 骑行
<input type="checkbox" value="movie" /> 电影
<input type="checkbox" value="music" /> 音乐 <br/><br/>
<input type="button" value="读取所有的text的值" onclick="fun1()"/> <br/>
<input type="button" value="读取所有的radio的值" onclick="fun2()"/> <br/>
<input type="button" value="读取所有的checkbox的值" onclick="fun3()"/>
</body>
</html>
6、jquery中给dom对象绑定事件
回顾：JS中注册事件的2种方式：
1）直接在标签中使用事件句柄：
<input type="button" value="你好111" onclick="alert('按钮被单击了111')"/>
onclick：click事件对应的事件句柄（在事件前面加上on，即为事件句柄）
事件句柄 是指事件发生时要进行的操作。
2）使用纯JS代码完成事件的注册
<input type="button" value="你好222" id="btn"/>
<script type="text/javascript">
var mybtn = document.getElementById("btn");
mybtn.onclick = function(){
alert("btn按钮单击了222");
}
</script>
- 1、定义元素监听事件
语法： $(选择器).事件名称(处理函数)
(1) $(选择器)：定位dom对象， dom对象可以有多个， 这些dom对象都绑定事件了
(2) 事件：click、load、blur、focus…（JavaScript中学过）
(3) 事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
例如, 给id是btn的按钮绑定单击事件:
$("#btn").click(funtion(){
alert(“btn按钮单击了”)
})
- 2、on()事件绑定
语法： $(选择器).on(event,data,function)
(1) event：事件一个或者多个，多个之间空格分开
(2) data：可选。规定传递到函数的额外数据，json 格式
(3) function: 可选。规定当事件发生时运行的函数。
on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法
例如，给id是btn的按钮绑定单击事件:
$("#btn").on(“click”, function() {alert(“btn按钮单击了”) } )
【6_2-on绑定事件.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二种绑定事件方式：on()绑定事件</title>
<!--jquery中给dom对象绑定事件---------
第二种方式:on()事件绑定: 语法: $(选择器).on(event,function)-->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//在dom对象创建好后(页面加载完毕之后),绑定事件
$(function(){
$("#btn1").click(function(){
//使用append增加dom对象
$("#mydiv").append("<input type='button' value='我是新加入的按钮' id='newBtn' />");
//给这个新增的按钮绑定一个 click鼠标单击事件
//方法一: $(选择器).event(function)
$("#newBtn").click(function(){
alert("新建的按钮被单击了1111");
})
//方法二：使用on()事件绑定 $(选择器) .on(event,function)
$("#newBtn").on("click",function(){
alert("新建的按钮被单击了2222");
})
})
})
</script>
</head>
<body>
<div id="mydiv" style="background: yellow;">
我是一个div ，需要增加一个button
</div>
<br/>
<input type="button" value="创建一个button,并给这个button绑定一个click" id="btn1"/>
</body>
</html>
7、过滤器
-
过滤器：在定位了dom对象后，根据一些条件筛选dom对象。
过滤器就是一个字符串，用来筛选dom对象的。
过滤器不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。 -
基本过滤器：
| 过滤器 | 说明 |
|---|---|
| $(“选择器:first”) | 数组中的第一个dom对象 |
| $(“选择器:last”) | 数组中的最后一个dom对象 |
| $(“选择器:eq(数组的下标)”) | 获取指定下标的dom对象 |
| $(“选择器:lt(下标)”) | 获取小于下标的所有dom对象 (lt:less than) |
| $(“选择器:gt(下标)”) | 获取大于下标的所有dom对象 (gt:great than) |
【6_1-filter1.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件绑定、过滤器</title>
<!--定义 css样式块-->
<style type="text/css">
div{
background: gray; /*所有的div背景颜色为灰色*/
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(),
// $() 与 $(document).ready()是等价的.
// 相当于是js的load事件.
$(function() {
//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
//jquery中给dom对象绑定事件---------第一种方式:定义元素监听事件，语法： $(选择器).事件名称(处理函数)
$("#btn1").click(function(){
//过滤器
var obj = $("div:first");
obj.css("background","red"); //背景颜色 设为 红色
})
//给btn2绑定事件
$("#btn2").click(function(){
var obj = $("div:last");
obj.css("background","green");
})
//给btn3绑定事件
$("#btn3").click(function(){
var obj = $("div:eq(3)");
obj.css("background","blue");
})
//jquery中给dom对象绑定事件---------第二种方式:on()事件绑定: 语法: $(选择器) .on(event,function)
$("#btn4").on("click", function(){
var obj = $("div:lt(3)");
obj.css("background","orange");
})
$("#btn5").click(function(){
var obj = $("div:gt(3)");
obj.css("background","yellow");
})
$("#txt").keydown(function(){ //keydown 键盘按下事件
alert("keydown 键盘按下事件发生了")
})
})
</script>
</head>
<body>
<input type="text" id="txt" value="我绑定了键盘按下事件"/> <br /><br />
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>我是div-2
<div>我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div> <br />
<span>我是span</span> <br/><br/>
<input type="button" value="获取第一个div" id="btn1"/> <br/>
<input type="button" value="获取最后一个div" id="btn2"/> <br/>
<input type="button" value="获取下标等于3的div" id="btn3"/> <br/>
<input type="button" value="获取下标小于3的div" id="btn4"/> <br/>
<input type="button" value="获取下标大于3的div" id="btn5"/>
</body>
</html>
8、表单对象属性过滤器
- 表单对象属性过滤器: 根据表单中dom对象的状态情况，定位dom对象的。
启用状态， enabled
不可用状态 disabled
选择状态， checked 例如radio， checkbox
$(“选择器 : enabled”) 获取可用的dom对象
$(“选择器 : disabled”) 获取不可用的dom对象
$(“选择器 : checked”) 获取选中的dom对象
$(“选择器 > option : selected”) 获取下拉列表框被选中元素
例如：
1. 获取可用的文本框 $(" : text : enabled")
2. 获取不可用的文本框 $(" : text : disabled")
3. 获取复选框中被选中的元素 $(" : checkbox : checked")
4. 获取 所有下拉列表的被选中元素 $(“select > option : selected”); //标签选择器,选择所有的select标签
5. 获取 指定下拉列表的被选中元素 $("#select001 > option : selected"); //id选择器,选择id=select001的标签
【7-filter2.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">
//页面所有的dom对象加载完毕之后,执行这个:
$(function() {
$("#btn1").click(function(){
//获取所有可以使用的text
var obj = $(":text:enabled");
//设置 jquery数组值所有dom对象的value值
obj.val("hello-----");
})
$("#btn2").click(function(){
//获取选中的checkbox
var obj = $(":checkbox:checked");
for(var i=0;i<obj.length;i++){
//alert( obj[i].value); //dom对象,调用其value属性
alert( $(obj[i]).val() ) //jquery对象,调用其val()函数
}
})
$("#btn3").click(function(){
//获取select选中的值
//var obj= $("select>option:selected"); //标签选择器,选择所有的select标签
var obj = $("#select001>option:selected");//id选择器,选择id=select001的标签
alert(obj.val());
})
})
</script>
</head>
<body>
<p>文本框：</p>
<input type="text" id="txt1" value="text1" /> <br/>
<input type="text" id="txt2" value="text2" disabled="true"/> <br/> <!--disabled，不可用的-->
<input type="text" id="txt3" value="text3" /> <br/>
<input type="text" id="txt4" value="text4" disabled/> <br/>
<p>复选框：</p>
<input type="checkbox" value="游泳" />游泳 <br/>
<input type="checkbox" value="健身" checked />健身 <br/> <!--checked，默认选中的-->
<input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
<p>下拉框：</p>
<select id="select001"> <!--id=select001-->
<option value="java语言"> java语言 </option>
<option value="go语言" selected> go语言 </option> <!--selected，默认选中的-->
<option value="python语言"> python语言 </option>
</select>
<p>功能按钮：</p>
<input type="button" value="设置可以的text的value是hello-----" id="btn1"/> <br/>
<button id="btn2">显示选中的复选框的值</button> <br/> <!--button标签也是按钮，和<input type="button"/>类似-->
<button id="btn3">显示选中下拉列表框的值</button> <br/>
</body>
</html>
9、函数val、text、attr
-
val
操作数组中 DOM对象的 【value 属性】
$ (选择器).val() —————— 获取dom数组中【第一个】对象的 value属性值
$ (选择器).val(值)—————— 设置dom数组中 所有dom对象的 value属性值 为新值 -
text
操作数组中 所有DOM对象的【文本内容】
$ (选择器).text() —————— 获取数组中 所有dom对象的 文字显示内容，将得到内容【拼接一个字符串】返回
$ (选择器).text(值)—————— 设置数组中 所有dom对象的 文字显示内容 为新值 -
attr
对 val, text 之外的属性的 获取或设置
$ (选择器).attr(“属性名”) —————— 获取dom数组中【第一个】对象的 属性值
$ (选择器).attr(“属性名”,“值”)—————— 设置dom数组中 所有dom对象的 属性值 为新值
【8-val、text、attr函数.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数val、text、attr的使用</title>
<style type="text/css">
div{
background: bisque;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//页面所有的dom对象加载完毕之后,绑定事件:
$(function(){
$("#btn1").click(function(){
//1、$(选择器).val()—————— 获取dom数组中【第一个】对象的 value属性值
var value = $(":text").val(); //$(":text") ,表单选择器 选择所有的单行文本框
alert(value);
})
$("#btn2").click(function(){
//2、$(选择器).val(值)—————— 设置dom数组中 所有dom对象的 value属性值 为新值
$(":text").val("三国演义")
})
$("#btn3").click(function(){
//3、$(选择器).text()——————获取数组中 所有dom对象的 文字显示内容，将得到内容【拼接一个字符串】返回
var texts= $("div").text();
alert(texts);
})
$("#btn4").click(function(){
//4、$(选择器).text(值)——————设置数组中 所有dom对象的 文字显示内容 为新值
$("div").text("新的div文本内容");
})
$("#btn5").click(function(){
var texts= $("div:first").text(); // 也可以通过 过滤器 获取指定的div的文本内容
alert(texts);
})
$("#btn6").click(function(){
//5、$(选择器).attr(“属性名”)——————获取dom数组中 【第一个】对象的 属性值
alert( $("img").attr("src") ); //获取第一个图片的src属性值
})
$("#btn7").click(function(){
//6、$(选择器).attr(“属性名”,“值”)——————设置dom数组中 所有dom对象的 属性值 为新值
$("img").attr("src","img/ex3.jpg") ; //设置所有图片的src属性 为新值
})
})
</script>
</head>
<body>
<p>文本框：</p>
<input type="text" value="刘备" /> <br/>
<input type="text" value="关羽" /> <br/>
<input type="text" value="张飞" /> <br/>
<p>div块：</p>
<div>我是第一个div</div> <br/>
<div>我是第二个div</div> <br/>
<div>我是第三个div</div> <br/>
<p>图片：</p>
<img src="img/ex1.jpg" id="img1" /> <br/>
<img src="img/ex2.jpg" id="img2" /> <br/>
<p>功能按钮：</p>
<button id="btn1">获取第一个文本框的值 </button> <br/>
<button id="btn2">设置所有文本框的value值 </button> <br/><br/>
<button id="btn3">获取所有div的文本值 </button> <br/>
<button id="btn4">设置所有div的文本值 为新值 </button> <br/>
<button id="btn5">获取第一个div的文本值 </button> <br/><br/>
<button id="btn6"> 获取第一个图片的src属性值 </button> <br/>
<button id="btn7"> 设置所有图片的src属性值 为新值 </button> <br/>
</body>
</html>
10、函数hide、show、remove、empty、append、html、each
-
hide
$(选择器).hide() —————— 将数组中 所有DOM对象 隐藏起来 -
show
$(选择器).show() —————— 将数组中 所有DOM对象 在浏览器中显示起来 -
remove
$(选择器).remove() —————— 将数组中 所有DOM对象及其子对象 一并删除 -
empty
$(选择器).empty() —————— 将数组中 所有DOM对象的子对象 删除 -
append
$(选择器).append(“子对象”)——————为数组中 所有DOM对象 添加子对象 -
html
$ (选择器).html() —————— 获取 DOM数组中 【第一个元素的】 内容（innerHTML）
$ (选择器).html(值)—————— 设置 DOM数组中 所有元素的 内容（innerHTML）
（--------------------对比与上面的text函数区别-----------------------） -
each
（1）语法1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )可以对 数组、json、dom数组循环处理，对每个成员都会调用一次处理函数。 var arr = [1, 2, 3] //数组 var json = {"name":"张三","age":20 } //json对象 var obj = $(":text"); //dom数组 ，也是jQuery对象 之前js循环数组： var arr = [ 11, 12, 13]; for(var i=0;i<arr.length;i++){ var item = arr[i]; //数组成员 alert("下标为"+i+ "，成员为"+item) } 现在可以： var arr = [ 11, 12, 13]; $.each(arr, function(i, item){ alert("下标为"+i + "，成员为"+item); })
（2）语法2：jQuery对象.each( function( index, element ) { 处理程序 } )
循环jquery对象， jquery对象就是dom数组
所以说，这种方式和上面那种方式是等价的，只不过要遍历的对象必须为jQuery对象
【9-hide、show、remove、empty、append、html、each函数.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">
//在dom对象创建好后(页面加载完毕之后),绑定事件
$(function(){
$("#btn1").click(function(){
// 1、$(选择器).hide() —————— 将数组中 所有DOM对象 隐藏起来
$(":text").hide();
})
$("#btn2").click(function(){
// 2、$(选择器).show() —————— 将数组中 所有DOM对象 在浏览器中显示起来
$(":text").show();
})
$("#btn3").click(function(){
//3、$(选择器).empty() —————— 将数组中 所有DOM对象的子对象 删除
$("select").empty();
})
$("#btn4").click(function(){
// 4、$(选择器).remove() —————— 将数组中 所有DOM对象及其子对象 一并删除
$("select").remove();
})
$("#btn5").click(function(){
// 5、$(选择器).append("子对象")——————为数组中 所有DOM对象 添加子对象
$("div").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
// $("#father1").append("<input type='text' value='添加的input'/> "); //只给一个对象添加子对象
})
$("#btn61").click(function(){
//6.1 $(选择器).html() —————— 获取 DOM数组中 第一个匹元素的 内容（innerHTML）
alert( $("span").html() ); // 我是mysql <b>数据库</b>
//alert( $("span").text() ); // 我是mysql数据库 我是jdbc
})
$("#btn62").click(function(){
//6.2 $(选择器).html(值)—————— 设置 DOM数组中 所有元素的 内容（innerHTML）
$("span").html("我是新的<b>数据</b>");
//$("span").text("我是新的<b>数据</b>");
})
//7. each语法1： $.each( 要遍历的对象, function(index,element) { 处理程序 } )
$("#btn71").click(function(){
//循环普通数组
var arr = [ 11, 12, 13];
$.each(arr, function(i,n){
alert("下标为"+i + "=====数组成员:"+ n);
})
})
$("#btn72").click(function(){
//循环json
var json={"name":"张三","age":20};
$.each(json,function(i,n){
alert("key="+i+"----》值="+n);
})
})
$("#btn73").click(function(){
//循环dom数组
var domArray = $(":text");//dom数组
$.each( domArray, function(i,n){
// n 是数组中的dom对象
alert("i="+i+" , n="+n.value);
})
})
//each语法2：jQuery对象.each( function( index, element ) { 处理程序 } )
$("#btn74").click(function(){
//循环jquery对象, jquery对象就是dom数组
$(":text").each(function(i,n){
alert("i="+i+"，n="+ n.value);
})
})
})
</script>
</head>
<body>
<input type="text" value="第 1 个文本框" id="text1"/>
<input type="text" value="第 2 个文本框" id="text2"/> <br/><br/>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select>
<select>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select> <br/><br/>
<div id="father1" style="background: yellow;">父div1</div> <br/>
<div id="father2" style="background: yellow;">父div2</div> <br/>
<span> 我是mysql <b>数据库</b> </span> <br/>
<span> 我是jdbc </span> <br/><br/>
<hr/>
<button id="btn1">使用hide() 隐藏 所有的文本框</button> <br/><br/>
<button id="btn2">使用show() 显示 所有的文本框</button> <br/><br/>
<button id="btn3">使用entry() 删除 所有下拉列表中option子标签（子）</button> <br/><br/>
<button id="btn4">使用remove() 删除 所有下拉列表（父和子）</button> <br/><br/>
<button id="btn5">使用append("子对象") 给所有div 添加 子对象</button> <br/><br/>
<button id="btn61">使用html()----获取 第一个span的 内容（innerHTML）</button> <br/>
<button id="btn62">使用html(值)--设置 所有span的 内容（innerHTML） </button> <br/><br/>
<button id="btn71">each循环 语法1：循环普通数组[11,12,13] </button> <br/>
<button id="btn72">each循环 语法1：循环json：{"name":"张三","age":20} </button> <br/>
<button id="btn73">each循环 语法1：循环dom数组：所有的文本框的值 </button> <br/>
<button id="btn74">each循环 语法2：循环jquery对象（也就是dom数组）：所有的文本框的值 </button> <br/>
</body>
</html>
11、使用jquery的函数，实现ajax请求的处理
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON ，同时能够把接收的数据 更新到 DOM 对象。
没有jquery之前，使用XMLHttpRequest做ajax ，有4个步骤。
而jquery简化了ajax请求的处理。使用 3 个函数可以实现ajax请求的处理：
1） $.ajax() : jquery中实现ajax的核心函数
2） $.get() : 使用 get 方式发送ajax请求
3） $.post() : 使用 post 方式发送ajax请求
注： $.get()和 $.post() 他们在内部都是调用的 $.ajax()
-
1、 $ .ajax
语法： $.ajax( { name:value, name:value, … } )说明：参数是 json 的数据，包含请求方式，数据，回调方法等 常用的参数： url： 发送请求的 URL。 type： 请求的类型（GET 或 POST 等）。默认是 GET。 get，post 不用区分大小写 async： 布尔值，表示请求是否异步处理。默认是 true contentType ： 发送数据到服务器时，所使用的内容类型。默认是："application/x-www-form-urlencoded"。也可以写"application/json" data： 发送到服务器的数据。有string、数组、 json dataType： 期望 服务器返回的数据类型。有"xml" 、"html"、"text"、"json" success(result,status,xhr)： 请求成功时运行的函数。3个参数 是自定义的形参名，xhr 是 XMLHttpRequest 对象。 之前使用XMLHttpRequest对象， 当readyState==4 && status==200的时候。 error(xhr,status,error)： 请求失败要运行的函数。3个参数是自定义的形参名。 【主要使用的是 url , data , dataType, success ，其他的都有默认值，可以不写】 例如： $.ajax( { url: "bmiAjaxServlet", type: "get", async: true , contentType: "application/json", data: {name:"lisi",age:20 }, dataType: "json", success: function( data ) { }, error: function(){ } } ) -
2、 $ .get()
语法：$.get(url,data,function(data,status,xhr),dataType)参数说明： 1）url 必需。规定您需要请求的 URL。 2）data 可选。规定连同请求发送到服务器的数据。 3）function(data,status,xhr)可选。请求成功时运行的函数。data,status,xhr 是自定义形参名。 data - 返回的结果数据 status - 请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 对象 4）dataType 可选。期望 服务器返回的数据类型。有"xml" 、"html"、"text"、"json" -
3、$ .post()
语法：$ .post(url,data,function(data,status,xhr),dataType)
参数同$.get() -
【实例：】使用jQuery实现ajax请求
把Module【ajax-3-queryProvince（根据省份id查询省份名称）】复制一份，为【jquery-4-queryProvince（jquery版）】 （复制模块的方法，在学习JavaWeb的 EL表达式 的笔记里有记载） 在该模块的web下面新建文件夹：js。在里面粘贴jQuery的js库文件【jquery-3.4.1.js】 在web下面新建 JqueryAjax.jsp，把searchJson.jsp的代码复制过来，进行修改
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用jQuery实现ajax请求</title>
<!-- 指定jquery的库文件位置 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//在所有dom对象创建好后(页面加载完毕之后),绑定事件
$(function () {
$("#btn").click(function () {
//获取dom的value值------用户输入的省份编号
var value = $("#provinceId").val();
//发起ajax请求：
$.ajax({
url:"queryjson",
data:{
provinceId:value
},
dataType:"json", //期望服务器返回数据的类型
success: function(data) { //返回的数据data是json对象
$("#provinceName").val(data.name); //给对应的id=provinceName的标签 赋值
$("#jiancheng").val(data.jiancheng);
$("#shenghui").val(data.shenghui);
}
})
})
})
</script>
</head>
<body>
<h2>使用jQuery实现ajax请求</h2>
<table>
<tr>
<td>省份编号：</td>
<td><input type="text" id="provinceId">
<input type="button" value="搜索" id="btn"> <!-- 指定一个id=btn，以便在上面给它绑定事件 -->
</td>
</tr>
<tr>
<td>省份名称：</td>
<td><input type="text" id="provinceName"></td>
</tr>
<tr>
<td>简称：</td>
<td><input type="text" id="jiancheng"></td>
</tr>
<tr>
<td>省会：</td>
<td><input type="text" id="shenghui"></td>
</tr>
</table>
</body>
</html>
public class QueryJsonServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//默认值， {} ：表示json格式的数据
String json = "{}";
//1.获取请求参数信息中的id属性
String s = request.getParameter("provinceId");
String provinceId =s.trim(); //trim() 方法用于删除字符串的头尾空格。
//2.调用Dao推送查询命令得到这个id对应的省份信息
ProvinceDao dao = new ProvinceDao();
Province province =new Province();
if( provinceId != null && ! provinceId.isEmpty() ){ //isEmpty()判断字符串是否为""空字符串。
province = dao.queryProvinceById(Integer.valueOf(provinceId));
//需要使用jackson 把 Provice对象转为 json格式的字符串!!!!!!!!!!!!!!!!!!!!!!!!!!!
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(province);
}
//3、把获取的数据，通过网络传给ajax中的异步对象，响应结果数据
//指定服务器端（servlet）返回给浏览器的是json格式的数据,json数据使用utf-8编码的
//response.setContentType("text/json;charset=utf-8");
response.setContentType("application/json;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.println(json); //返回数据
pw.flush();
pw.close();
}
}
12、【实例】使用 AJAX 级联查询
最终效果：
在浏览器页面中，点击【下拉框1】，可以选择不同的省份，点击一个省份之后，旁边的【下拉框2】，随即变为该省份所对应的所有城市，供用户再进行选择城市
实现步骤：
1、IDEA中创建一个web项目
new-Module-【jquery-5-Ajax实现 级联查询】
2、在WEB-INF下面新建目录：lib。
然后把mysql的驱动jar包，还有jackson的jar包粘贴进去
然后分别右键jar包，点击【Add as Library...】 （如果之前在其他module添加过，就不用了）
3、设置模块的依赖
File - Project Structure窗口，点击左边的Modules，在中间选中该模块，在右边的【Dependencies】添加依赖关系：
看是否有指定的jdk，如果没有就选择一个；然后再给该模块指定相关的jar包：点击右边的+加号，
选择【2 Library】，然后给它选择相关jar包（Tomcat、mysql、jackson） - Add Selected- 点击Apply
继续在File - Project Structure - 选择左边的Problems - 在右边点击Fix
4、在Web下面创建目录 js ，拷贝jquery-3.4.1.js
5、开始代码书写：
JDBC工具类:com.yuming.util.JdbcUtil 封装连接数据库
实体类：com.yuming.entity.Province 省份
com.yuming.entity.City 城市
Dao类： com.yuming.dao.QueryDao 两个方法：查询数据库中所有省份list；根据省份id查询省份对应的城市list
Servlet类：com.yuming.controller.QueryProvinceServlet 查询省份的Servlet
com.yuming.controller.QueryCityServlet 查询省份对应城市的Servlet
查询页面：index.jsp【重点！！！】
6、查询页面【级联查询】所用知识点：
jquery的$.ajax() 做ajax请求
jquery的$.post() 做ajax请求
empty()函数 做清空子对象
append()函数 做添加子对象
each()函数 做遍历
val()函数 获取value属性值
jquery中给dom对象绑定事件：click事件、change事件
表单对象过滤器----$("选择器 > option : selected") 获取下拉列表框被选中元素
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>省市 级联查询,使用ajax和jquery</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function loadDataAjax(){ //自定义函数，获取省份的下拉列表
//做ajax请求，使用jquery的$.ajax()
$.ajax({
url: "queryProvince",
dataType: "json",//期望返回的数据类型
success: function (data) {//返回data是json格式的数组：
// [{"id":1,"name":"河北","jiancheng":"冀","shenghui":"石家庄"},{},{},{}......]
//以免多次点击按钮，添加多次数据到下拉框里面，首先将原来下拉框下面的选项 清空，再给他添加
$("#province").empty();
$("#province").append(
"<option value=\"0\">请选择...</option>"
);
$.each(data, function (i, n) {
//为下拉框添加 子对象（选项）
$("#province").append(
"<option value='" + n.id + "'>" + n.name + "</option>"
)
})
}
})
}
$(function () {
// $(function()）是在页面的dom的对象加载成功后（页面加载完毕之后）执行的函数， 。
loadDataAjax(); //调用函数，发起ajax。应该页面打开之后就看到所有的省份下拉列表了
/*
$("#btn1").click(function () { //绑定事件：单击按钮获取省份
loadDataAjax();
})
*/
//给省份的select绑定一个change事件，当select内容发生变化时，触发事件
$("#province").change(function () {
//怎样获取选中的列表框的值？
// 1、表单对象过滤器----$("选择器 > option : selected") 获取下拉列表框被选中元素
// 2、jquery的val()函数，获取dom对象的value属性值
var v = $("select>option:selected").val()
//做一个ajax请求，获取该省份的所有城市信息----这里使用了jquery的$.post(), $.get()也可以
$.post(
"queryCity", //1、url
{ provinceId:v}, //2、data
function(resp) { //3、请求成功时运行的函数
//清空select列表
$("#city").empty();
$.each( resp, function(i,n){
$("#city").append(
"<option value='"+n.cId+"'>"+n.cName+"</option>"
)
})
},
"json" //4、期望 服务器返回的数据类型
)
})
})
</script>
</head>
<body>
<p>省市 级联查询,使用ajax和jquery</p>
<div>
<table border="1">
<tr>
<td>省份：</td>
<td>
<select id="province">
<option value="0">请选择...</option>
</select>
<!--<input type="button" value="获取省名列表" id="btn1"/> -->
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select id="city">
<option value="0">请选择...</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
【思维导图】
传送门
上一章：Web进阶 - AJAX
扫一扫
1462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
