JQuery第一天——入门概述与选择器
一、什么是JQuery
一个流行的js库
核心理念：write less , do more
优势：
轻量级
强大的选择器
出色的 DOM 操作的封装
可靠的事件处理机制
完善的 Ajax
出色的浏览器兼容性
链式操作方式
JQuery对象是JQuery包装DOM对象所产生的对象
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
jQuery转DOM：通过下标（既然是类数组），相反的DOM转jQuery:
var $div = $(div) (div这个DOM对象是通过var div = document.getElementById("div"));
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.例如：$div
二、JQery的HelloWorld(感性认知)
new 一个 static web project
在 webContent 下引入 js 的库（直接复制到目录下即可）
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
导入库可以引入百度静态资源公共库
完整的HelloWorld代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入jQuery库 -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
//$(function(){}) 相当于window.onload
$(function(){
//选取button
//为button添加 onclick函数
//弹出HelloWorld
$("button").click(function(){
alert("HelloWorld");
});
})
</script>
</head>
<body>
<button>点击这里</button>
</body>
</html>
三、JQuery的选择器
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
选择器的优点：
写法简洁
完善的事件处理机制
选择器基本介绍：
1.基本选择器
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器,
它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用)
例如：选中id为btn1的button,为其添加click响应事件
完整的选择器与事件等见文档：http://tool.oschina.net/apidocs/apidoc?api=jquery
以下不再列出列表赘述。
$(function(){
$("#btn1").click(function(){
alert("HelloWorld");
});
})
以下通过一组小例子演示基本选择器
<!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> <!-- 导入JQuery的库 -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//alert("HelloWorld");
$("#one").css("background","#FF0000");
});
});
$(function(){
$("#btn2").click(function(){
//alert("HelloWorld");
$(".mini").css("background","#FFCC00");
});
});
$(function(){
$("#btn3").click(function(){
//alert("HelloWorld");
$("div").css("background","#FFFF00");
});
});
$(function(){
$("#btn4").click(function(){
//alert("HelloWorld");
$("*").css("background","#99FF99");
});
});
$(function(){
$("#btn5").click(function(){
//alert("HelloWorld");
$("span,#two").css("background","#3399FF");
});
});
</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><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>
2.层次选择器
如果想通过 DOM 元素之间的层次关系来获取特定元素,
例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
基本层次选择器分类：
后代元素（ancestor descendant）
子元素选择器（parent > child）
相邻元素选择器（prev + next）
兄弟选择器（prev ~ siblings）
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素;
而 jQuery 中的方法 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="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("body div").css("background","#99FF99");
});
});
$(function(){
$("#btn2").click(function(){
$("body > div").css("background","#99FF99");
});
});
$(function(){
$("#btn3").click(function(){
$("#one + div").css("background","#99FF99");
});
});
$(function(){
$("#btn4").click(function(){
$("#two ~ div").css("background","#99FF99");
});
});
$(function(){
$("#btn5").click(function(){
$("#two").siblings("div").css("background","#99FF99");
});
});
$(function(){
$("#btn6").click(function(){
$("#two").nextAll("span").css("background","#99FF99");
});
});
$(function(){
$("#btn7").click(function(){
$("#two").prevAll("div").css("background","#99FF99");
});
}); </script>
</head>
<body>
<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" />
<input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />
<input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
<input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" /> <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>
<span id="span">--span元素--</span>
</body>
</html>
3.过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为：
基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.
基本过滤：
<!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/style.css">
<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="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
$("#btn1").click(function(){
$("div:first").css("background","#99FF99");
});
$("#btn2").click(function(){
$("div:last").css("background","#99FF99");
});
$("#btn3").click(function(){
$("div:not(.one)").css("background","#99FF99");
});
$("#btn4").click(function(){
$("div:even").css("background","#99FF99");
});
$("#btn5").click(function(){
$("div:odd").css("background","#99FF99");
});
$("#btn6").click(function(){
$("div:gt(3)").css("background","#99FF99");
});
$("#btn7").click(function(){
$("div:eq(3)").css("background","#99FF99");
});
$("#btn8").click(function(){
$("div:lt(3)").css("background","#99FF99");
});
$("#btn9").click(function(){
$(":header").css("background","#99FF99");
});
$("#btn10").click(function(){
$(":animated").css("background","#99FF99");
});
$("#btn11").click(function(){
$("#two").nextAll("span:first").css("background","#99FF99");
}); }); </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="选择 id 为 two 的下一个 span 元素" 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>
<span id="span">^^span元素 111^^</span>
<span id="span">^^span元素 222^^</span>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
内容过滤
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
<!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/style.css">
<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="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("div:contains('di')").css("background","#99FF99");
});
$("#btn2").click(function(){
$("div:empty").css("background","#99FF99");
});
$("#btn3").click(function(){
$("div:has(.mini)").css("background","#99FF99");
});
$("#btn4").click(function(){
$("div:parent").css("background","#99FF99");
}); }); </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>
可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素
<!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/style.css">
<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="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("div:visible").css("background","#99FF99");
});
$("#btn2").click(function(){
//show()方法的返回值是它本身，可以继续调用该对象的其他方法
$("div:hidden").show("1500").css("background","#99FF99");
});
$("#btn3").click(function(){
alert($("input:hidden").attr("value"));
});
}); </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><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="123456789000" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
<!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/style.css">
<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="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div[title]").css("background","#99FF99");
});
$("#btn2").click(function(){
$("div[title='test']").css("background","#99FF99");
});
$("#btn3").click(function(){
$("div[title!='test']").css("background","#99FF99");
});
$("#btn4").click(function(){
$("div[title^='te']").css("background","#99FF99");
});
$("#btn5").click(function(){
$("div[title$='est']").css("background","#99FF99");
});
$("#btn6").click(function(){
$("div[title*='es']").css("background","#99FF99");
});
$("#btn7").click(function(){
$("div[id][title*='es']").css("background","#99FF99");
});
$("#btn8").click(function(){
$("div[title][title!='test']").css("background","#99FF99");
});
})
</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>
子元素过滤选择器
<!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/style.css">
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: # 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="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//选择子元素需要在选择器前加空格
$("div.one :nth-child(2)").css("background","#99FF99");
});
$("#btn2").click(function(){
$("div.one :first-child").css("background","#99FF99");
});
$("#btn3").click(function(){
$("div.one :last-child").css("background","#99FF99");
});
$("#btn4").click(function(){
$("div.one :only-child").css("background","#99FF99");
});
});
</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="" size="">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
表单对象属性过滤选择器
<!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="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//注意与input:enabled的区别
$(":text:enabled").val("尚硅谷");
});
$("#btn2").click(function(){
$(":text:disabled").val("尚硅谷");
});
$("#btn3").click(function(){
var num = $(":checkbox[name='newsletter']:checked").length;
alert(num);
});
$("#btn5").click(function(){
//实际被选中的不是select 而是其子节点option 故需要加空格表示子元素
//JQuery对象遍历的方法是each()，正在遍历的是DOM对象
//而不是JQuery对象
$("select :selected").each(function(){
alert(this.value);
});
});
$("#btn4").click(function(){
$(":checkbox[name='newsletter']:checked").each(function(){
alert(this.value);
});
});
})
</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="true" value="不可用文本框"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="true" 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">
<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> <textarea rows="" cols=""></textarea>
</form>
</body>
</html>
上面迭循环遍历当然也可以包装成JQuery对象再使用JQuery的方法
alert($(this).val());
表单选择器
这里不再逐一举例赘述，给出可用的选择器列表（其中像：input这类的选择范围太大，基本不用）
当然，遇到一些选择器不方便完成的场景时，可以尝试JQuery的方法，
例如：attr()方法，val（）方法 each()方法等等
【更新】：更多选取元素的方法，请参阅API的选择器与筛选部分：http://tool.oschina.net/apidocs/apidoc?api=jquery
【更新】：jquery常见赋值取值操作：http://blog.csdn.net/cheung1021/article/details/6429260
JQuery第一天——入门概述与选择器的更多相关文章
- jquery总结01-基本概念和选择器
dom元素和jquery元素的区别 dom元素支持dom元素自带的属性和方法,jquery元素支持jquery元素自带的属性和方法 dom var div = doc ...
- 从零开始学 Web 之 CSS3（一）CSS3概述，选择器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 锋利Jquery 第一天
之前一直学习,现在终于有时间来整理一下文档了. 以下文章都是自己学习Jquery 的笔记, 希望能留下痕迹,也希望能帮助到您. 好了开始我的Jquery第一天. 我也是从Hello wrod!开始的 ...
- 第一章 数据库概述、MySQL的安装和配置
第一章 数据库概述.MySQL的安装和配置 1.为什么要使用数据库 最早是纸质文件来存储数据 缺点:不易保存,占用空间大 计算机出现以后,采用软件来进行保存(excel) 缺点:容易损坏 文件 ...
- 深入理解javascript函数系列第一篇——函数概述
× 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...
- NoSQL入门概述
入门概述 1 NoSQL是什么? NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL",泛指非关系型的数据库.随着互联网web2.0网站的兴起,传统的关 ...
- jquery插件开发基础入门
jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...
- Laxcus大数据管理系统2.0（2）- 第一章 基础概述 1.1 基于现状的一些思考
第一章 基础概述 1.1 基于现状的一些思考 在过去十几年里,随着互联网产业的普及和高速发展,各种格式的互联网数据也呈现爆炸性增长之势.与此同时,在数据应用的另一个重要领域:商业和科学计算,在各种新兴 ...
- 基于jQuery带备忘录功能的日期选择器
今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...
随机推荐
- OpenLDAP权限配置
安装好了openldap之后,就是对它进行配置了,其中一项就是设置访问控制,限制普通用户只能修改/访问他们能修改/访问的项.这就是ACL需要做的事情. 设置方法 1.可以将 include行放在/et ...
- ASP.NET中使用UpdatePanel时用Response输出出现错误的解决方法
asp.net中执行到Response.write("xx");之类语句或Microsoft JScript 运行时错误: Sys.WebForms.PageRequestMana ...
- 优化 ExpressRoute 路由
当你有多个 ExpressRoute 线路时,可以通过多个路径连接到 Azure.结果就是,你所采用的路由可能不是最理想的 - 也就是说,你的流量可能会经历较长的路径才能到达 Azure,而 Azur ...
- npm 删除node_modules
安装 npm install rimraf - g 使用 rimraf node_modules
- Entity Framework 6.X实现记录执行的SQL功能
Entity Framework在使用时,很多时间操纵的是Model,并没有写sql语句,有时候为了调试或优化等,又需要追踪Entity framework自动生成的sql(最好还能记录起来,方便出错 ...
- CSS一个属性，让图片后的文字垂直居中，效果看得见
困扰我多年的疑难,终于解决了.哈哈哈,太爽了 背景 页面经常遇到,图片后面的文字显示在图片的中间部位,也就是说文字图片垂直居中. <div class="banner"> ...
- 最大公约数(GCD)与最小公倍数(LCM)的计算
给出两个数a.b,求最大公约数(GCD)与最小公倍数(LCM) 一.最大公约数(GCD) 最大公约数的递归: * 1.若a可以整除b,则最大公约数是b * 2.如果1不成立,最大公约数便是b ...
- U盘安装win7系统
windows 7安装 准备 1.iso系统镜像文件(我一般选用纯净版) 2.Windows7-USB-DVD-Download-Tool-Installer-en-US(启动盘制作) 3.准备4G以 ...
- php算法基础----时间复杂度和空间复杂度
算法复杂度分为时间复杂度和空间复杂度. 其作用: 时间复杂度是指执行算法所需要的计算工作量: 而空间复杂度是指执行这个算法所需要的内存空间. (算法的复杂性体现在运行该算法时的计算机所需资源的多少上, ...
- 心情烦闷annoying，贴几个图！唉！annoying
nothing could be more annoying!!!!! lost!failed!