jquery笔记

关注

原创最新推荐文章于 2026-05-14 07:46:06 发布 717 阅读 AI 写同款· GEO 优化 ›

jquer 笔记

为了简化javascript的开发,一些javaScript库诞生了javascript库封装了
还能多预定义的对象和使用函数,能帮助使用者建立高难度的web2.0
并且兼容各大浏览器
当前的javascript库有jQuery, MooTools, Prototype, Dojo, YUI, EXT_JS DWR

今天只谈jquery 改天谈EXT
第一个问题?
jquery 是什么?
1.jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多
javascript高手加入其team。
2. jQuery是既prototype只有有一个优秀的javascript框架其宗旨:--Write
Less,do more, 写更少的代码做更多的事情
3.他是一个轻量级js库压缩后只有21k 他兼容css3和各大浏览器
4.他一个快速,简洁的javascript库,使用者能更加方便的出来HTML
document events, 实现动画效果,并且方便使用ajax交互
5. jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
6.jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
先做一个例子:
<script type="text/javascript" src="jquery-1.5.js"></script>
<script language="javascript">
$(document).ready(function(){
alert("我叫杨天赐");
});
</script>
第二个问题什么事jquery对象?
1.jquery对象是通过jquery包装dom对象后产生的对象
2.jquery对象是jquery独有的,如果一个对象是jquery对象那么它就可以使用query离得方法比如:
$("#test").html();
这个代码等同于 document.getElementByid("test").innerHTML;
3.虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
4.约定:
如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variable = DOM 对象
第三个问题: 如果dom对象想使用jquery的方法怎么办?
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
例子
<input type="text" name="username" id="username" value="天赐哥"/>
var username=document.getElementById("username");
alert(username.value);
//转化后就可以获得jquery中得方法了
var $username=$(username);
alert($username.val());
第四个问题:jquery怎么转成dom
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象
<input type="text" name="username" id="username" value="天赐哥"/>
//获取jquery对象
var $username=$("#username");
alert($username.val());
//转成dom
var username=$username[0];
alert(username.value);
(2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
//通过get();
var username=$username.get(0);
alert(username.value);
第五个问题:jquery的选择器,对象事件是什么还有为什么要用
记得建哥说过jquery的选择器跟css选择器一样完全一样
${"#id"} == document.getElementByid("id");
${"tarName"} ==document.getElementByTagName("tagName");
例子:
//若网页中没有id=value的元素,浏览器会报错
document.getElementById("username").value;
//需要判断document.getElementById("username")是否存在
if(document.getElementById("username")){
var username=document.getElementById("username");
alert(username.value);
}else{
alert("没有该id元素");
}
//使用JQUERY处理即使不存在也不会报错
var $username=$("#username");
alert($username.val());
//注意:在javascript中函数的返回值为空,表示false
基本选择器:
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).
1、#id 用法: $(”#myDiv”); 返回值单个元素的组成的集合
说明: 这个就是直接选择html中的id=”myDiv”
2、Element 用法: $(”div”) 返回值集合元素
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a 等等.
3、class 用法: $(”.myClass”) 返回值集合元素
说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).
4、* 用法: $(”*”) 返回值集合元素
说明: 匹配所有元素,多用于结合上下文来搜索
5、selector1, selector2, selectorN 用法: $(”div,span,p.myClass”) 返回值集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素
p class=”myClass”
层叠选择器:
如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
1 、ancestor descendant
用法: $(”form input”) ; 返回值集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.
2、parent > child 用法: $(”form > input”) ; 返回值集合元素
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
3、prev + next
用法: $(”label + input”) ; 返回值集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素
4、prev ~ siblings
用法: $(”form ~ input”) ; 返回值集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.
基本过滤选择器
1、:first 用法: $(”tr:first”) ; 返回值单个元素的组成的集合
说明: 匹配找到的第一个元素
2、:last 用法: $(”tr:last”) 返回值集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应.
3、:not(selector) 用法: $(”input:not(:checked)”)返回值集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
4、:even 用法: $(”tr:even”) 返回值集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
5、: odd 用法: $(”tr:odd”) 返回值集合元素
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.
6、:eq(index) 用法: $(”tr:eq(0)”) 返回值集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
7、:gt(index) 用法: $(”tr:gt(0)”) 返回值集合元素
说明: 匹配所有大于给定索引值的元素.
8、:lt(index) 用法: $(”tr:lt(2)”) 返回值集合元素
说明: 匹配所有小于给定索引值的元素.
9、:header(固定写法) 用法: $(”:header”).css(”background”, “#EEE”) 返回值集合元素
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
10、:animated(固定写法) 返回值集合元素
说明: 匹配所有正在执行动画效果的元素
内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
1、:contains(text) 用法: $(”div:contains(’John’)”) 返回值集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.
2、:empty 用法: $(”td:empty”) 返回值集合元素
说明: 匹配所有不包含子元素或者文本的空元素
3、:has(selector)
用法: $(”div:has(p)”).addClass(”test”) 返回值集合元素
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.
4、:parent 用法: $(”td:parent”) 返回值集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.
可见度过滤选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1、:hidden 用法: $(”tr:hidden”) 返回值集合元素
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
2、:visible 用法: $(”tr:visible”) 返回值集合元素
说明: 匹配所有的可见元素.
属性过滤选择器:
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
1、[attribute] 用法: $(”div[id]“) ; 返回值集合元素
说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
2、[attribute=value] 用法: $(”input[name='newsletter']“).attr(”checked”, true); 返回值集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.
3、[attribute!=value] 用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值集合元素
说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
4、[attribute^=value] 用法: $(”input[name^=‘news’]“) 返回值集合元素
说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!
5、[attribute$=value] 用法: $(”input[name$=‘letter’]“) 返回值集合元素
说明: 匹配给定的属性是以某些值结尾的元素.
6、[attribute*=value] 用法: $(”input[name*=‘man’]“) 返回值集合元素
说明: 匹配给定的属性是以包含某些值的元素.
7、[attributeFilter1][attributeFilter2][attributeFilterN] 用法: $(”input[id][name$=‘man’]“) 返回值集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.
子元素过滤选择器
1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”) 返回值集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.
2、:first-child 用法: $(”ul li:first-child”) 返回值集合元素
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
3、:last-child 用法: $(”ul li:last-child”) 返回值集合元素
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
4、: only-child 用法: $(”ul li:only-child”) 返回值集合元素
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
nth-child() 选择器详解如下：
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
表达对象属性过滤选择器:
1、:enabled 用法: $(”input:enabled”) 返回值集合元素
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.
2、:disabled 用法: $(”input:disabled”) 返回值集合元素
说明: 匹配所有不可用元素.与上面的那个是相对应的.
3、:checked 用法: $(”input:checked”) 返回值集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.
4、:selected 用法: $(”select option:selected”) 返回值集合元素
说明: 匹配所有选中的option元素.
表单选择器:
1、:input 用法: $(”:input”) ; 返回值集合元素
说明:匹配所有 input, textarea, select 和 button 元素
2、:text 用法: $(”:text”) ; 返回值集合元素
说明: 匹配所有的单行文本框.
3、:password 用法: $(”:password”) ; 返回值集合元素
说明: 匹配所有密码框.
4、:radio 用法: $(”:radio”) ; 返回值集合元素
说明: 匹配所有单选按钮.
5、:checkbox 用法: $(”:checkbox”) ; 返回值集合元素
说明: 匹配所有复选框
6、:submit 用法: $(”:submit”) ; 返回值集合元素
说明: 匹配所有提交按钮.
7、:image 用法: $(”:image”) 返回值集合元素
说明: 匹配所有图像域.
8、:reset 用法: $(”:reset”) ; 返回值集合元素
说明: 匹配所有重置按钮.
9、:button 用法: $(”:button”) ; 返回值集合元素
说明: 匹配所有按钮.这个包括直接写的元素button.
10、:file 用法: $(”:file”) ; 返回值集合元素
说明: 匹配所有文件域.
11、:hidden 用法: $(”input:hidden”) ; 返回值集合元素
说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,
---------------------------------------------------------------------------------------
我的个乖乖可能看懵啦把这些选择器完全不必记忆知道这么回事就行用的时候查api即可
说白啦 jquery 其实没什么就是一个选择器而已能够快读的定位 html中各个标签并且能够过滤之类的..
说了这么多还是做几个案例把
第一个定位按钮
<html>
<head>
<script language="javascript" src="jquery-1.5.js"></script>
<script language="javascript" src="a.js"></script>
<style>
button{
border:1px solid red;
}
</style>
</head>
<body>
<button >OK</button>
<button >OK1</button>
<button >OK2</button>
<button >OK3</button>
<br>
<input type="button" alt="bbb" value="OK4"/>
</body>
<script language="javascript">
$(function(){// 就想到与window.onload 它们的脚步共享一个预
//在jquery 中$ 是最重要的
// $("button").click(function(){ //选择所有的button按钮 jquery的选择器是完全参考css的选择器的
// alert("dddd");
//});
});
function abc(obj){
var btn= event.srcElement;
alert(btn.tagName);
var txt=btn.innerHTML;
alert(txt);
}
</script>
</html>
第二个:定位层级节点爷爷- 爸爸--儿子
<html>
<head>
<script language="javascript" src="jquery-1.5.js"></script>
<style>
div{
border:1px solid blue;
width:200px;
height:200px;
}
</style>
<script language="javascript">
$(function(){
var a= $('div>a').click(function(){ //返回所有的锚点本身选择所有div中所有不管是不是儿子孙子也能包含如果加上一个> 就代表只能找到自己的儿子
alert("aaa");
}).css("text-decoration","none")
.mouseover(function(){
$(this).css("color","blue");

})
.mouseout(function(){
$(this).css("color","green");
})
});
function abcx(){
var ev=event.srcElement;
alert(ev.tagName); //a 获取不到事件源
}

