1、jQuery介绍
什么是jQuery？
jQuery，就是JavaScript和查询（Query），是辅助JavaScript开发的js类库。
jQuery核心思想！！！
它的核心思想是weite less、do more（写得更少、做得更多），所以实现了很多浏览器的兼容问题。
jQuery好处！！！
免费、开源、语法设计可以使开发更加便捷，假如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。
2、jQuery简单使用
1）使用$()代替window.onload
2）使用选择器获取dom对象，随后进行绑定，注意要使用 #
举例代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//方式一：
/*window.οnlοad=function (){
var btnobj=document.getElementById("btnId");
btnobj.οnclick=function (){ // 动态绑定
alert(btnobj.innerText);
}
}*/
//方式二：
$(function (){ //表示页面加载完成，相当于window.οnlοad=function (){}
var $btnobj = $("#btnId"); //表示按id查询标签对象，注意要加#号
$btnobj.click(function () { //绑定单击事件
alert("jQuery的单击事件");
});
});
/*//使用$()代替window.onload
$(function(){
//使用选择器获取按钮对象，随后绑定单击响应函数
$("#btnId").click(function(){
//弹出Hello
alert('Hello');
});
});*/
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
3）常见的问题：
① 使用jQuery一定要引入jQuery库吗?
是的
② jQuery中的$是什么？
是一个函数
③ 怎么为按钮添加点击响应函数的？
1.使用jQuery查询到标签对象
2.使用标签对象.click(function(){});
3、jQuery核心函数
$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数。
1）传入参数为函数时：$(function (){};
表示页面加载完成之后。相当于window.onload=function(){}
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//传入参数为[函数]时：在文档加载完成后执行这个函数
$(function (){
alert("页面加载完成");
};
</script>
2)传入参数为HTML字符串时：
会创建这个html标签对象（元素结点对象）
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
$("<div>\n" +
" <span>div-span1</span>\n" +
" <span>div-span2</span>\n" +
"</div>").appendTo("body");
});
</script>
3）传入参数为选择器字符串时：
根据这个字符串查找元素节点对象
$("#(id属性值)"); id选择器，根据id查询标签对象
$("标签名"); 标签名选择器，根据标签名查询标签对象
$(".class属性值"); 类型选择器，可以根据class属性查询标签对象
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//核心函数的4个作用
//传入参数为[函数]时：在文档加载完成后执行这个函数
$(function (){
alert("页面加载完成");
//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
$("<div>\n" +
" <span>div-span1</span>\n" +
" <span>div-span2</span>\n" +
"</div>").appendTo("body");
//传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
alert($("button").length);
//传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
});
</script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
4）传入参数为DOM对象时：
会把DOM包装为jQuery对象返回
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//核心函数的4个作用
//传入参数为[函数]时：在文档加载完成后执行这个函数
$(function (){
alert("页面加载完成");
//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
$("<div>\n" +
" <span>div-span1</span>\n" +
" <span>div-span2</span>\n" +
"</div>").appendTo("body");
//传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
alert($("button").length);
//传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
var btnobj=document.getElementById("btn01");
alert($(btnobj));
});
</script>
</head>
<body>
<button id="btn01">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
4、jQuery对象和DOM对象区别
4.1 什么是jQuery对象，什么是DOM对象
DOM对象：
① 通过getElementById()查询出来的标签对象是Dom对象
② 通过getElementsByName()查询出来的标签对象是Dom对象
③ 通过getElementsByTagName()查询出来的标签对象是Dom对象
④ 通过createElement()方法创建的对象，是Dom对象
jQuery对象
① 通过jQuery提供的API创建的对象，是jQuery对象
alert($("<h1></h1>"));
② 通过jQuery包装的Dom对象，也是jQuery对象
var btnobj =document.getElementById("btn01");
alert($(btnobj));
③ 通过jQuery提供的API查询到的对象，是jQuery对象
alert($("#btn01")); //根据button标签的id="#btn01"查询
alert($("button")); //根据button标签查询
4.2 jQuery对象的本质是什么？
jQuery对象是Dom对象组成的数组 + jQuery提供的一系列功能函数。
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//testDiv.css("color","red")
//testDiv.style.color = "blue";
var arr=[12,"abc",true];
var $btns=$("button");
for (var i=0;i<$btns.length;i++){
alert($btns[i]); //[object HTMLButtonElement]
}
});
</script>
4.3 jQuery对象和Dom对象使用的区别
jQuery对象不能使用DOM对象的属性和方法；DOM对象也不能使用jQuery对象的属性和方法。
4.4 jQuery对象和Dom对象相互转换
1）dom对象转换为jQuery对象（重点）
① 先得到DOM对象
② $(DOM对象) 就可以转换为jQuery对象
2）jQuery对象转为dom对象（重点）
① 先有jQuery对象
② jQuery对象[下标] 取出相应的DOM对象
alert($(document.getElementById("testDiv"))[0]);
5、jQuery选择器（重点）
5.1 基本选择器（重点）
<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="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//1.选择 id 为 one 的元素 "background-color","#bbffaa"
$(function (){
$("#btn1").click(function (){
//css（）方法可以设置获取样式
$("#one").css("background-color","#bbffaa");
});
//2.选择 class 为 mini 的所有元素
//css（）方法可以设置获取样式
$("#btn2").click(function (){
$(".mini").css("background-color","#bbffaa");
});
//3.选择 元素名是 div 的所有元素
$(function () {
$("#btn3").click(function () {
//css（）方法可以设置获取样式
$("div").css("background-color", "#bbffaa");
});
});
//4.选择所有的元素
$(function () {
$("#btn4").click(function () {
$("*").css("background-color", "#bbffaa");
});
});
//5.选择所有的 span 元素和id为two的元素 ---用到组合选择器
$(function () {
$("#btn5").click(function () {
$("#two,span").css("background-color", "#bbffaa");
});
});
});
</script>
</head>
<body>
<!-- <div>
<h1>基本选择器</h1>
</div> -->
<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>
5.2 层级选择器（重点）
① ancestor descendant- - -在给定的祖先元素下匹配所有的后代元素
需求：找到表单（from）中所有的 input 元素
HTML 代码:
<form> //祖先元素
<label>Name:</label>
<input name="name" /> //后代元素
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" /> //后代元素
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
② parent > child- - -在给定的父元素下匹配所有的子元素（直接的父子关系-不涉及跨代）
需求：匹配表单中所有的子级input元素。
HTML 代码:
<form> //父元素
<label>Name:</label>
<input name="name" /> //子元素
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" /> //孙子元素
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]
③ prev + next- - -匹配所有紧接在 prev 元素后的 next 元素 （next，一个有效选择器并且紧接着第一个选择器也要是同级）
需求：匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
<label>Name:</label> //第一个prev元素
<input name="name" /> //第一个next元素
<fieldset>
<label>Newsletter:</label> //第二个prev元素
<input name="newsletter" /> //第二个next元素
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
④ prev ~ siblings- - -匹配 prev 元素之后的所有 siblings 元素 （siblings一个选择器，并且它作为第一个选择器的同级）
需求：找到所有与表单（from）同辈的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]
5.3 过滤选择器
1）基本过滤器：
<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="../script/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>
<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>
2） 内容过滤选择器
① :contains(text) 匹配包含给定文本的元素，其中text是一个用于查找的字符串
② :empty 匹配所有不包含子元素或者文本的空元素
③ :has(selector) 匹配含有选择器所匹配的元素的元素，其中Selector是一个用于筛选的选择器
④ :parent 匹配含有子元素或者文本的元素
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //执行动画
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(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>
3） 可见性过滤选择器
① :hidden- - -匹配所有不可见元素，或者type为hidden的元素
需求1：查找隐藏的 tr
HTML 代码:
<table>
<tr style="display:none"><td>Value 1</td></tr> //style="display:none"表示隐藏
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:hidden")
结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]
需求2：匹配type为hidden的元素
HTML 代码:
<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>
jQuery 代码:
$("input:hidden")
结果:
[ <input type="hidden" name="id" /> ]
② :visible- - -匹配所有的可见元素
需求：查找所有可见的 tr 元素
HTML 代码:
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:visible")
结果:
[ <tr><td>Value 2</td></tr> ]
4） 属性过滤选择器（^、$与正则表达式中含义相同）
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(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() { //与3不同，3中属性值不为title的也会被选中
$("div[title][title!='test']").css("background", "#bbffaa");
});
});
</script>
5） 表单和表单对象属性过滤选择器（只对表单form进行操作）
表单：
:input //匹配所有 input, textarea, select 和 button 元素
:text //匹配所有的单行文本框
:password //匹配所有密码框
:radio //匹配所有单选按钮
:checkbox //匹配所有复选框
:submit //匹配所有提交按钮
:image //匹配所有图像域
:reset //匹配所有重置按钮
:button //匹配所有按钮
:file //匹配所有文件域
:hidden //匹配所有不可见元素，或者type为hidden的元素
表单对象的属性
:enabled //匹配所有可用元素
:disabled //匹配所有不可用元素
:checked //匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected //匹配所有选中的option元素
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
//val可以操作表单项的value属性值
//可以设置和获取
$(":text:enabled").val("Good");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
$(":text:disabled").val("VeryGood");
});
//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function(){
alert($(":checkbox:checked").length);
});
//4.获取多选框，每个选中的value值
$("#btn4").click(function(){
//1、获取全部选中的复选框标签对象
var $checkboies=$(":checkbox:checked");
//遍历方式一：
/*//2、遍历获取dom对象并输出其value值
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(){
var $checkedSelected=$("select option:selected");
$checkedSelected.each(function (){
alert(this.value);
})
});
});
</script>
6、jQuery元素筛选- - 有过滤、查找、串联
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM查询</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="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
//(1)eq() 选择索引值为等于 3 的 div 元素
$("#btn1").click(function(){
$("div").eq(3).css("background-color","#bfa");
});
//(2)first()选择第一个 div 元素
$("#btn2").click(function(){
//first() 选取第一个元素
$("div").first().css("background-color","#bfa");
});
//(3)last()选择最后一个 div 元素
$("#btn3").click(function(){
//last() 选取最后一个元素
$("div").last().css("background-color","#bfa");
});
//(4)filter()在div中选择索引为偶数的
$("#btn4").click(function(){
//filter() 过滤 传入的是选择器字符串
$("div").filter(":even").css("background-color","#bfa");
});
//(5)is()判断#one是否为:empty或:parent
//is用来检测jq对象是否符合指定的选择器
$("#btn5").click(function(){
alert($("one").is(":empty"));
});
//(6)has()选择div中包含.mini的
$("#btn6").click(function(){
//has(selector) 选择器字符串 是否包含selector
$("div").has(".mini").css("background-color","#bfa");
});
//(7)not()选择div中class不为one的
$("#btn7").click(function(){
//not(selector) 选择不是selector的元素
$("div").not(".one").css("background-color","#bfa");
});
//(8)children()在body中选择所有class为one的div子元素
$("#btn8").click(function(){
//children() 选出所有的子元素
$("body").children("div.one").css("background-color","#bfa");
});
//(9)find()在body中选择所有class为mini的div元素
$("#btn9").click(function(){
//find() 选出所有的后代元素
$("body").find("div.mini").css("background-color","#bfa");
});
//(10)next() #one的下一个div
$("#btn10").click(function(){
//next() 选择下一个兄弟元素
$("#one").next("div").css("background-color","#bfa");
});
//(11)nextAll() #one后面所有的span元素
$("#btn11").click(function(){
//nextAll() 选出后面所有的元素
$("#one").nextAll("span").css("background-color","#bfa");
});
//(12)nextUntil() #one和span之间的元素
$("#btn12").click(function(){
//
$("#one").nextUntil("span").css("background-color","#bfa")
});
//(13)parent() .mini的父元素
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#bfa");
});
//(14)prev() #two的上一个div
$("#btn14").click(function(){
//prev()
$("#two").prev("div").css("background-color","#bfa")
});
//(15)prevAll() span前面所有的div
$("#btn15").click(function(){
//prevAll() 选出前面所有的元素
$("span").prevAll("div").css("background-color","#bfa")
});
//(16)prevUntil() span向前直到#one的元素
$("#btn16").click(function(){
//prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止
$("span").prevUntil("#one").css("background-color","#bfa")
});
//(17)siblings() #two的所有兄弟元素
$("#btn17").click(function(){
//siblings() 找到所有的兄弟元素，包括前面的和后面的
$("#two").siblings("div").css("background-color","#bfa")
});
//(18)add()选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){
// $("span,#two,.mini,#one")
$("span").add("#two").css("background-color","#bfa");
});
});
</script>
</head>
<body>
<input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
<input type="button" value="first()选择第一个 div 元素" id="btn2" />
<input type="button" value="last()选择最后一个 div 元素" id="btn3" />
<input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
<input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
<input type="button" value="has()选择div中包含.mini的" id="btn6" />
<input type="button" value="not()选择div中class不为one的" id="btn7" />
<input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
<input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
<input type="button" value="next()#one的下一个div" id="btn10" />
<input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
<input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
<input type="button" value="parent().mini的父元素" id="btn13" />
<input type="button" value="prev()#two的上一个div" id="btn14" />
<input type="button" value="prevAll()span前面所有的div" id="btn15" />
<input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
<input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
<input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
<h3>基本选择器.</h3>
<br /><br />
文本框<input type="text" name="account" disabled="disabled" />
<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"><b>class为mini,title为other</b></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>
<span id="span1">^^span元素 111^^</span>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span2">^^span元素 222^^</span>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
7、jQuery的属性操作
1）属性
① attr(name|properties|key,value|fn) 设置或返回被选元素的属性值 - - -不推荐checked、readOnly、selected、disabled
参数name描述：
jQuery 代码:
$("img").attr("src");
参数properties 描述:
为所有图像设置src和alt属性。
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
参数key,value 描述:
为所有图像设置src属性。
jQuery 代码:
$("img").attr("src","test.jpg");
参数key,回调函数 描述:
把src属性的值设置为title属性的值。
jQuery 代码:
$("img").attr("title", function() { return this.src });
② removeAttr(name) 从每一个匹配的元素中删除一个属性
描述:
将文档中图像的src属性删除
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").removeAttr("src");
结果:
[ <img /> ]
③ prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值 - - -只推荐checked、readOnly、selected、disabled 与attr()互补
参数name 描述:
选中复选框为true，没选中为false
jQuery 代码:
$("input[type='checkbox']").prop("checked");
参数properties 描述:
禁用页面上的所有复选框。
jQuery 代码:
$("input[type='checkbox']").prop({
disabled: true
});
参数key,value 描述:
禁用和选中所有页面上的复选框。
jQuery 代码:
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
参数key,回调函数 描述:
通过函数来设置所有页面上的复选框被选中。
jQuery 代码:
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
④ removeProp(name) 用来删除由.prop()方法设置的属性集
描述:
设置一个段落数字属性，然后将其删除。
HTML 代码:
<p> </p>
jQuery 代码:
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
结果:
The secret luggage code is: 1234. Now the secret luggage code is: undefined.
2）CSS类
① addClass(class|fn)，为每个匹配的元素添加指定的类名 - - - 一个或多个要添加到元素中的CSS类名，使用空格分开
向被选元素添加一个或多个类
为匹配的元素加上 'selected' 类
jQuery 代码:
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
回调函数 描述:
给li加上不同的class
HTML 代码:
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
jQuery 代码:
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
② removeClass(class|fn)，从所有匹配的元素中删除全部或者指定的类
从被选元素删除一个或多个类
参数class 描述:
从匹配的元素中删除 'selected' 类
jQuery 代码:
$("p").removeClass("selected");
参数class 描述:
删除匹配元素的所有类
jQuery 代码:
$("p").removeClass();
回调函数描述:
删除最后一个元素上与前面重复的class
jQuery 代码:
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
③ toggleClass(class|fn[,sw])，如果存在（不存在）就删除（添加）一个类
对被选元素进行添加/删除类的切换操作
参数class 描述:
为匹配的元素切换 'selected' 类
jQuery 代码:
$("p").toggleClass("selected");
参数class,switch 描述:
每点击三下加上一次 'highlight' 类
HTML 代码:
<strong>jQuery 代码:</strong>
jQuery 代码:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
回调函数 描述:
根据父元素来设置class属性
jQuery 代码:
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
④ offset（），获取匹配元素在当前视口的相对偏移
返回第一个匹配元素相对于文档的位置
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
//基本初始状态
$("li:gt(5):not(:last)").hide();
//给功能按钮绑定单击事件
$("div div a").click(function (){
//让某些品牌显示或消失
$("li:gt(5):not(:last)").toggle();
//判断品牌，当前是否可见
if ($("li:gt(5):not(:last)").is(":hidden")){
//品牌隐藏的状态：1 显示全部品牌 --角标向下
$("div div a span").text("显示全部品牌");
$("div div ").removeClass();
$("div div").addClass("showmore");
//去高亮
$("li:contains('明基')").removeClass("promoted")
}else {
//品牌显示的状态：2 显示精简品牌 --角标向上
$("div div a span").text("显示精简品牌");
$("div div ").removeClass();
$("div div").addClass("showless");
//加高亮
$("li:contains('明基')").addClass("promoted")
}
return false;
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821) </i></li>
<li><a href="#">松下</a><i>(12289) </i></li>
<li><a href="#">卡西欧</a><i>(8242) </i></li>
<li><a href="#">富士</a><i>(14894) </i></li>
<li><a href="#">柯达</a><i>(9520) </i></li>
<li><a href="#">宾得</a><i>(2195) </i></li>
<li><a href="#">理光</a><i>(4114) </i></li>
<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li><a href="#">明基</a><i>(1466) </i></li>
<li><a href="#">爱国者</a><i>(3091) </i></li>
<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
3）HTML代码/文本/值
① html([val|fn])，取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
- 跟dom属性innerHTML一样
注意：
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
无参数 描述:
返回p元素的内容。
jQuery 代码:
$('p').html();
参数val 描述:
设置所有 p 元素的内容
jQuery 代码:
$("p").html("Hello <b>world</b>!");
回调函数描述:
使用函数来设置所有匹配元素的内容。
jQuery 代码:
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
② text([val|fn])，取得所有匹配元素的内容，结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
- 跟dom属性innerText一样
如下：
无参数 描述:
返回p元素的文本内容。
jQuery 代码:
$('p').text();
参数val 描述:
设置所有 p 元素的文本内容
jQuery 代码:
$("p").text("Hello world!");
回调函数 描述:
使用函数来设置所有匹配元素的文本内容。
jQuery 代码:
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
③ val([val|fn|arr])，获得表单匹配元素的当前值
- 跟dom属性value一样
如下：
无参数 描述:
获取文本框中的值
jQuery 代码:
$("input").val();
参数val 描述:
设定文本框的值
jQuery 代码:
$("input").val("hello world!");
回调函数 描述:
设定文本框的值
jQuery 代码:
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
举例代码如下（全选、全不选）：
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
//全选
$("#checkedAllBtn").click(function (){
$(":checkbox").prop("checked",true);
});
//全不选
$("#checkedNoBtn").click(function (){
$(":checkbox").prop("checked",false);
});
//反选
$("#checkedRevBtn").click(function (){
$(":checkbox[name='items']").prop("checked",function (){/*alert(this.checked);*/ return !this.checked});
//上面的this为第二个function中通过":checkbox[name='items']"获取的集合的每一个元素
//之后要检查是否满选，获取全部球类个数，与选中球类个数对比
var allCounts =$(":checkbox[name='items']").length;
var selectCounts =$(":checkbox[name='items']:checked").length;
/*if (allCounts==selectCounts){
$("#checkedAllBox").prop("checked",true);
}else {
$("#checkedAllBox").prop("checked",false);
}*/
$("#checkedAllBox").prop("checked",allCounts==selectCounts);
});
//提交
$("#sendBtn").click(function (){
//获取选中的球类的复选框
$(":checkbox[name='items']:checked").each(function (){
alert(this.value);
});
});
//给[全选/全不选]绑定单击事件
$("#checkedAllBox").click(function (){
//在事件的function函数中，有一个this对象，这个this对象使当前正在响应事件的dom对象
// this.checked; this是id为checkedAllBox的单选框
//alert(this.checked);
$(":checkbox[name='items']").prop("checked",this.checked);
});
//给全部球类绑定单击事件
$(":checkbox[name='items']").click(function (){
//之后要检查是否满选，获取全部球类个数，与选中球类个数对比
var allCounts =$(":checkbox[name='items']").length;
var selectCounts =$(":checkbox[name='items']:checked").length;
/*if (allCounts==selectCounts){
$("#checkedAllBox").prop("checked",true);
}else {
$("#checkedAllBox").prop("checked",false);
}*/
$("#checkedAllBox").prop("checked",allCounts==selectCounts);
});
});
</script>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
8、DOM的增删改
1）内部插入 （嵌套-父子关系）
总结：prepend与prependTo同样
① append()a是被插入的对象，b是要在对象内插入的元素内容。
② appendTo()a是要插入的元素内容，而b是被插入的对象。
2）外部插入 （同级-兄弟关系）after、before与内部插入的道理相同
3）替换
4）删除
实现代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM增删改</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/**
文档处理
内部插入
appendTo(content) a.appendTo(b); 把a加到b里面 添加到最后面
prependTo(content) a.prependTo(b); 把a添加到b里面 添加到最前面
外部插入
insertAfter(content) a.insertAfter(b); 把a插入到b的后面
insertBefore(content) a.insertBefore(b); 把a插入到b的前面
替换
replaceWith(content|fn) a.replaceWith(b) 把a用b替换
replaceAll(selector) a.replaceAll(b) 用a替换所有的b
删除
empty() a.empty() 把a掏空，把a里面的所有元素都删除
remove([expr]) a.remove(b) 所有的a，是b的话就会删除 a.remove()删除a
*/
$(function(){
$("#btn01").click(function(){
//创建一个"广州"节点,添加到#city下[appendTo()]
//子节点.appendTo(父节点)
$("<li>广州</li>").appendTo("#city");
//$("#city").append("<li>广州</li>"); 效果相同
});
$("#btn02").click(function(){
//创建一个"广州"节点,添加到#city下[prependTo()]
$("<li>广州</li>").prependTo("#city");
//$("#city").prepend("<li>广州</li>"); 效果相同
});
$("#btn03").click(function(){
//将"广州"节点插入到#bj前面[insertBefore()]
//前边.insertBefore(后边的)
$("<li>广州</li>").insertBefore("#bj");
//$("#bj").before("<li>广州</li>"); 效果相同
});
$("#btn04").click(function(){
//将"广州"节点插入到#bj后面[insertAfter()]
//后边.insertAfter(前边的)
$("<li>广州</li>").insertAfter("#bj");
//$("#bj").after("<li>广州</li>"); 效果相同
});
$("#btn05").click(function(){
//使用"广州"节点替换#bj节点[replaceWith()]
//被替换的.replaceWith()
$("#bj").replaceWith($("<li>广州</li>"));
//$("#bj").replaceWith("<li>广州</li>); 效果相同
});
$("#btn06").click(function(){
//使用"广州"节点替换#bj节点[replaceAll()]
//新的节点.replaceAll(旧的节点)
$("<li>广州</li>").replaceAll("#bj");
});
$("#btn07").click(function(){
//删除#rl节点[remove()]
//$("ul").remove("#rl");
//$("#rl").remove();
$("ul").remove("#rl");
$("#rl").remove();
});
$("#btn08").click(function(){
//掏空#city节点[empty()]
$("#city").empty();
});
$("#btn09").click(function(){
//读取#city内的HTML代码
//jQuery对象的html输出，无参是读取，有参是设置
alert($("#city").html());
//dom对象的innerHTML输出，先通过jQuery对象遍历出dom对象，再取每个dom对象的innerHTML
$("#city").each(function (){alert(this.innerHTML)});
});
$("#btn10").click(function(){
//设置#bj内的HTML代码
$("#bj").html("北京欢迎您！");
});
});
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州"节点,添加到#city下[appendTo()]</button></div>
<div><button id="btn02">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
<div><button id="btn03">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
<div><button id="btn04">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
<div><button id="btn05">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
<div><button id="btn06">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
<div><button id="btn07">删除#rl节点[remove()]</button></div>
<div><button id="btn08">掏空#city节点[empty()]</button></div>
<div><button id="btn09">读取#city内的HTML代码</button></div>
<div><button id="btn10">设置#bj内的HTML代码</button></div>
</div>
</body>
</html>
9、练习
练习题1：左到右、右到左
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//页面加载完成之后
$(function (){
//绑定第一个按钮,选中添加到右边
$("button:eq(0)").click(function (){
$("[name=sel01] option:selected").appendTo($("[name=sel02]"));
});
//绑定第二个按钮,选中添加全部到右边
$("button:eq(1)").click(function (){
$("[name=sel01] option").appendTo($("[name=sel02]"));
});
//绑定第三个按钮,选中添加全部到右边
$("button:eq(2)").click(function (){
$("[name=sel02] option:selected").appendTo($("[name=sel01]"));
});
//绑定第四个按钮,选中添加全部到右边
$("button:eq(3)").click(function (){
$("[name=sel02] option").appendTo($("[name=sel01]"));
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
练习题2：添加删除记录
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//创建一个用于复用的删除的function函数
var deleteFun=function (){
//在事件响应的function函数中，this对象是当前
// 正在响应事件的dom对象
//取到此当前a标签的行
var $trObj=$(this).parent().parent();
var name=$trObj.find("td:first").text();
/*
* confirm是js语言提供的一个确认提示框函数，提供什么就提示什么
* 当用户点击确定返回true，点击取消返回false
* */
if (confirm("确定要删除["+name+"]吗？")){
$trObj.remove();
}
return false; //可以阻止元素的默认行为
};
//添加操作
$("#addEmpButton").click(function (){
//获取输入框姓名、邮箱、工资的内容
var name =$("#empName").val();
var email =$("#email").val();
var salary =$("#salary").val();
//创建一个行标签对象，添加到显示数据的表格中
var $trObj=$("<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
"</tr>");
$trObj.appendTo("#employeeTable ")
//给添加的行的a标签绑上事件
$trObj.find("a").click(deleteFun);
});
//删除操作
//给删除的a标签绑定单击事件
$("a").click(deleteFun);
});
</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>
10、jQuery动画
<script type="text/javascript">
$(function(){
//显示 show()
$("#btn1").click(function(){
$("#div1").show(1000,function (){
alert("show动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function(){
$("#div1").hide(2000);
});
//切换 toggle()
$("#btn3").click(function(){
$("#div1").toggle(1000);
});
/*//故可以实现一直动画
var fun=function (){
$("#div1").toggle(1000,fun);
};
fun();*/
//淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(1000,function (){
alert("fadeIn完成")
});
});
//淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(1000);
});
//淡化到 fadeTo()
$("#btn6").click(function(){
$("#div1").fadeTo(1000,0.5,function (){
alert("0.5的透明的已完成")
});
});
//淡化切换 fadeToggle()
$("#btn7").click(function(){
$("#div1").fadeToggle(1000);
});
})
</script>
11、jQuery事件操作
1、$(function(){});和window.onload的区别？
①：
window.onload会在整个页面加载完毕之后调用
$(function(){});会在当前文档加载完毕之后调用
//1、导入jquery的.js文件
//2、可以在导入文件后的任意位置
// 1）、可以写在head里面，如果写在head里面可能导致元素查找不到等问题
// 1-1、只需要把代码写在$(function(){ jquery代码 })
// 2）、可以写在head之后的任意位置，我们一般不采用这种写法。
// 3）、综合以上考虑，1-1
//3、window.onload & $(function(){})
//window.onload只可以使用一次，且执行最后一次的赋值函数。
//$(function(){})可以使用多次
② 它们分别在什么时候触发？
1、jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
2、原生js的页面加载完成之后，除了要等浏览器的内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。
③ 它们触发的顺序？
1、jQuery页面加载完成之后先执行
2、原生js的页面加载完成之后
2、jQuery中其他的事件处理方法：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
/*$("h5").click(function () { // 传function是绑定事件
alert('h5单击事件 == click方法绑定')
});*/
// 使用live绑定的单击事件
$("h5").live("click",function () {
alert('h5单击事件 == live方法绑定');
});
$('<h5 class="head">什么是jQuery?</h5>').appendTo( $("#panel") );
// $("button").click(function () {
// $("h5").click(); // 不传function是触发事件
// });
//鼠标移入
// $("h5").mouseover(function () {
// console.log("你进来了")
// });
// //鼠标移出
// $("h5").mouseout(function () {
// console.log("你出去了")
// });
// 使用bind绑定事件
// $("h5").bind("click mouseover mouseout",function () {
// console.log("这是bind绑定的事件");
// });
// $("h5").one("click mouseover mouseout",function () {
// console.log("这是one绑定的事件");
// });
// $("h5").unbind();
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
<button>按钮</button>
</div>
</body>
</html>
3、事件的冒泡：
什么是事件的冒泡？
事件的冒泡是指：父子元素同时监听一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
如何阻止事件的冒泡？
在子元素事件函数体内，return false; 就可以阻止冒泡传递。
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//冒泡就是事件的向上传导，子元素的事件被触发，父元素的响应事件也会触发
//解决冒泡问题：return false;
//给span绑定一个单击响应函数
$("span").click(function(){
alert("我是span的单击响应函数");
return false; //阻止冒泡问题
});
//给id为content的div绑定一个单击响应函数
$("#content").click(function(){
alert("我是div的单击响应函数");
return false;
});
//给body绑定一个单击响应函数
$("body").click(function(){
//alert("我是body的单击响应函数");
});
//取消默认行为
/* $("a").click(function(){
return false;
}) */
})
</script>
4、javaScript事件对象：
事件对象，是封装有触发的事件信息的一个javascript对象。
4.1 如何获取JavaScript事件对象？
在给元素绑定事件的时候，在事件的function（event）参数列表中添加一个参数，这个参数名，我们习惯取名为event。
比如：
① 原生javascript绑定获取事件对象
② jQuery代码绑定获取事件对象
③ 使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
//1.原生javascript获取 事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}
//2.JQuery代码获取 事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});
});
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
4.2 运用javascript对象练习 - -图片跟随？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function (event){
if (event.type=="mouseover"){
$("#showBig").show();
}else if (event.type=="mouseout"){
$("#showBig").hide();
}else if (event.type=="mousemove"){
$("#showBig").offset({ //设置坐标
left: event.pageX+20,
top:event.pageY+20
});
}
});
});
</script>
</head>
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>
12、书城项目第一阶段：表单验证
验证用户名：必须由字母，数字下划线组成，并且长度5-12位
验证密码：必须由字母，数字下划线组成，并且长度5-12位
验证确认密码：与密码相同
邮箱验证：xxxxx@xxx.com
验证码：现在只需要验证用户已输入，应为还没讲到服务器，验证码生成。
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员注册页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
<script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//页面加载完成之后
$(function (){
//给注册提交绑定单击事件
$("#sub_btn").click(function (){
//1、获取用户名输入框里的内容
var usernameText = $("#username").val();
//2、创建正则表达式对象
var usernamePatt=/^\w{5,12}$/;
//3、使用test方法验证
if (!usernamePatt.test(usernameText)){
//4、提示用户结果
$("span.errorMsg").text("用户名不合法！");
return false;
}
//1、获取用户名输入框里的内容
var passwordText = $("#password").val();
//2、创建正则表达式对象
var passwordPatt=/^\w{5,12}$/;
//3、使用test方法验证
if (!passwordPatt.test(passwordText)){
//4、提示用户结果
$("span.errorMsg").text("密码不合法！");
return false;
}
//1、获取用户名输入框里的内容
var repwdText = $("#repwd").val();
//3、使用test方法验证
if (passwordText != repwdText){
//4、提示用户结果
$("span.errorMsg").text("确认密码和密码不一致！");
return false;
}
//1、获取用户名输入框里的内容
var emailText = $("#email").val();
//2、创建正则表达式对象
var emailPatt=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
//3、使用test方法验证
if (!emailPatt.test(emailText)){
//4、提示用户结果
$("span.errorMsg").text("邮箱格式不合法！");
return false;
}
//验证码
var codeText = $("#code").val();
//去掉验证码前后空格
codeText=$.trim(codeText);
if (codeText==null || codeText==""){
$("span.errorMsg").text("验证码错误！")
}
$("span.errorMsg").text("");
});
});
</script>
<style type="text/css">
.login_form{
height:420px;
margin-top: 25px;
}
</style>
</head>
<body>
<div id="login_header">
<img class="logo_img" alt="" src="../../static/img/logo.gif" >
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">欢迎注册</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>注册尚硅谷会员</h1>
<span class="errorMsg"></span>
</div>
<div class="form">
<form action="regist_success.html">
<label>用户名称：</label>
<input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
<br />
<br />
<label>用户密码：</label>
<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
<br />
<br />
<label>确认密码：</label>
<input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
<br />
<br />
<label>电子邮件：</label>
<input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email" />
<br />
<br />
<label>验证码：</label>
<input class="itxt" type="text" style="width: 150px;" id="code"/>
<img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">
<br />
<br />
<input type="submit" value="注册" id="sub_btn" />
</form>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<span>
尚硅谷书城.Copyright ©2015
</span>
</div>
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
