jQuery
一、jQuery 介绍
- 什么是 jQuery？
jQuery，顾名思义，就是 JavaScript 和查询（query），它就是辅助 JS 开发的 JS 库。
- jQuery 核心思想它的核心思想是 write less，do more（写的更少，做的更多），而且它解决了很多浏览器的兼容性问题。
- jQuery 流行程度
jQuery 现在已经称为最流行的 JS 库，在世界前10000个访问最多的网站中，有超过55%在使用 jQuery。
- jQuery 的好处
jQuery 是免费的，开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。
二、jQuery 入门案例
1. 案例
需求：点击按钮，弹出一句话。
步骤：
- 在项目中导入 jQuery 的文件
- 在项目中引入 jQuery 的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入jQuery文件 -->
<script src="js/jquery-1.7.2.js"></script>
<script>
// 使用原生的js代码
// window.onload = function(){
// var btnObj = document.getElementById('btn');
// btnObj.onclick = function(){
// alert('使用原生的js实现的效果.....');
// }
// }
// 使用jQuery代码
$(function(){ // 相当于原生js中的 onload事件
var $btnObj = $('#btn'); // 相当于document.getElementById("btnId");
$btnObj.click(function(){
alert('使用jQuery实现的效果.....');
});
})
</script>
</head>
<body>
<button id="btn">点我</button>
</body>
</html>
2. 入门案例总结
- 使用 jQuery 一定要引入 jQuery 库到页面中
- jQuery 中的 $ 是一个函数
- 怎样为按钮添加点击事件？
-
- 使用 jQuery 获取到标签对象
- 使用标签对象.click(function(){ })
三、jQuery 的核心函数介绍
1. 介绍
$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$() 就是调用这个函数。
- 传入参数为
函数时：
表示页面加载完成之后。相当于: window.onload = function(){ }
- 传入参数为
HTML字符串时：
会为我们创建这个 HTML 字符串对应的标签对象
- 传入参数为
选择器字符串时：
$(“#id属性值”); id选择器，根据id获取到标签对象
$(“标签名”); 标签选择器，根据标签名获取到标签对象
$(“.class属性值”) 类选择器，根据class属性值获取到标签对象- 传入参数为
DOM对象时：
会把这个 dom 对象转换为 jQuery 对象。
2. 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){ // 相当于 window.onload = function(){}
$('<h3>我是一个标题</h3>').appendTo('body');
// id选择器
alert($('#btn1').text());
// class选择器
alert($('.btn').length);
var btnObj = document.getElementById('btn1')
alert(btnObj); // [object HTMLButtonElement]
// 将 DOM 对象传给 $() 函数，会将 DOM 对象转为 jQuery 对象
alert($(btnObj)); // [object Object]
})
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
</body>
</html>四、DOM 对象和 jQuery 对象
1. 概述
- DOM 对象
-
- 通过 getElementById() 查询出来的标签对象是 DOM 对象
- 通过 getElementsByName() 查询出来的标签对象是 DOM 对象
- 通过 getElementsByTagName() 查询出来的标签对象是 DOM 对象
- 通过 createElement() 方法创建的对象，是 DOM 对象
- DOM 对象 alert 出来的效果是：[object HTML标签名Element]
- jQuery 对象
-
- 通过 jQuery 提供的 API 创建的对象，是 jQuery对象
$(“<h1></h1>”) - 通过 jQuery 包装的 DOM 对象，也是 jQuery 对象
- 通过 jQuery 提供的 API 查询到的对象，是 jQuery 对象
- jQuery 对象 alert 出来的效果是：[object Object]
- 通过 jQuery 提供的 API 创建的对象，是 jQuery对象
2. jQuery 对象的本质
- jQuery 对象是 DOM 对象的数组 + jQuery 提供的一系列的功能函数。（可以在浏览器打印查看 jQuery 对象的内容）
3. jQuery 对象和 DOM 对象使用上的区别
- jQuery 对象不能使用 DOM 对象的属性和方法
- DOM 对象也不能使用 jQuery 对象的属性和方法
4. DOM 对象和 jQuery 对象互转
- DOM 对象转换为 jQuery 对象
-
- 先有 DOM 对象
- $(DOM对象) 就可以转换成为 jQuery 对象
- jQuery 对象转换为 DOM 对象
-
- 先有 jQuery 对象
- jQuery 对象[下标]取出相应的 DOM 对象
五、jQuery 选择器
1. 基础选择器
就是 id 选择器，标签选择器，类选择器，组合选择器。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.选择 id 为 one 的元素 "background-color","#bbffaa"
$('#btn1').click(function () {
//css()方法可以设置和获取样式
$('#one').css('background-color', '#cfa');
});
//2.选择 class 为 mini 的所有元素
$('#btn2').click(function () {
$('.mini').css('background-color', 'red');
});
//3.选择 元素名是 div 的所有元素
$('#btn3').click(function () {
$('div').css('background-color', 'yellow');
});
//4.选择所有的元素
$('#btn4').click(function () {
$('*').css('background-color', 'green');
});
//5.选择所有的 span 元素和id为two的元素
$('#btn5').click(function () {
$('span, #two').css('background-color', 'blue');
});
});
</script>
</head>
<body>
<input type="button" value="选择 id 为 one 的元素" id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3"/>
<input type="button" value="选择 所有的元素" id="btn4"/>
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5"/>
<br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>2. 层级选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.选择 body 内的所有 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 内, 选择div子元素
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.选择 id 为 one 的下一个 div 元素
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<!-- <div>
<h1>层级选择器:根据元素的层级关系选择元素</h1>
ancestor descendant ：
parent > child ：
prev + next ：
prev ~ siblings ：
</div> -->
<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>
</html>3. 基本过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(document).ready(function(){
//1.选择第一个 div 元素
$("#btn1").click(function(){
$('div:first').css("background", "#bbffaa");
});
//2.选择最后一个 div 元素
$("#btn2").click(function(){
$('div:last').css("background", "#bbffaa");
});
//3.选择class不为 one 的所有 div 元素
$("#btn3").click(function(){
$('div:not(".one")').css("background", "#bbffaa");
});
//4.选择索引值为偶数的 div 元素
$("#btn4").click(function(){
$('div:even').css("background", "#bbffaa");
});
//5.选择索引值为奇数的 div 元素
$("#btn5").click(function(){
$('div:odd').css("background", "#bbffaa");
});
//6.选择索引值为大于 3 的 div 元素
$("#btn6").click(function(){
$('div:gt(3)').css("background", "#bbffaa");
});
//7.选择索引值为等于 3 的 div 元素
$("#btn7").click(function(){
$('div:eq(3)').css("background", "#bbffaa");
});
//8.选择索引值为小于 3 的 div 元素
$("#btn8").click(function(){
$('div:lt(3)').css("background", "#bbffaa");
});
//9.选择所有的标题元素
$("#btn9").click(function(){
$(':header').css("background", "#bbffaa");
});
//10.选择当前正在执行动画的所有元素
$("#btn10").click(function(){
$(':animated').css("background", "#bbffaa");
});
//11.选择没有执行动画的最后一个div
$("#btn11").click(function(){
$('div:not(:animated):last').css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<!-- <div>
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated
</div> -->
<input type="button" value="选择第一个 div 元素" id="btn1" />
<input type="button" value="选择最后一个 div 元素" id="btn2" />
<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
<input type="button" value="选择所有的标题元素" id="btn9" />
<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
<input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
<h3>基本选择器.</h3>
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>4. 内容过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
/**
:contains(text)
:empty
:has(selector)
:parent
*/
$(document).ready(function(){
//1.选择 含有文本 'di' 的 div 元素
$("#btn1").click(function(){
$('div:contains("di")').css("background", "#bbffaa");
});
//2.选择不包含子元素(或者文本元素) 的 div 空元素
$("#btn2").click(function(){
$('div:empty').css("background", "#bbffaa");
});
//3.选择含有 class 为 mini 元素的 div 元素
$("#btn3").click(function(){
$('div:has(.mini)').css("background", "#bbffaa");
});
//4.选择含有子元素(或者文本元素)的div元素
$("#btn4").click(function(){
$('div:parent').css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>5. 属性过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div,span,p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
/**
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
*/
$(function() {
//1.选取含有 属性title 的div元素
$("#btn1").click(function() {
$('div[title]').css("background", "#bbffaa");
});
//2.选取 属性title值等于'test'的div元素
$("#btn2").click(function() {
$('div[title="test"]').css("background", "#bbffaa");
});
//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
$("#btn3").click(function() {
$('div[title!="test"]').css("background", "#bbffaa");
});
//4.选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function() {
$('div[title^="te"]').css("background", "#bbffaa");
});
//5.选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function() {
$('div[title$="est"]').css("background", "#bbffaa");
});
//6.选取 属性title值 含有'es'的div元素
$("#btn6").click(function() {
$('div[title*="es"]').css("background", "#bbffaa");
});
//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("#btn7").click(function() {
$('div[id][title*="es"]').css("background", "#bbffaa");
});
//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("#btn8").click(function() {
$('div[title][title!="test"]').css("background", "#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
<input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
<input type="button"
value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
<input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
<input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
<input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
<input type="button"
value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."
id="btn7" />
<input type="button"
value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />
<br>
<br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display: none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" value="123456789"
size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>6. 表单过滤器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
/**
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单对象的属性
:enabled
:disabled
:checked
:selected
*/
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
$(':text:enabled').val("大家好");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
$(':text:disabled').val("大家早上好！");
});
//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function(){
alert($(':checkbox:checked').length);
});
//4.获取多选框，每个选中的value值
$("#btn4").click(function(){
var $checkboies = $(':checkbox:checked');
// alert($checkboies);
//老方法遍历
// for(var i = 0; i < $checkboies.length; i++){
// alert($checkboies[i].value);
// }
//each方法是jQuery对象提供的用来遍历元素的方法
//在遍历的function函数中，有一个this对象，这个this对象就是当前遍历到的dom对象
$checkboies.each(function () {
alert(this.value);
});
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
//获取选中的option标签
var $optons = $('select option:selected');
//遍历，获取option标签中的文本内容
$optons.each(function(){
alert(this.innerHTML);
});
});
})
</script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取多选框选中的内容.</button><br /><br />
<button id="btn5">获取下拉框选中的内容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文本框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
<br>
多选框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected="selected">辽宁</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>辽宁</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
</form>
</body>
</html>7. 元素的筛选
- eq() 获取给定索引的元素 功能跟:eq() 一样
- first() 获取第一个元素 功能跟:first 一样
- last() 获取最后一个元素 功能跟:last 一样
- filter(exp) 留下匹配的元素
- is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
- has(exp) 返回包含有匹配选择器的元素的元素 功能跟:has 一样
- not(exp) 删除匹配选择器的元素功能跟:not 一样
- children(exp) 返回匹配给定选择器的子元素 功能跟parent>child 一样
- find(exp) 返回匹配给定选择器的后代元素 功能跟ancestor descendant 一样
- next() 返回当前元素的下一个兄弟元素 功能跟prev + next 功能一样
- nextAll() 返回当前元素后面所有的兄弟元素 功能跟prev ~ siblings 功能一样
- nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
- parent() 返回父元素
- prev(exp) 返回当前元素的上一个兄弟元素
- prevAll() 返回当前元素前面所有的兄弟元素
- prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
- siblings(exp) 返回所有兄弟元素
- add() 把add 匹配的选择器的元素添加到当前jquery 对象中
六、jQuery 常用方法
1. html()、text()、val() 方法
- html() 它可以设置和获取起始标签和结束标签之间的内容，跟 dom 属性 innerHTML 一样
- text() 它可以设置和获取起始标签和结束标签之间的文本，跟 dom 属性 innerText 一样
- val() 它可以设置和获取表单项的 value 属性值，跟 dom 属性 value 一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//不传参数是获取，传了参数是设置
// alert($('div').html());//获取内容
// $('div').html('<h1>我是标题！</h1>'); //设置内容
// alert($('div').text()); //获取文本
// $('div').text('我是内容'); //设置文本
$('button').click(function () {
// alert($('#username').val()); //获取
$('#username').val("我是程序员！");//设置
});
});
</script>
</head>
<body>
<div>
我是div中的内容。
<span>我是div中的span。</span>
</div>
<input type="text" name="username" id="username"><br>
<button>操作输入框</button>
</body>
</html>
2. 案例：单选、复选、下拉列表的选中操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//操作单选按钮
$(':radio').val(["radio2"]); //选中 value=radio2的按钮
//操作复选框
$(':checkbox').val(["checkbox1", "checkbox3"]); //选中value=checkbox1 和 value=checkbox3的复选框
//操作多选下拉框
$('#multiple').val(["mul2","mul3","mul4"]); //选中value=mul2 value=mul3 和 value=mul4的选项
//操作单选下拉列表
$('#single').val(["sin2"]); //选中value=sin2的选项
//一次性选中所有要选的 单选按钮 下拉列表 复选框 等
$(':radio, :checkbox, #multiple, #single').val(["radio2", "checkbox2", "checkbox3", "mul2", "mul3", "sin3"]);
});
</script>
</head>
<body>
单选：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉多选 ：
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉单选 ：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</html>
3. attr() 和 prop() 方法
- attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等
- prop() 可以设置和获取属性的值，只推荐操作 checked、readOnly、selected、disabled 等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// alert($(':checkbox:first').attr("name")); //获取name属性的值
// $(':checkbox:first').attr("name", "abc"); //设置name属性的值
// alert($(":checkbox:first").attr("checked"));
// alert($(":checkbox:first").prop("checked"));
$(':checkbox:first').prop("checked",true);
});
</script>
</head>
<body>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
</body>
</html>
4. dom 的增删改操作
- 内部插入：
-
- appendTo() a.appendTo(b) 把a插入到b中子元素的末尾，成为b中最后一个子元素
- prependTo() a.prependTo(b) 把a插入到b中子元素的前面，成为b中第一个子元素
- 外部插入：
-
- insertAfter() a.insertAfter(b) 得到ba
- insertBefore() a.insertBefore(b) 得到ab
- 替换：
-
- replaceWith() a.replaceWith(b) 用b替换掉所有a
- replaceAll() a.replaceAll(b) 用a替换掉所有b
- 删除：
-
- remove() a.remove() 删除a标签
- empty() a.empty() 清空a标签里的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// $("<span>我是插入的span.</span>").appendTo("div"); //这里的参数div可以自己写$(选择器)去查
// $("<span>我是插入的span2.</span>").prependTo("div");
//
// $("<span>我是后面插入的span.</span>").insertAfter("div");
// $("<span>我是前面插入的span.</span>").insertBefore("div");
// $("p").replaceWith($("<span>我是span。</span>"));
// $("<h1>我是标题！</h1>").replaceAll($('p'));
// $("p").remove();
$("p").empty();
});
</script>
</head>
<body>
<div>
<span>我是span1.</span>
</div>
<p>我是段落1</p>
<p>我是段落2</p>
</body>
</html>
5. 案例：动态添加和删除表格行记录
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//创建的可以复用的删除函数
var deleteFun = function (this_) {
// alert(111);
//this对象就表示当前正在响应事件的dom对象
var $tr = $(this_).parent().parent();
//获取要删除行的姓名
var name = $tr.find("td:first").text();
if(confirm("你确定要删除【"+name+"】吗？")){
$tr.remove();
}
return false; //阻止默认行为，超链接的默认行为就是跳转
}
//给【submit】按钮绑定事件
$('#addEmpButton').click(function () {
//获取输入的内容
var empName = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
var $trObj = $("<tr>\n" +
"\t\t\t<td>"+empName+"</td>\n" +
"\t\t\t<td>"+email+"</td>\n" +
"\t\t\t<td>"+salary+"</td>\n" +
"\t\t\t<td><a href=\"deleteEmp?id=003\">Delete</a></td>\n" +
"\t\t</tr>");
$trObj.appendTo($("#employeeTable"));
$trObj.find("a").click(function () {
return deleteFun(this); //阻止默认行为，超链接的默认行为就是跳转
});
});
//给删除链接绑定事件
$("a").click(function () {
return deleteFun(this);
});
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
七、jQuery 中常用的事件
- click() 鼠标单击事件
- change() 内容改变事件
- mouseover() 鼠标移入事件
- mouseout() 鼠标移出事件
- bind() 可以给元素一次性绑定一个或多个事件
- one() 使用上跟bind一样，但是one方法绑定的事件只会响应一次
- unbind() 使用上跟bind相反，用来移除一个或多个事件
- live() 也是用来绑定事件，它可以用来绑定选择器匹配的所有元素的事件，哪怕这个元素是后面动态创建出来的也有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// $("button").click(function () {
// console.log("鼠标单击。。。");
// });
//
// $("button").mouseover(function () {
// console.log("鼠标移入。。。");
// });
//
// $("button").mouseout(function () {
// console.log("鼠标移出。。。");
// });
// $("button").bind("mouseover mouseout click", function () {
// console.log("事件被触发。。。");
// });
// $("button").one("mouseover mouseout click", function () {
// console.log("事件被触发。。。");
// })
// $("button").unbind("mouseover click");
$("button").live("mouseover mouseout click", function () {
console.log("事件被触发。。。");
});
$("<button>我是后创建的按钮</button>").appendTo("body");
})
</script>
</head>
<body>
<button>按钮</button>
</body>
</html>
八、jQuery 应用案例
1. 购物车案例
与上面案例：动态添加和删除表格行记录一样，使用 jQuery 实现对于表格内容的增、删操作，我们就不再做了。
2. 商品数量 ++，-- 案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$('#reduce').click(function(){
var newNum = $('#num').val() - 1;
if(newNum <= 0){
$('#num').val(1);
}else{
$('#num').val(newNum);
}
});
$('#plus').click(function(){
var newNum = parseInt($('#num').val()) + 1;
if(newNum > 10){
$('#num').val(10);
}else{
$('#num').val(newNum);
}
});
});
</script>
</head>
<body>
<button id="reduce">-</button>
<input type="text" id="num" value="1">
<button id="plus">+</button>
</body>
</html>
3. 省市县地址三级联动
动态的吗？写死的数组？
九、作业
- 完整的写一套关于学生的列表展示+分页、登录，要求：使用 BaseServlet、Filter，涉及到：学生表和专业表
- 在上面案例的基础上，加上 添加学生功能、修改学生功能、删除学生功能、退出功能
十. Filter 过滤器
1.模拟 Filter 过滤器
需求：在你的 web 工程下，有一个 admin 目录，这个 admin 目录下的所有资源（HTML 页面、jpg 图片、jsp 文件等等）都必须是用户登录之后才能访问。
思考：根据之前我们学过的内容，我们知道，用户登录之后都会把用户登录的信息保存到 Session 域中，所以要检查用户是否登录，可以判断 Session 中是否包含有用户登录的信息即可！
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%
Object user = request.getSession().getAttribute("user");
if(user == null){
request.getRequestDispatcher("/login.jsp").forward(request, response);
}
%>
我是a.jsp页面。
</body>
</html>但是这种做法有局限性，这种代码只能写在 jsp 中，不能在 HTML 中、jpg 中编写呀！
2. 什么是 Filter 过滤器
- Filter 过滤器它是 JavaWeb 的三大组件之一。三大组件分别是：Servlet 程序、Listenter 监听器、Filter 过滤器
- Filter 过滤器它是 JavaEE 的规范，也就是接口
- Filter 过滤器它的作用是：拦截请求进行过滤
- 拦截请求常见的应用场景有：
-
- 权限检查
- 日志操作
- 事务管理
- 等等
3. Filter 过滤器的编写步骤
- 创建一个类，实现过滤器接口（Filter）
- 实现方法，编写自己的代码
- 在 web.xml 中配置过滤器(或者使用注解配置)
4. Filter 过滤器的使用(字符编码过滤器)
自定义的字符编码过滤器类
package com.xszx.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;
@WebFilter(urlPatterns = {"/*"}) // /* 表示拦截所有的请求
public class CharacterFilter implements Filter {
public CharacterFilter() {
System.out.println("过滤器构造方法被执行。。。");
}
/**
* 初始化方法，执行一些初始化的操作，一般不用
* @param filterConfig
* @throws ServletException
*/
@Override
public void init(FilterConfig filterConfig) throws ServletException {
System.out.println("过滤器的初始化方法被执行。。。");
}
/**
* 过滤器的核心方法，过滤器拦截到请求后，就是在该方法中对请求进行判断，
* 看是否让该请求继续访问我们的资源
* @param servletRequest 封装请求的信息
* @param servletResponse 封装响应的信息
* @param filterChain 过滤器练，可以用来放行
* @throws IOException
* @throws ServletException
*/
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
System.out.println("过滤器doFilter方法被执行，开始对请求进行判断处理");
servletRequest.setCharacterEncoding("utf-8");
servletResponse.setContentType("text/html;charset=utf-8");
// 放行请求
filterChain.doFilter(servletRequest, servletResponse);
}
/**
* 销毁方法，用来做一些释放资源的操作，一般不用
*/
@Override
public void destroy() {
System.out.println("过滤器销毁方法被执行。。。。。");
}
}自定义的Servlet
package com.xszx.controller;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("你好!");
}
}测试：
- 启动服务器，观察控制台的打印情况
- 访问 HelloServlet，观察控制台的打印情况
5. 过滤器案例（登录过滤器）
5.1 需求
之前我们写过登录功能，但登录功能貌似就是一个摆设，如果用户没有登录，直接通过地址栏输入登录成功后的页面地址也可以访问！！！
这时候我们就可以编写登录的过滤器，通过该过滤器拦截所有的请求，然后判断该用户是否登录，登录之后放行请求，未登录则重定向到登录页面！
在之前的登录案例中编写即可。
5.2 编写登录的过滤器
package com.xszx;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
@WebFilter("/*")
public class LoginFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest)servletRequest;
HttpServletResponse response = (HttpServletResponse)servletResponse;
HttpSession session = request.getSession();
Object user = session.getAttribute("user");
String requestURI = request.getRequestURI(); // 获取到 /项目路径/资源名称
if(user == null){ // 未登录
if(requestURI.indexOf("login") != -1){ // 用户是去登录的，点击了登录按钮
// 放行
filterChain.doFilter(servletRequest, servletResponse);
}else if(requestURI.indexOf("index.jsp") != -1){ // 用户是访问登录页面的
// 放行
filterChain.doFilter(servletRequest, servletResponse);
}else{
// 重定向到登录页面
response.sendRedirect(request.getContextPath() + "/index.jsp");
}
}else{ // 登录了
// 放行
filterChain.doFilter(servletRequest, servletResponse);
}
}
@Override
public void destroy() {
}
}
969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