</script>

</head>
<body>
<div>
<a href="#">ABC</a><br>
<a href="#">AAA</a>
<p>
一个新的段落
<a href="#">PPP</a>
</p>
</div>
<hr>
<a href="#" onclick="abcx();">bbb</a> //必须写onclicke时间
<hr>
<button onclick="abcx();">btn2</button>
<br>
</body>
</html>
第三个:隔行变色
<html>
<head>
<style>
table{
border:1px solid red;
}
tr td{
border-bottom:1px solid blue;
padding:5px;
}
thead td{
background:#859cfa;
}
.bgcolor{
background:#8456fa;
}
tr.chgcolor td{
background:white;
}
#abc{
border:1px solid red;
width:60px;
}
</style>
<script language="javascript" src="jquery-1.5.js"></script>
<script type="text/javascript">
$(function(){
$("tbody tr:odd").css("background-color","red");
$("tbody tr:even").css("background-color","blue");
$("tbody tr").mouseover(function(){
$(this).addClass("chgcolor");
}).mouseout(function(){
$(this).removeClass("chgcolor");

});

$("#abc").click(function(){
var xy=" xx ";
alert(">"+xy+"<");
xy=$.trim(xy);
alert(">"+xy+"<");

});

$("#each").click(function(){
var ary=["aa","bb","cc"];
$.each(ary,function(indx,val){
alert(indx+">>"+val);
});

var trs=$("tbody tr");
$.each(trs,function(idx,tr){
alert(tr); //dom
});

});
});

