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 ...
随机推荐
- Django Redis验证码 密码 session 实例
1.settings CACHES = { "default": { "BACKEND": "django_redis.cache.RedisCach ...
- 转 Js窗体window大小设置
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetW ...
- git下配置github sshkey
教程看这里 http://xiaxveliang.blog.163.com/blog/static/29708034201341244759225/
- Python DDT(data driven tests)模块心得
关于ddt模块的一些心得,主要是看官网的例子,加上一点自己的理解,官网地址:http://ddt.readthedocs.io/en/latest/example.html ddt(data driv ...
- Oracle EBS 请求
SELECT t.responsibility_id, t.responsibility_key, t.responsibility_name, t.description, t.menu_id, f ...
- [SQL Server]利用索引改善sql语句
很多人不知道SQL语句在SQL SERVER中是如何执行的,他们担心自己所写的SQL语句会被SQL SERVER误解.比如: 1.select * from table1 where name=''z ...
- WinForm 应用程序禁止多个进程运行
方法一: 禁止多个进程运行 using System; using System.Collections.Generic; using System.Linq; using System.Window ...
- spring mvc 解决跨域问题
Spring MVC 从4.2版本开始增加了对CORS的支持. 在Controller上使用@CrossOrigin注解: // 指定域名 @CrossOrigin("http://doma ...
- Azure Document DB Repository 的实现
阅读 需要大约 5 分钟. 前景: Azure Cosmos DB 由 Microsoft 提供,是全球分布式多模型数据库. 通过 Azure Cosmos DB 跨任意数量的 Azure 地理区域 ...
- POST请求上传多张图片并携带参数
POST请求上传多张图片并携带参数 在iOS中,用POST请求携带参数上传图片是非常恶心的事情,HTTPBody部分完全需要我们自己来配置,这个HTTPBody分为3个部分,头部分可以携带参数,中间部 ...