// 最近买了本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>
// 未完待续 敬请期待
相关推荐
学习和实践jQuery高级编程的最佳实践，可以帮助开发者编写出更为高效、兼容和可维护的JavaScript代码。上述的实践方法是众多Web开发者在日常开发中积累的宝贵经验，运用好这些方法，可以让Web应用的性能和用户体验...
《jQuery高级编程》是一本深度探讨jQuery库的权威著作，旨在帮助开发者提升在网页开发中的JavaScript技能，特别是使用jQuery进行高效、优雅的DOM操作、事件处理、动画制作以及Ajax交互等方面的知识。这本书全面覆盖...
《jQuery高级编程》一书是深入理解并熟练运用jQuery库的宝贵资源，它涵盖了jQuery的高级特性和实践应用。jQuery，作为一个广泛使用的JavaScript库，极大地简化了网页的DOM操作、事件处理、动画设计以及Ajax交互。...
《jQuery高级编程》是一本深度探讨jQuery库的权威著作，旨在帮助读者掌握jQuery的核心概念、高级技巧以及实际应用。jQuery是JavaScript的一个库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单和...
《jQuery高级编程》是一本深度探讨jQuery库的权威著作，旨在帮助开发者提升在网页开发中的JavaScript编程技巧。这本书涵盖了从基础到高级的各种jQuery主题，包括选择器、事件处理、动画效果、插件开发以及与其他技术...
"JavaScript高级编程"这本书深入探讨了这门语言的高级特性和最佳实践，旨在帮助开发者提升技能水平，实现更高效、更可靠的代码编写。以下是该书可能涵盖的一些关键知识点： 1. **基础语法**：包括变量、数据类型...
《XMPP高级编程+使用JavaScript和jQuery》是一本深度探讨XMPP协议以及如何结合JavaScript和jQuery进行实时通信的书籍。XMPP（Extensible Messaging and Presence Protocol）是一种基于XML的即时通讯协议，广泛应用于...
在IT领域，jQuery是一个广泛使用的JavaScript库，它极大...通过深入学习基础、高级编程技巧，以及组件开发，你将能够构建出功能丰富、交互性强的Web应用。结合实战经验与丰富的文档，你将能在Web开发的道路上走得更远。
本教程将深入探讨ASP.NET Web Forms的高级编程技巧，旨在帮助有经验的.NET开发者提升在Web应用开发中的能力。 在ASP.NET Web Forms中，一个关键概念是页面生命周期。了解这一生命周期对于优化性能和处理用户交互至...
本资源为"ASP.NET MVC 3 高级编程中文完整版"，提供了一个全面深入的学习指南，适合已经对基础MVC有一定了解并希望提升到更高层次的开发者。 **MVC设计模式** MVC模式是一种软件设计模式，将应用程序分为三个主要...
《ASP.NET MVC 5高级编程 第5版》这本书详细介绍了这个框架的高级用法和技术，旨在帮助开发者提升他们的技能和理解。 1. **MVC设计模式**：MVC模式是软件设计中的一个重要概念，它将应用分为三个主要组件——模型...
《ASP.NET MVC 5 高级编程（第5版）》是 Jon Galloway 等作者撰写的一本深入探讨ASP.NET MVC 5框架的专业书籍。该书详细讲解了如何利用这一强大的Web开发技术构建高效、可维护的Web应用程序。在这一中文高清完整版中...
总的来说，《jQuery高级编程》这本书会引导读者深入学习jQuery的各种高级技巧和最佳实践，帮助开发者编写出高效、优雅的代码，提升Web应用的用户体验。无论是前端新手还是经验丰富的开发者，都能从中受益匪浅，...
总之，《精通jQuery代码实践学习》将带你探索jQuery的各个层面，包括基础用法、高级技巧以及实际项目应用。通过深入学习和实践，你将能够灵活运用jQuery解决各种网页动态效果和交互问题，提升你的前端开发技能。
在“javascript 高级编程”这个主题中，我们将深入探讨JavaScript的高级特性，包括但不限于对象、函数、闭包、原型链、异步编程等核心概念。 1. **对象**：在JavaScript中，对象是键值对的集合，可以通过字面量语法...
这本书“ASP.NET MVC 5高级编程”第五版，中文版，详细介绍了如何充分利用这一框架来开发复杂的Web应用。 在MVC模式中，“模型”负责业务逻辑和数据管理，它与数据库交互并处理业务规则。“视图”是用户看到和与之...
ASP.NET MVC3.0 是微软开发的一个开源框架，用于构建高度可测试和可维护的Web应用程序。...通过阅读《ASP.NET MVC3.0 高级编程》这本书，你可以获取更多关于这些主题的详细信息，掌握实际开发中的最佳实践。