</script>

</head>
<body>
<button id="abc">Trim</button>
<br>
<button id="each">each</button>
<table class="spring" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
</tr>

</thead>
<tbody>


<tr>
<td>1001</td><td>张小明</td><td>男</td><td>320</td>
</tr>

<tr>
<td>1002</td><td>张三</td><td>女</td><td>350</td>
</tr>

<tr>
<td>1003</td><td>李四</td><td>女</td><td>350</td>
</tr>
<tr>
<td>1004</td><td>王五</td><td>女</td><td>350</td>
</tr>
<tr>
<td>1005</td><td>马六</td><td>女</td><td>350</td>
</tr>
<tr>
<td>1006</td><td>刘七</td><td>女</td><td>350</td>
</tr>
<tr>
<td>1007</td><td>张八</td><td>女</td><td>350</td>
</tr>
<tr>
<td>1008</td><td>钱九</td><td>女</td><td>350</td>
</tr>
<tr>
<td>1009</td><td>徐十</td><td>女</td><td>350</td>
</tr>
</tbody>
</table>
</body>

</html>

第四个添加节点用jquery实现
<html>
<head>
<style>
</style>
<script language="javascript" src="jquery-1.5.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var str="<tr><td>AAAA</td></tr>"
$("#_tb").html($("#_tb").html()+str); //如果不加参数就是获取值加参数就是设置值
//选择一个没有id的input
var nm= $("input[name='nm']").val();
$("input[name='nm']").val("DOM..");
//$("iaa").attr("value","DDD");//如果你不是value 就使用这个比如img
});
});
</script>
</head>
<body>
<button id="btn1">btn</button>

