讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
在本节教程中，我们按照类别讲解jQuery选择器；在讲解选择器的同时介绍jQuery中一些常用的方法。
基本选择器
标签选择器
$("html标签名");
获得匹配标签名称的元素
id选择器
$("#id的属性值");
获得与指定id属性值匹配的元素
类选择器
$(".class的属性值");
获得与指定的class属性值匹配的元素
并集选择器
$("选择器1,选择器2,...");
获取多个选择器选中的所有元素
示 例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery选择器1</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div,span {
width: 200px;
height: 200px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .inner {
width: 130px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<script type="text/javascript">
$(function() {
$("#firstButton").click(function () {
$("#one").css("backgroundColor","red");
});
$("#secondButton").click(function () {
$("div").css("backgroundColor","red");
});
$("#thirdButton").click(function () {
$(".inner").css("backgroundColor","red");
});
$("#fourthButton").click(function () {
$("span,#two").css("backgroundColor","red");
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input type="button" value="设置id为one的元素的背景色为红色" id="firstButton" />
<input type="button" value="设置元素名为div的所有元素的背景色为红色" id="secondButton" />
<input type="button" value="设置class为inner的所有元素的背景色为红色" id="thirdButton" />
<input type="button" value="设置所有的span元素和id为two的元素的背景色为红色" id="fourthButton" />
<br /><br />
<div id="one">
id为one的div
</div>
<div id="two">
id为two的div
<div class="inner">class为inner的div</div>
</div>
<div class="one">
class为one的div
<div class="inner">class为inner的div</div>
<div class="inner">class为inner的div</div>
</div>
<div class="one">
class为one的div
<div class="inner">class为inner的div</div>
</div>
<span class="spanone">class为spanone的span</span>
<span class="inner">class为inner的span</span>
<input type="button" value="class为innner的按钮" class="inner" />
</body>
</html>
常用方法
在了解了jQuery中最简单的几种选择器之后我们来学习jQuery的常用方法
html( )
调用该方法时不传参表示：获取元素中的html内容(含标签)
调用该方法时传参数表示：设置元素的html内容
text( )
调用该方法时不传参表示：获取元素中的文本内容(不含标签)
调用该方法时传参数表示：设置元素的文本内容
val( )
调用该方法时不传参表示：获取元素的值
调用该方法时传参数表示：设置元素的值
该方法常用于操作元素的value属性。
size( )
该方法用于获取元素的个数
index( )
它可以判断元素的索引，索引从0开始计数。该方法常用于判断某个元素在集合中的索引。
each( )
该方法用于遍历元素。在函数中可以通过this来获取当前的DOM对象。请注意：此处的this是JavaScript对象而不是jQuery对象。
综合示例
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery常用方法</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
// 获取元素中的html内容
var nameHtml=$("#name").html();
console.log("nameHtml="+nameHtml);
// 设置元素中的html内容
$("#name").html("周星星");
// 获取元素中的text内容
var cityHtml=$("#city").html();
console.log("cityHtml="+cityHtml);
// 设置元素中的text内容
$("#city").html("香港");
// 获取元素的值
var numberVal=$(".number").val();
console.log("numberVal="+numberVal);
// 设置元素的值
$(".number").val("666");
// 获取元素的个数
var buttonSize=$("button").size();
console.log("buttonSize="+buttonSize);
// 判断元素的索引
var allButton = $("button");
var index = allButton.index($(".b3"))
console.log("index="+index);
// 遍历元素
$("button").each(function(i){
console.log("i="+i);
var text = $(this).text();
console.log("text="+text);
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<p id="name"><b>zxx</b></p>
<p id="city">HK</p>
input输入框：<input class="number" value="9527" />
<br /><br />
<button class="b1">button1</button>
<br /><br />
<button class="b2">button2</button>
<br /><br />
<button class="b3">button3</button>
</body>
</html>
结果如下：
层级选择器
层级选择器是根据元素的关系(例如：父子关系，兄弟关系)来获取其它元素。
$("A B");
选择A元素内部的所有B元素
$("A > B")
选择A元素内部的所有直接子元素B
$("A + B")
选择A元素之后的第一个兄弟元素B
$("A ~ B")
选择A元素之后的所有兄弟元素B
示 例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery选择器2</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div,span {
width: 200px;
height: 200px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .inner {
width: 130px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<script type="text/javascript">
$(function() {
$("#firstButton").click(function () {
$("body div").css("backgroundColor","red");
});
$("#secondButton").click(function () {
$("body>div").css("backgroundColor","red");
});
$("#thirdButton").click(function () {
$("#one + div").css("backgroundColor","green");
});
$("#fourthButton").click(function () {
$("#one ~ div").css("backgroundColor","green");
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input type="button" value="设置body内所有div的背景色为红色" id="firstButton" />
<input type="button" value="设置body内直接子div的背景色为红色" id="secondButton" />
<input type="button" value="设置id=one的元素其后的第一个兄弟元素背景色为绿色" id="thirdButton" />
<input type="button" value="设置id=one的元素其后的所有兄弟元素背景色为绿色" id="fourthButton" />
<br /><br />
<div id="one">
id为one的div
</div>
<div id="two">
id为two的div
<div class="inner">class为inner的div</div>
</div>
<div class="one">
class为one的div
<div class="inner">class为inner的div</div>
<div class="inner">class为inner的div</div>
</div>
<div class="one">
class为one的div
<div class="inner">class为inner的div</div>
</div>
</body>
</html>
内容选择器
内容选择器也可称为内容过滤选择器；它根据元素内部文本的内容进行选择。
:contains(text)
匹配包含给定文本的元素。或者说，用于筛选包含特定内容的元素
:empty
匹配所有不包含子元素或者文本的空元素。
:has(selector)
匹配含有选择器所匹配的元素的元素。或者说，用于筛选包含特定选择器的元素
:parent
匹配含有子元素或者文本的元素。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery基础</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.divColor {
color: green;
}
</style>
<script type="text/javascript">
$(function() {
//示例1.设置含有文本内容Java的div字体颜色为红色
$("div:contains('Java')").css("color", "red");
//示例2.设置没有子元素的div的文本内容为"This is a empty div"
$("div:empty").html("This is a empty div");
//示例3.设置包含<a>元素的div字体颜色为绿色
$("div:has(a)").addClass("divColor");
//示例4.设置所有含有span的元素的字体为蓝色
$("span:parent").css("color", "blue");
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div>Hello Java</div>
<div></div>
<div>
欢迎您学习<a>Python</a>
</div>
<div>
<span>Thank you very much</span>
</div>
</body>
</html>
方法小结：可使用addClass( )为元素添加样式
子元素选择器
:nth-child
根据子元素顺序(顺序从1开始)获取父元素中的子元素。除此以外，也可以根据奇偶来或者倍数进行选择。
:first-child
选择父元素的第一个子元素
:last-child
选择父元素的最后一个子元素
:only-child
如果某个元素是父元素中唯一的子元素，那将会匹配该唯一子元素
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery基础</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//示例1、设置列表中第2个li字号为40
$("ul li:nth-child(2)").css("font-size",40);
//示例2、设置列表中第一行字体为红色
$("ul li:first-child").css("color","red");
//示例3、设置列表中最后一行字体为蓝色
$("ul li:last-child").css("color","blue");
//示例4、获取ul下只有一个li的内容
var content=$("ul li:only-child").html();
console.log(content);
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<ul>
<li>Java</li>
<li>Python</li>
<li>Android</li>
<li>JavaScript</li>
</ul>
<ul>
<li>张曼玉</li>
<li>林青霞</li>
<li>李嘉欣</li>
<li>张美霞</li>
</ul>
<ul>
<li>HUAWEI</li>
</ul>
</body>
</html>
属性选择器
属性名选择器
$("A[属性名]");
从标签中选择包含指定属性的选择器
属性值选择器
$("A[属性名='值']");
从标签中选择指定属性等于特定值的选择器
复合属性选择器
$("A[属性名='值'][]...")
包含多个属性条件的选择器
示 例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery选择器3</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div,span {
width: 200px;
height: 200px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .inner {
width: 130px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<script type="text/javascript">
$(function() {
$("#firstButton").click(function () {
$("div[title]").css("backgroundColor","red");
});
$("#secondButton").click(function () {
$("div[title='title2']").css("backgroundColor","red");
});
$("#thirdButton").click(function () {
$("div[title!='title2']").css("backgroundColor","red");
});
$("#fourthButton").click(function () {
$("div[title^='tit']").css("backgroundColor","red");
});
$("#fifthButton").click(function () {
$("div[title$='le3']").css("backgroundColor","red");
});
$("#sixthButton").click(function () {
$("div[title*='tle']").css("backgroundColor","red");
});
$("#seventhButton").click(function () {
$("div[id][title*='tle']").css("backgroundColor","red");
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input type="button" value="设置含有title属性的div元素背景色为红色" id="firstButton" />
<br />
<input type="button" value="设置title属性值等于title2的div元素背景色为红色" id="secondButton" />
<br />
<input type="button" value="设置title属性值不等于title2的div元素背景色为红色(无属性title属性的元素的也将被选中)" id="thirdButton" />
<br />
<input type="button" value="设置title属性值以tit开头的div元素背景色为红色" id="fourthButton" />
<br />
<input type="button" value="设置title属性值以le3结尾的div元素背景色为红色" id="fifthButton" />
<br />
<input type="button" value="设置title属性值含有tle的div元素背景色为红色" id="sixthButton" />
<br />
<input type="button" value="选取有属性id的div元素，再在结果中设置title属性值含有tle的div元素背景色为红色" id="seventhButton" />
<br /><br />
<div id="one" title="title1">
id为one的div
</div>
<div id="two" title="title2">
id为two的div
<div class="inner">class为inner的div</div>
</div>
<div class="one" title="title3">
class为one的div
<div class="inner" title="title4">class为inner的div</div>
<div class="inner" title="title5">class为inner的div</div>
</div>
<div class="one">
class为one的div
<div class="inner">class为inner的div</div>
</div>
</body>
</html>
过滤选择器
首元素选择器
:first
获得选择的元素中的第一个元素
尾元素选择器
:last
获得选择的元素中的最后一个元素
非元素选择器
:not(selector)
获取不包括指定内容的元素
偶数选择器
:even
获取索引值为偶数的元素，索引从 0 开始计数
奇数选择器
:odd
获取索引值为奇数的元素，索引从 0 开始计数
等于索引选择器
:eq(index)
获取指定索引的元素
大于索引选择器
:gt(index)
获取大于指定索引的元素
小于索引选择器
:lt(index)
获取小于指定索引的元素
标题选择器
:header
获得标题(h1~h6)元素
示 例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery选择器4</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div,span {
width: 200px;
height: 200px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .inner {
width: 130px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<script type="text/javascript">
$(function() {
$("#firstButton").click(function () {
$("div:first").css("backgroundColor","red");
});
$("#secondButton").click(function () {
$("div:last").css("backgroundColor","red");
});
$("#thirdButton").click(function () {
$("div:not(.one)").css("backgroundColor","red");
});
$("#fourthButton").click(function () {
$("div:even").css("backgroundColor","red");
});
$("#fifthButton").click(function () {
$("div:odd").css("backgroundColor","red");
});
$("#sixthButton").click(function () {
$("div:gt(2)").css("backgroundColor","red");
});
$("#seventhButton").click(function () {
$("div:eq(2)").css("backgroundColor","red");
});
$("#eighthButton").click(function () {
$("div:lt(2)").css("backgroundColor","red");
});
$("#ninthButton").click(function () {
$(":header").css("backgroundColor","yellow");
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input type="button" value="设置第一个div元素元素背景色为红色" id="firstButton" />
<br />
<input type="button" value="设置最后一个div元素元素背景色为红色" id="secondButton" />
<br />
<input type="button" value="设置class不为one的所有div元素的背景色为红色" id="thirdButton" />
<br />
<input type="button" value="设置索引值为偶数的div元素的背景色为红色" id="fourthButton" />
<br />
<input type="button" value="设置索引值为奇数的div元素的背景色为红色" id="fifthButton" />
<br />
<input type="button" value="设置索引值为大于2的div元素的背景色为红色" id="sixthButton" />
<br />
<input type="button" value="设置索引值为等于2的div元素的背景色为红色" id="seventhButton" />
<br />
<input type="button" value="设置索引值为小于2的div元素的背景色为红色" id="eighthButton" />
<br />
<input type="button" value="设置所有的标题元素(h1-h6)的背景色为黄色" id="ninthButton" />
<br /><br />
<div id="one" title="title1">
id为one的div
</div>
<div id="two" title="title2">
id为two的div
<div class="inner">class为inner的div</div>
</div>
<div class="one" title="title3">
class为one的div
<div class="inner" title="title4">class为inner的div</div>
<div class="inner" title="title5">class为inner的div</div>
</div>
<div class="one">
class为one的div
<div class="inner">class为inner的div</div>
</div>
</body>
</html>
表单过滤选择器
可用元素选择器
:enabled
获得可用元素
不可用元素选择器
:disabled
获得不可用元素
多选选中选择器
:checked
获得复选框中选中的元素
单选选中选择器
:radio
获得单选框中选中的元素
示 例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery选择器5</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div,span {
width: 200px;
height: 200px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .inner {
width: 130px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<script type="text/javascript">
$(function() {
$("#firstButton").click(function() {
$("input[type='text']:enabled").val("enabled value");
});
$("#secondButton").click(function() {
$("input[type='text']:disabled").val("disabled value");
});
$("#thirdButton").click(function() {
var number = $("input[type='checkbox']:checked").length;
alert(number);
});
$("#fourthButton").click(function() {
var value = $("input[type='radio']:checked").val();
alert(value);
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input type="button" value="利用jQuery对象的val()方法设置表单内可用input元素的值为enabled value" id="firstButton" />
<br />
<input type="button" value="利用jQuery对象的val()方法设置表单内不可用input元素的值为disabled value" id="secondButton" />
<br />
<input type="button" value="利用jQuery对象的length属性获取复选框中选中的个数" id="thirdButton" />
<br />
<input type="button" value="利用jQuery对象的val()方法获取单选框选中的值" id="fourthButton" />
<br /><br/>
<form action="" method="">
<input type="text" value="value1" disabled="disabled">
<input type="text" value="value2">
<input type="text" value="value3" disabled="disabled">
<input type="text" value="value4">
<br/><br/>
<input type="checkbox" name="items" value="Java">Java
<input type="checkbox" name="items" value="C++">C++
<input type="checkbox" name="items" value="Python">Python
<input type="checkbox" name="items" value="JavaScript">JavaScript
<br/><br/>
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</form>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
