1、JQuery介绍
什么是JQuery ?jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。JQuery核心思想:它的核心思想是write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。
JQuery流行程度:jQuery现在已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
JQuery好处:jQuery是免费、开源的,jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
2、JQuery 的初体验!!!
1)第一步,先使用script标签引入Jquery源文件。2)第二步,在文档加载完成之后,给按钮动态绑定事件。
完整的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--
每一个script标签。要第用来引js文件,要么用来定义javascript代码
jquery的使用,第一步,要先把jquery的类库给引进来
-->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 在JQuery中$是Jquery的核心函数
/*
$(function(){}) // 跟window.onload事件功能一样
*/
$(function(){ // 相当于 javascript window.onload事件
/*
$("#btnId") 相当于document.getElementById("btnId");
$("#btnId").click(function(){}) 相当于
document.getElementById("btnId").onclick = function(){}
*/
$("#btnId").click(function(){
alert("单击事件");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
问题?
1、使用jquery一定要引入jquery库吗? 答案: 是的
2、jquery中的$到底是什么? 答案: 核心函数,alert($)就知道了
3、怎么为按钮添加点击响应函数的? 答案: 1)查询元素,2)绑定事件
3、Jquery 核心函数 $()
$ 是jquery的核心函数,能完成jquery的很多功能。$()就是调用$这个函数
1、传入参数为 [ 函数 ] 时:$(function(){}) 文档加载完成后执行此方法。 等价于: window.onload = function() {}
2、传入参数为 [ HTML 字符串 ] 时: $("<span>12</span>"); 根据字符串创建元素的dom节点对象
3、传入参数为 [ 选择器字符串 ] 时:$(“#id”); 根据选择器查找出元素节点对象
4、传入参数为 [ DOM对象 ] 时: $(this); 将dom对象包装为jquery对象返回
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<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">
//核心函数的4个作用
//传入参数为[函数]时:在文档加载完成后执行这个函数
$(function(){
// alert("这个功能跟window.onload相近");
// alert(document.getElementById("div01"));
//传入参数为[HTML字符串]时:根据这个字符串创建元素节点对象
$("<span>span标签</span>").appendTo("body");
//传入参数为[选择器字符串]时:根据这个字符串查找元素节点对象
// alert( $("#div01") ) ;
// $("#div01") // 这得到的是一个JQuery对象
//传入参数为[DOM对象]时:将DOM对象包装为jQuery对象返回
var div01Obj = document.getElementById("div01");
// document.getElementById通过原生javascript代码获取到的是Dom对象
// alert(div01Obj);
// 当我们把dom对象传入到JQuery的$()核心函数中,它会把Dom对象转换成为Jquery对象
// JQuery对象变量在全名的时候,经常$符号打头
var $div01Obj = $(div01Obj);
alert($div01Obj);
});
</script>
</head>
<body>
<div id="div01">adsf</div>
</body>
</html>
4、JQuery对象和dom对象
1、什么是jquery对象,什么是dom对象?
dom对象1.通过getElementById()查询出来的标签对象是Dom对象
2.通过getElementsByName()查询出来的标签对象是Dom对象
3.通过getElementsByTagName()查询出来的标签对象是Dom对象
4.通过createElement() 方法创建的对象,是Dom对象
JQuery对象
5.通过JQuery提供的API创建的对象,是JQuery对象。 $(“<span>span标签</span>”)
6.通过JQuery包装的Dom对象,也是JQuery对象。 $( dom对象 ) 得到的也是jquery对象
7.通过JQuery提供的API查询到的对象,是JQuery对象。 $(“ #id属性值 ”) 查到的对象 jquery
2、dom对象转化为jquery对象(*重点)
var $Jquery对象 = $(dom对象);3、jquery对象转为dom对象(*重点)
var dom对象 = $Jquery[0];
5、jQuery选择器(*****重点)
5.1、基本选择器(****重点)
#ID ID选择器 : 它可以查找指定id属性值的标签对象.class 类型选择器 : 它可以查找所有跟class属性值相同标签对象
element 标签名选择器 : 它可以查找所有指定的标签名的标签对象
* 任意选择器 : 它可以查找所有的标签对象
selector1,selector2 组合选择器: 它可以查找选择器1和选择器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="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
$(document.ready(function){}); 等价于 $(function(){});
*/
$(document).ready(function(){
//1.选择 id 为 one 的元素
$("#btn1").click(function(){
// alert(1);
var $oneObj = $("#one");// .css("background-color","#bbffaa");
// css()方法,当我们传递一个参数的时候,它是获取对应的css样式的值
// css()方法当我们传递两个值,也就是
// 第一个值是css的样式名
// 第二个值是css的样式值
$oneObj.css("background-color","#bbffaa") ;
// alert($oneObj[0]);
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","#bbffaa");
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function(){
$("div").css("background-color","#bbffaa");
});
//4.选择所有的元素
$("#btn4").click(function(){
$("*").css("background-color","#bbffaa");
});
//5.选择所有的 span 元素和id为two的元素
$("#btn5").click(function(){
$("span,#two").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后代选择器 :先查找ancestor 选择符合的祖先元素,然后再在后代中查找匹配descendant的后代元素 (后代元素包含子元素,和孙子元素,甚至是曾孙子元素,也就是只要被祖先元素包含起来的元素都称之为后代元素)parent > child 子元素选择器 在给定的父元素中,查找符合child 选择器的子元素
prev + next 相邻元素选择器 匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 兄弟元素选择器 匹配 prev 元素之后的所有 siblings 元素
<!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="../script/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>
5.3、过滤选择器
1、基本过滤器:
:first 查找第一个:last 查找最后一个
:not(selector) 删除符合not(selector)选择器的元素
:even 只要索引为偶数的元素 索引从0开始
:odd 只要索引为奇数的元素 索引从0开始
:eq(index) 只要索引为指定位置的元素
:gt(index) 只要大于给定索引的元素
:lt(index) 只要小于给定索引的元素
:header 查找标题标签 h1 - h6
:animated 查找正在执行动画的元素
<!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="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*$(document).ready(function(){});
它的简写是
$(function(){
})
*/
$(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" 查找所有div
// div:gt(3) 查找索引大于3的div元素
$("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查找所有的div
// div:not(:animated) 是查找没有正在执行动画的div
// "div:not(:animated):last" 是查找没有正在执行动画的div里的最后一个
$("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>
内容过滤器:
:contains(text) 查找包含有指定的文本的元素:empty 查找没有包含子元素或者文本的元素
:parent 查找含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
<!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="../script/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>
可见性过滤器:
:hidden 只返回不可见的元素(不可见是指display:none 或者 input type=hidden的元素):visible 可以看见的元素
<!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="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
/**
:hidden
:visible
*/
$(document).ready(function(){
//1.选取所有可见的 div 元素
$("#btn1").click(function(){
$("div:visible").css("background", "#bbffaa");
});
//2.选择所有不可见的 div 元素
//不可见:display属性设置为none,或type设置为hidden
$("#btn2").click(function(){
// alert( $("div:hidden").size() );
// .show(); 显示
// .hide(); 隐藏
// 我们可以在show方法里添加一个毫秒的值,表示这个动画执行的时间。
$("div:hidden").show(1000).css("background", "#bbffaa");
});
//3.选择所有不可见的 input 元素
$("#btn3").click(function(){
// .size()是返回jquery对象有有几个dom对象
// attr()方法是设置和获取属性的方法
// 当传一个参数的时候,是获取指定属性名的值
// 当传递两个参数的时候,是设置这个属性的值
// alert($("input:hidden").size());
// 获取value属性值
// alert( $("input:hidden").attr("value") );
$("input:hidden").attr("value","abc");
});
});
</script>
</head>
<body>
<input type="button" value="选取所有可见的 div 元素" id="btn1">
<input type="button" value="选择所有不可见的 div 元素" id="btn2" />
<input type="button" value="选择所有不可见的 input 元素" id="btn3" />
<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>
属性过滤器:
[attribute] 返回含特定属性的元素[attribute=value] 返回含特定属性,并且属性值等于给定value值的元素
[attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
[attribute^=value] 返回 拥有指定属性 属性值以value开头的元素
[attribute$=value] 返回 拥有指定属性 属性值以value结尾的元素
[attribute*=value] 返回 指定属性包含给定value值的元素
[attrSel1][attrSel2][attrSelN] 返回同时 满足 所有选择器的元素
<!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="../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() {
$("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>
子元素过滤器:
:nth-child 返回给定索引值的孩子元素:first-child 返回选择器中每个元素的 第一个孩子元素
:last-child 返回选择器中每个元素的 最后一个孩子元素
:only-child 返回选择器中每个元素,只有一个孩子的元素。
<!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="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
//1.选取每个class为one的div元素,下的第2个子元素
// 解释:也就是这个div必须class为one,并且这个div下的第二个元素
// 好像 ul li:nth(2) 是ul元素下的第2个li元素一样
$("#btn1").click(function(){
$("div.one :nth-child(2)").css("background","#bbffaa");
});
//2.选取每个class为one的div父元素下的第一个子元素
$("#btn2").click(function(){
/*
:first 返回选择器集合中第一个元素
:first-child 返回选择器集合中所有元素的第一个孩子元素
*/
$("div.one :first-child").css("background","#bbffaa");
});
//3.选取每个class为one的div父元素下的最后一个子元素
$("#btn3").click(function(){
$("div.one :last-child").css("background","#bbffaa");
});
//4.如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素
$("#btn4").click(function(){
$("div.one :only-child").css("background","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
<input type="button" value="如果class为one的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" value="123456789" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
表单过滤器:
:input 获取表单input textarea select button标签对象:text 获取表单中 input type =text 元素对象
:password 获取表单中 input type = password 的元素对象
:radio 获取表单中 input type = radio 的元素对象
:checkbox 获取表单中 input type=checkbox 的元素对象
:submit 获取表单中 input type =submit 的元素对象
:image 获取表单中 input type=image的元素对象
:reset 获取表单中 input type=reset的元素对象
:button 获取表单中 input type=button 以及 button的标签对象
:file 获取表单中 input type=file 的元素对象
:hidden 获取不可见的元素,或者input type=hidden 的元素对象
表单对象属性过滤器:
:enabled 获取可用的元素对象:disabled 获取不可用的元素对象
:checked 获取单选,复选,select中选中的option元素对象
:selected 获取 select中选中的option元素对象
<!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="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
// .length返回匹配的元素个数
// alert( $(":text:enabled").length );
// val() 如果不传递参数值,它可以获取Jquery对象里的value属性值
// alert( $(":text:enabled:eq(1)").val() );
// val()如果传递参数值,它可以设置Jquery对象里的value属性值
$(":text:enabled").val("今天萌一天!");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
$(":text:disabled").val("不可用的input也萌了");
});
//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function(){
// :checked返回的不仅仅复选中和单选框选中的元素
// 并且包含select 里选中的option元素
alert($("input:checked").size());
});
//4.获取多选框,每个选中的value值
$("#btn4").click(function(){
// 获取所有 选中的复选框
var $inputCheckedObjs = $("input:checked");
// 遍历获取每一个选中的值
// 使用for 循环遍历
// for (var i = 0; i < $inputCheckedObjs.size(); i++) {
// var inputCheckedObj = $inputCheckedObjs[i];
// // alert(inputCheckedObj);
// // alert(inputCheckedObj.value);
// // dom对象不能调用 JQuery对象的方法
// // inputCheckedObj.val("abc");
// var $inputCheckedObj = $(inputCheckedObj);
// // Jquery对象 也没能调用dom对象的方法或者属性
// // $inputCheckedObj.value
// alert($inputCheckedObj.val());
// }
// 使用JQuery的.each方法进行遍历
$inputCheckedObjs.each(function(){
// 在each方法中,传入 的function函数,里面有一个this对象
// 这个this对象,就是当前正遍历到的dom对象
alert(this.value);
// alert( $(this) );
});
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
// alert( $(":selected").size() );
$(":selected").each( function(){
// 在each遍历的function中,有一个this对象
// 这个this对象就是当前正遍历到的dom对象
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>