实践jquery 高级编程
// 最近买了本jquery高级编程的书 在此和大家分享
2012-12-11 10:23:00// jquery 的链式写法***************
<html>
<head>
<title>jQuery 高级编程</title>
<script src="js/jquery-1.8.2.js" type="text/javascript"></script> // 1.8.2是jquery最新版的插件 文章可下载
<style type="text/css">
.iframe{ border:solid 1px #888;font-size:13px;}
.title{ padding:6px;background-color:#EEE;}
.content{ padding:8px 0px;font-size:12px; text-align:center;display:none;}
.curcol{ background-color:#CCC}
</style>
<script type="text/javascript">
$(function(){
$(".content").html("您好！欢迎来到jQuery 的精彩世界！");
$(".title").click(function(){ // 这里不能用oncick 如用会报错：[11:27:46.636] TypeError: $(...).onclick is not a function @ http://localhost/test.html:25 所以只能用click
$(this).addClass("curcol").next(".content").css("display","block"); // jquery 的链式写法
// 当前对象 title添加样式curcol 以及它的下个类名为content的显示
});
});
</script>
</head>
<body>
<div class="iframe">
<div class="title" id="title"> 标题</div>
<div class="content"></div>
</div>
</body>
</html>
// 2013-12-11 14:40:00 *********************javascript的用法以及js的三木运算
<!DOCTYPE html>
<html>
<head>
<title> 控制DOM 对象</title>
<style type="text/css">
.iframe{ border:solid 1px #888;font-size:13px;}
.title{ padding:6px;background-color:#EEE;}
.content{ padding:8px;font-size:12px;}
.tip{ background-color:#EEE;display:none; font-size:12px;padding:8px;}
.txt{ border:solid 1px #888;}
.btn{ border:solid 1px #888;width:60px;}
.w260{ width:260px;}
</style>
<script type="text/javascript">
function btn_Click(){
// 获取文本框的值
var oTxtValue=document.getElementById("Text1").value; // 通过DOM方式取值
// 获取单选框按钮值
var oRdoValue=(Radio1.checked)?" 男":" 女"; // 第一次看到js也有三木运算 效率不错哟
// 获取复选框按钮值
var oChkValue=(Checkbox1.checked)?" 已婚":" 未婚";
// 显示提示文本元素
document.getElementById("Tip").style.display="block";
// 设置文本元素的内容
document.getElementById("Tip").innerHTML=
oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue;
}
</script>
</head>
<body>
<div class="iframe">
<div class="title"> 请输入如下信息</div>
<div class="content">
姓名：<input id="Text1" type="text" class="txt"/><br />
性别：<input id="Radio1" name="rdoSex" type="radio" value=" 男" /> 男
<input id="Radio2" name="rdoSex" type="radio" value=" 女" /> 女<br />
婚否：<input id="Checkbox1" type="checkbox" /><br /><br />
<input id="btnSubmit" type="button" value=" 提 交" class="btn"
onclick="btn_Click();" /><br /><br />
</div>
<div id="Tip" class="tip"></div>
</div>
</body>
</html>
// 那些标签太繁琐了
<script src="js/jquery-1.8.2.js"type="text/javascript"></script>
<style type="text/css">
.iframe{ border:solid 1px #888;font-size:13px;}
.defcol{ padding:6px;background-color:#EEE;}
.curcol{ padding:6px;background-color:#CCC;color:#FFF}
</style>
<script type="text/javascript">
$(function() {
$(".defcol").click(function() {
$(this).toggleClass("curcol"); // 这个函数用处很大的 多用户menu展开关闭
});
});
</script>
<div class="defcol"> 标题</div>
// 隔行换色*****************
<title> 使用JavaScript 实现隔行变色</title>
<style type="text/css">
body{font-size:12px;text-align:center}
#tbStu{width:260px;border:solid 1px #666;background-color:#eee}
#tbStu tr{line-height:23px}
#tbStu tr th{background-color:#ccc;color:#fff}
#tbStu .trOdd{background-color:#fff}
</style>
<script type="text/javascript">
window.onload=function(){
var oTb=document.getElementById("tbStu");
for(var i=0;i<oTb.rows.length-1;i++){
if(i%2){
oTb.rows[i].classname="trOdd";
}
}
}
// 上面的js太繁琐 看jquery 一招搞定
$(function(){
$("#tbStu tr:nth-child(even)").addClass("trOdd");
})
</script>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th> 学号</th><th> 姓名</th><th> 性别</th><th> 总分</th>
</tr>
<!-- 奇数偶-->
<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> 张小明3</td><td> 男</td><td>320</td>
</tr>
<!-- 偶数偶-->
<tr>
<td>1004</td><td> 李明琪4</td><td> 女</td><td>350</td>
</tr>
</tbody>
</table>
// 匹配元素
$(function(){ //ID 匹配元素 显示ID 为divOne 的页面元素
$("#divOne").css("display","block");
})
$(function(){ // 元素名匹配元素 显示元素名为span 的页面元素
$("div span").css("display","block");
})
$(function(){ // 类匹配元素 显示类别名为clsOne 的页面元素
$(".clsFrame .clsOne").css("display","block");
})
$(function(){ // 匹配所有元素 显示页面中的所有元素
$("*").css("display","block");
})
$(function(){ // 合并匹配元素 显示ID 为divOne 和元素名为span的页面元素
$("#divOne,span").css("display","block");
})
<body>
<div class="clsFrame">
<div id="divOne">ID</div>
<div class="clsOne">CLASS</div>
<span>SPAN</span>
</div>
</body>
// 未完待续 敬请期待