jQuery学习笔记之概念（1）
——————————————————————学习目录————————————————————
1.概念
2.特点
3.选择器
4.DOM操作
5.事件
6.jQuery的Ajax
————————————————————————————————————————————————
前言:当前流行的JavaScript库有：
jQuery、MooTools、Prototype、Dojo、YUI、EXT_JS、DWR
1.概念：
核心库、UI和插件等。
jQuery是继承prototype之后又一个优秀的JavaScript库。现在jQuery主要包括核心库、UI和插件等。。
jQuery凭借着简介的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM。处理事件执行动画和开发ajax的操作。
2.特点：
优点：
1.轻量级(写更少的代码，做更多的事)
2.强大的选择器（操作DOM，得到DOM）
3.出色的DOM操作封装
4.可靠的事件处理机制（js里面的函数都是基于事件驱动）
5.完善的Ajax（浏览器给我提供了一个对象叫做XMLHttpRequest，我们可以使用这个对象来发送http请求，完成异步交互）
6.不污染顶级变量，在jQuery里面只有一个对象 jQuery == $
7.出色的浏览器兼容性
8.链式操作方法 jQuery.size.css()
9.隐式迭代，屏蔽了for，我可以迭代一个数组，集合
10.行为层与结构层的分离
11.丰富的插件支持后期扩展方便
12.完善的文档
什么是jQuery对象，什么是DOM对象？
DOM对象，通过DOM包装后的HTML元素
jQuery对象，通过jQuery对象包装DOM对象之后产生的对象
jQuery对象不能调用DOM对象里面的属性和方法；
DOM对象不能调用jQuery对象里面的属性和方法。
jQueryOrDOM.java
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>jquery vs dom 对象</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
// window.onload=function(){
//
//
// }
// jQuery == $
//页面已加载的时候执行..
// $(function(){
//
//
// })
$(function(){
$("#jquerybutton").click(function(){
//什么是jquery 对象，什么是dom 对象
// dom 对象
// var username=document.getElementById("username");
// alert(username.value);
//jquery 对象..
// var $username=$("#username");
//// alert($username.val());
//
//
// //这两种对象之间是可以相互转换的,jquery 对象可以转换成dom 对象，dom 对象可以转换成jquery 对象,,
// //将jquery 对象转换成dom 对象的两种方式...
// //第一种转换方式..
//// var username=$username.get(0);
//// alert(username.value);
//
//
// //第二种转换方式.
// var username=$username[0];
// alert(username.value);
//结论：jquery 对象就是一个数组对象...
// -----------------------怎么将dom 对象转换成jquery 对象.. ----------------------------------
var username=document.getElementById("username");
//不能调用..
// alert(username.val());
var $username=$(username);
alert($username.val());
})
})
</script>
</head>
<body>
用户名:<input type="text" id="username">
<input type="button" id="jquerybutton" value="jquery 操作..">
</body>
</html>3.案例
核心库
3.1 选择器（去获取DOM，要操作，必须先得到DOM）
jQuery提供了9大选择器
1.基础选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-基本选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
//== window.onload = function(){}
$(document).ready(function(){
//<input type="button" value="选择 id为 one 的元素." id="btn1"/>
$("#btn1").click(function(){
/**
* css
* 1：样式的名称
*
* 2：样式的值
*/
$("#one").css("background","red");
});
//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
$("#btn2").click(function(){
$(".mini").css("background","blue");
});
//<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
$("#btn3").click(function(){
$("div").css("background","yellow");
});
//<input type="button" value="选择 所有的元素." id="btn4"/>
$("#btn4").click(function(){
$("*").css("background","green");
});
//<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
$("#btn5").click(function(){
//组合选择器..
$("span,#two").css("background","green");
});
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<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="mover">正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>2.层级选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02-层次选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="选择 body内的所有div元素." id="btn1"/>
$("#btn1").click(function(){
$("body div").css("background","red");
});
// > <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
$("#btn2").click(function(){
$("body>div").css("background","red");
});
//+<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
$("#btn3").click(function(){
$("#one+div").css("background","red");
});
//~<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
$("#btn4").click(function(){
$("#two~div").css("background","red");
});
//<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>//$("#two").siblings("div")
$("#btn5").click(function(){
$("#two").siblings("div").css("background","red");
});
});
</script>
</head>
<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<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"/>
<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="mover">正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>3.过滤选择器
过滤选择器主要是通过特定的过滤规则筛选出所需的DOM元素，该元素都以":"开头
按照不同的过滤规则，过滤选择器可以分为：
基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。
3.1 基本过滤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03-基本过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//<input type="button"div:first value="选择第一个div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:first").css("background","red");
});
//<input type="button" value="选择最后一个div元素." id="btn2"/>
$("#btn2").click(function(){
$("div:last").css("background","red");
});
//<input type="button" value="选择class不为one的 所有div元素.div:not(.one)" id="btn3"/>
$("#btn3").click(function(){
$("div:not(.one)").css("background","red");
});
//<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
$("#btn4").click(function(){
//从零开始算...
$("div:even").css("background","blue");
});
//<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div:odd").css("background","blue");
});
//<input type="button" value="选择索引值等于3的div元素." id="btn6"/>
$("#btn6").click(function(){
$("div:eq(3)").css("background","blue");
});
//<input type="button" value="选择索引值大于3的元素." id="btn7"/>
$("#btn7").click(function(){
$("div:gt(3)").css("background","blue");
});
//<input type="button" value="选择索引值小于3的元素." id="btn8"/>
$("#btn8").click(function(){
$("div:lt(3)").css("background","blue");
});
//<input type="button" value="选择所有的标题元素." id="btn9"/>
$("#btn9").click(function(){
$(":header").css("background","red");
});
//<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
function move(){
// slideDwon(); 向下滑动
// slideUp(); 向上收起
//如果界面的元素是隐藏的，调用这个slideToggle方法，它会自动显示元素，
//如果是显示的，调用这个slideToggle方法，它会自动隐藏元素，
$("#mover").slideToggle("slow",move);
//滑动切换：当元素隐藏时，向下滑动，但元素显示时，先上收起..
}
move();
//获取正在执行动画的元素...
$("#btn10").click(function(){
$(":animated").css("background","red");
});
//animated
});
</script>
</head>
<body>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<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的元素." id="btn6"/>
<input type="button" value="选择索引值大于3的元素." id="btn7"/>
<input type="button" value="选择索引值小于3的元素." id="btn8"/>
<input type="button" value="选择所有的标题元素." id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
<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="mover" >正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>3.2 内容过滤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>04-内容过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
//选取所有的div 元素文本里面包含div 内容的
$("#btn1").click(function(){
$("div:contains('div')").css("background","red");
});
//<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> empty
//选择所有的div 元素里面没有子元素（文本）
$("#btn2").click(function(){
$("div:empty").css("background","red");
});
//<input type="button" value="选取所有的div 元素 含有class为mini ." id="btn3"/>
//选择div 元素..
//选择div 元素里面包含class=mini
$("#btn3").click(function(){
$("div:has('.mini')").css("background","red");
});
//<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:parent").css("background","red");
});
});
</script>
</head>
<body>
<h3>内容过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<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>
<span id="mover">正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>3.3 可见性过滤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>05-可见性过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value=" 选取所有可见的div元素" id="b1"/>
$("#b1").click(function(){
$("div:visible").css("background","red");
});
//<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
$("#b2").click(function(){
$("div:hidden").css("background","red").show(1000);
});
//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
$("#b3").click(function(){
//alert($("input:hidden").size());
//alert($("input:hidden").length);
/**
* 1:index 遍历的数组元素的角标
*
* 2:遍历出来的dom 元素，因为jquery 对象是一个数组对象，这个数组里面放的就是dom 。
*
*/
$("input:hidden").each(function(index,dom){
//alert(index);
// alert(dom.value);
// dom.val();
alert($(dom).val());
})
});
});
</script>
</head>
<body>
<h3>可见性过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<br/><br/>
<input type="button" value=" 选取所有可见的div元素" id="b1"/>
<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
<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" title="tesst">class为mini,title为tesst</div>
</div>
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<span id="mover">正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>3.4 属性过滤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>06-属性选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
//选择所有的div 元素里面包含title
$("#btn1").click(function(){
$("div[title]").css("background","red");
});
//<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
$("#btn2").click(function(){
$("div[title=test]").css("background","red");
});
//<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
$("#btn3").click(function(){
$("div[title!=test]").css("background","red");
});
//<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div[title^=te]").css("background","red");
});
//<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div[title$=est]").css("background","red");
});
//<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
$("#btn6").click(function(){
$("div[title*=es]").css("background","red");
});
//<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
$("#btn7").click(function(){
$("div[id][title*=es]").css("background","red");
});
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<h3> 属性选择器.</h3>
<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”的元素." 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="mover">正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>3.5 子元素过滤
3.6 表单对象属性过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>08-表单对象属性过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//<button id="btn1">对表单内 可用input 赋值操作.</button>
$("#btn1").click(function(){
$("input:enabled").val("wzt");
});
//<button id="btn2">对表单内 不可用input 赋值操作.</button>
$("#btn2").click(function(){
$("input:disabled").val("ydh");
});
//<button id="btn3">获取多选框选中的个数.</button>
$("#btn3").click(function(){
alert($("input:checked").length);
});
//<button id="btn4">获取下拉框选中的内容.</button>
$("#btn4").click(function(){
//select option
// alert( $("select>option:selected").length);
$("select>option:selected").each(function(index,doc){
// alert(doc.value);
//使用jQuery就可以兼容...
alert($(doc).text());
})
});
});
</script>
</head>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<form id="form1" action="#">
<button type="reset">重置所有表单元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<br /><br />
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button>
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取下拉框选中的内容.</button>
<br /><br />
可用元素：<input name="add" value="可用文本框" /> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框" /><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
<div></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
下拉列表1：<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected" value="湖南">hunan</option>
<option>北京</option>
<option selected="selected" value="天津">tianj</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2：<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected" value="北京">beijing</option>
<option>天津</option>
<option >广州</option>
<option>湖北</option>
</select>
<br/><br/>
<div></div>
</form>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>下一篇
4.DOM操作
5.事件
6.jQuery的Ajax
插件