<br>
<input type="text" name="nm" value="JACK"/>
<br>
<table id="_tb" width="30%" border="1">
<tr>
<td>Name</td>
</tr>
</table>
</body>
</html>
第四-2 添加div
<html>
<head>
<script language="javascript" src="jquery-1.5.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var xy=$("#b").clone();
xy.insertBefore("#a");
});
var idx=1;
$("div").click(function(){
var xy=$(this).clone(true);//同时带上事件
// xy.html(xy.html()+"<br>"+idx);
xy.insertBefore("div:first");
idx++;
});
});
</script>

<style>
div{
border:1px solid red;
width:100px;
height:100px;
float:left;
margin:5px;
}
</style>
</head>
<body>
<button id="btn1" >btn</button>
<div id="a">
aa
</div>
<div id="b">
bbb
</div>
</body>
</html>
第五选项卡功能实现
<html>
<head>
<style>
.div{
border:0px solid red;
width:60px;
height:30px;
float:left;
margin:0px;
text-align:center;
padding-top:5px;
cursor:hand;
}

.bg{
background:gray;
}

.contant{
border:0px solid red;
width:200px;
height:100px;
clear:left;
margin:0px;
padding-top:5px;
display:none;
background:gray;
}
</style>
<script type="text/javascript" src="jquery-1.5.js"></script>
<script type="text/javascript">
$(function(){
//选择所有以div为类样式的元素
$.each($(".div"),function(idx){
$(this).mouseover(function(){
$(this).addClass("bg").
siblings('.div').removeClass("bg");

$(".contant:eq("+idx+")")
.show()
.siblings('.contant').hide();
});

});


$(".div:first").mouseover(); //直接去调用它的click方法
// $(".contant:first").show();

$("div").click(function(){

if ($(this).hasClass("protected")){

$(this).animate({width:200,height:200,left:-10});
}
});
//设置显示一部分
$(".protected").mouseover(function(){
$(this).css({left:0,border:'2px dotted blue'});
})
.mouseout(function(){
$(this).css({left:-80,border:'1px solid green'});
});

});
</script>
</head>
<body style="font-size:75%;">
<div class="div">
电脑
</div>
<div class="div">
手机
</div>
<div class="div">
人口
</div>
<div class="contant">
<a href="#">笔记本</a><br/>
<a href="#">Pad</a><br/>
</div>
<div class="contant">
<a href="#">iPohone</a><br/>
<a href="#">Andriod</a>
</div>
<div class="contant">
<a href="#">男人</a><br/>
<a href="#">女地</a>
</div>

<hr/>
<div class="protected" style="border:1px solid red;width:100px;height:100px;left:300px;position:absolute;">aa</div>
<div>bb</div>
</body>
</html>
第六图片点击切换
<html>
<head>
<style>
img{
width:300px;
height:300px;
border:0px;
}
</style>
<script language="javascript" src="jquery-1.5.js"></script>
<script type="text/javascript">
$(function(){
var imgArr=new Array();
imgArr.push("img/a.jpg");
imgArr.push("img/b.jpg");
imgArr.push("img/c.jpg");
imgArr.push("img/d.jpg");
var idx=0;
$("#a").click(function(){
idx++;
if(idx>=imgArr.length){
idx=0;
}
$("img").attr("src",imgArr[idx]);
});
$("#b").click(function(){
idx--;
if(idx<0){
idx=imgArr.length-1;
}
$("img").attr("src",imgArr[idx]);
});
});
</script>
</head>
<body>
<img src="img/a.jpg" usemap="#aaa"/>
<MAP NAME="aaa">
<AREA SHAPE="rect" id="a" COORDS="0,0,150,300"/>
<AREA SHAPE="rect" id="b" COORDS="150,0,300,300"/>
</MAP>
</body>
</html>
第七个动画效果
<html>
<head>
<style>
div{
width:200px;
height:200px;
border:1px solid red;
}
.abc{
background:lightgray;
}

</style>
<script language="javascript" src="jquery-1.5.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").bind("click",function(){
$(this).toggleClass("abc");
$("#div").toggle(3000);
});
});
</script>
<body>
<button id="btn">逗你玩</button>
<div id="div">DIV</div>
</body>
</html>
第八个树
<html>
<head>
<style>
a{
text-decoration:none;
}
.div a{
padding-left:20px;
color:blue;
}
</style>
<script language="javascript">
function hi(obj){
var div= obj.nextSibling.nextSibling;
if(div.style.display==""){
div.style.display="none";
}else{
div.style.display="";
}
}
</script>
</head>
<body>
<div >
<a href="#" onclick="hi(this)">功能1</a>
<div class="div"><a href="#">项目1</a><br/><a href="#">项目1</a></div>
</div>
<div>
<a href="#" onclick="hi(this)">功能2</a>
<div class="div"><a href="#">项目1</a><br/><a href="#">项目1</a></div>
</div>
</body>
</html>
第⑨个进图条
<html>
<head>
<style>
#a{
border:1px solid red;
width:400px;
height:20px;
}
#b{
width:10%;
height:100%;
background:gray;
text-align:center;
}
</style>

