jQuery学习笔记之概念（1）
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
插件
jQuery学习笔记之概念（1）的更多相关文章
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- Oracle RAC学习笔记:基本概念及入门
Oracle RAC学习笔记:基本概念及入门 2010年04月19日 10:39 来源:书童的博客 作者:书童 编辑:晓熊 [技术开发 技术文章] oracle 10g real applica ...
- Java IO学习笔记：概念与原理
Java IO学习笔记:概念与原理 一.概念 Java中对文件的操作是以流的方式进行的.流是Java内存中的一组有序数据序列.Java将数据从源(文件.内存.键盘.网络)读入到内存 中,形成了 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
随机推荐
- python中enumerate( )函数的使用
enumerate( )函数是遍历一个序列中的元素以及元素对应的下标 seq = ['one', 'two', 'three'] for i, element in enumerate(seq): p ...
- 19.理解slop
主要知识点: slop的含义(内在原理) slop的用法 一.slop的含义是什么? query string(搜索文本)中的几个term,要经过几次移动才能与一个document匹配 ...
- PAT 1057. Stack
Stack is one of the most fundamental data structures, which is based on the principle of Last In Fir ...
- ThinkPHP5 自定义异常
1.配置config.php 自定义异常路径: // 默认AJAX 数据返回格式,可选json xml ...'default_ajax_return' => 'json', 'exceptio ...
- hdu 4950
#include<stdio.h> int main(){ __int64 h,a,b,k,j=0; while(scanf("%I64d%I64d%I64d%I64d" ...
- Spring MVC Beginner's Guide--应该看第二次
第一遍,就差WEBFLOW知识点没过了.. 真的值得好好再看第二次呢.. 样例工程算是比较多的啦. 学到真的不少..
- VBox虚拟机与主机(宿主)通讯原理以及socat(套接字猫)简单介绍
前言 尝试虚拟机使用socat建立服务器端接口转发时,发现对虚拟机接入网络原理不是非常了解,于是乎上网查找资料想搞明白是怎么回事,于是乎有了这篇总结博文.socat可以在服务器端口间建立全双工通信通道 ...
- Openfire：重新配置openfire
有些时候当我们在对openfire开发时,需要重置openfire的配置,这时最简单的方法就是重新运行openfire的安装程序.要重新运行安装程序,方法很简单: 打开openfire的安装目录,找到 ...
- 关于创建Android Library所须要知道的一切
关于创建Android Library所须要知道的一切 Android 库(Library)在结构上与 Android 应用模块同样.应用模块所能够包括的东西.在库中都同意存在,包括代码文件.资源文件 ...
- Oracle数据库导出导入
需求为将数据库A中的数据导出为*.dmp文件.然后将*.dmp文件导入到数据库B. 1.导出数据库A 在cmd窗体输入下面命令: 导出所有数据库 exp username/password@数 ...