</head>
<body>
<div id="a">
<div id="b">10%</div>
</div>
<button onclick="_go();">Go</button>
</body>
<script language="javascript">
var w = 10;
var tm = null;
function _go(){
tm = window.setInterval(realGo,1000);
}
function realGo(){
if(w>=100){
window.clearInterval(tm);
return;
}
w = w+10;
b.innerText=w+"%";
b.style.width=w+"%";
}
</script>
</html>
第十个遮罩层
<html>
<head>
<style>

div{
width:200px;
height:200px;
border:1px solid red;
}
.abc{
background:lightgray;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function(){

$("#div1").click(function(){
$(this).toggleClass("abc");
});

$("#btn2").bind("click", function(){
$("#div1").toggle(3000);

});



$("#btn5").click(function(){
var w = $("body").width();
var h = $("body").height();

var div = $("<div></div>");
div.css({
position:'absolute',
left:0,
top:0,
width:w,
height:h,
zIndex:1000,
background:'#342abf',
margin:'0px'
});
//div.fadeTo('slow',0.5);

//$("body").append(div);
div.appendTo("body").fadeTo("slow",0.6)
.dblclick(function(){
$(this).fadeOut();
});

});

});
</script>
</head>
<body style="font-size:75%;">
<button id="btn2" style="cursor:url('imgs/c.ico');">DDD</button>

<button id="btn5">Cover</button>
<hr/>
<div id="div1">
hello....
</div>
</body>
</html>
第十一个级联
<html>
<body>
省: <select id="_a">
<option value="0">--请选择--</option>
</select>
市:<select id="city">

</select>
</body>
<script language="javascript">
var a=new Array();
a['北京']=[
{
key:'hd',
name:'海淀'
},
{
key:'cy',
name:'朝阳'
},
{
key:'cp',
name:'昌平'
}
];

a['河北']=[
{
key:'hd',
name:'邯郸'
},
{
key:'ts',
name:'唐山'
},
{
key:'hs',
name:'衡水'
}
];
for(var key in a){
var op=new Option(key,key);
_a.options.add(op);
}

_a.onchange=function(){
city.options.length=0;//清空以前的所有内容
var vv=_a.value;
var ary=a[vv];
for(var v1 in ary){
var cc=ary[v1];
var op=new Option(cc.key,cc.name);
city.options.add(op);

}
city.onchange=function(){
alert(city.value);

}

}
</script>
</html>
第十二哥限制输入
<html>
<body>
年龄:
<input type="text" value="00" maxlength="2" size="3"
onmouseover="this.focus();"
onfocus="this.select();"
onkeydown="return validate_age();"/><br>

<label id="remain"></label><br>
<textarea maxlength="10" row="5" cells="10"
onkeypress="return val(this);"></textarea>
</body>
<script language="javascript">
function validate_age(){
var p=/\d/;
var c=event.keyCode;
var d=String.fromCharCode(c);
var boo=p.test(d);
if(boo|| c==8){
return true;
}else{
return false;
}
}
function val(obj){
var txt=obj.value;
var len=txt.length;
var r=10-len;
remain.innerHTML="您还剩:"+r;
if(len>=10){
return false;
}else{
return true;
}
}

</script>

</html>
第十三妹提交多选
<html>
<body>
<p>北京的区包括哪些:
<br/>
<input type="checkbox" name="city" value="cp">昌平
<br/>
<input type="checkbox" name="city" value="hd">海淀
<br/>
<input type="checkbox" name="city" value="qd">山东
<br/>
<input type="checkbox" name="city" value="jn">济南
<br/>
<input type="text" id="_val"/>
<input type="button" value="提交"/>
</body>

<script language="javascript">
var chk=document.getElementsByName("city");
var len=chk.length;
for(var i=0;i<len;i++){
chk[i].onclick=chked;
}

function chked(){
var arr=new Array();
var idx=0;
for(var i=0;i<len;i++){
if(chk[i].checked==true){
arr[idx++]=chk[i].value;
}
}
_val.value=arr;
}
</script>
</html>
----------------------
先就这些把等以后在总结把!