08.net网站开发（前端）：5.jQuery
开发网站肯定要会JS，嫌代码太难看难学那至少要学会jQuery。当然我见过有些项目纯用服务端控件也是能做出来的，但我相信，那些碰到复杂的需求的话肯定很棘手的。jQuery是对JS和DOM的封装，少量代码直接解决大多兼容性问题。jQuery我是较后面才学稍微深入一点的，当使用纯HTML（不使用服务端控件）+jQuery是很方便而且灵活的，所以很推荐先学写简单应用。对jQuery的认识，可以多搜几篇文章，下面我给出一些常用代码和一点实例，都有详细注释。
1.ready、jQuery和Dom互转、包装集、html
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<!--//一般开发过程使用完整版有详细注释，发布后换成压缩版min-->
<script type="text/javascript">
$(document).ready(function () {
alert("窗体加载完成，dom创建后触发事件。可以注册多次该事件");
//Dom里的onload事件是在窗体加载完成，dom创建，css、图片等加载完成后再触发。只能触发一次
});
$(function () { //$(function ()默认就是ready!!
var $d = $("#d1,#d2"); //包装集可以放多个ID
$d.html("给id为d1的div标签赋值内容"); //默认操作第一个ID？
var domd1 = $d.get(1); //提取第二个ID转换为Dom对象（不能转换为jQuery？）
//Dom转jQuery：
//var $jd1 = $(domd1);
domd1.innerHTML = "啊啊啊";
});
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
2.数组处理，字典、数组遍历
数组处理：
var arr = [100, 200, 300];
//map（源数组，函数（操作数组这里其实就是源数组,索引值这个参数可以省略））
arr = $.map(arr, function (doArr,i) {
doArr += i;
return doArr;
});
function f() {
alert(arr);
}
//测试
f();
字典遍历：
var myMap = { "name": "乡巴佬", "sex": "男" };
//遍历map
$.each(myMap, function (key, value) {
alert(key+":"+value);
});
//只处理“值”
$.each(myMap, function () {
alert(this);
});
数组遍历：
$.each(arr, function () {
alert(this);
});
组合：
var jSon = [{ "name": "乡巴佬", "height": 178 },
{ "name": "乡巴佬", "height": 179}];
$.each(jSon, function () {
alert(this.name + "~" + this.height);
});
选择器、方法
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#div1").click(function () {
alert("id选择器");
});
$(".cl").text("class选择器");
$("p").text("标签选择器,应该只能选择顶部标签");
$("div,p").css("background-color", "yellow"); //组合选择器，设置css样式
$("#div1 div").text("层次选择器，某层次下的所有对应标签");
//$("div > p")获取div下的直接p子元素
//$(".menuitem + div")获取样式名为menuitem之后的第一个div元素（不常用）
//$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素（不常用）
});
function f() {
var str = $("#txtText").val(); //不写参数表示获取值
alert(str);
$("#txtText").val("给对应id控件赋值"); //加上参数表示设置值
}
$(function () {
$("#btButton2").click(function () {
$("#link").attr("href", "http://baidu.com");//为一个<a>标签添加href属性
// 使用attr()方法读取或设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
//使用removeAttr删除属性。
});
});
</script>
</head>
<body>
<div id="div1">
<div></div>
<p></p>
<div>
<div></div>
</div>
</div>
<div class="cl"></div>
<div class="cl"></div>
<p></p>
<p></p>
<div></div>
<input id="txtText" type="text" />
<input id="btButton" type="button" onclick="f()" value="获取、设置" /><br />
<a id="link">这里原本是没有超链接的</a>
<input id="btButton2" type="button" value="动态设置属性值" />
</body>
实例：图片选择器
<script type="text/javascript">
$(function () {
$("#choose a").click(function () {//为 id为choose下的所有a标签 注册点击事件
$("#image").attr("src", this.href);//this表被点击的a标签
return false;//要取消后续操作
});
});
</script>
</head>
<body>
<ul id="choose">
<li><a href="championsskin_143001.jpg">1</a></li>
<li><a href="championsskin_238001.jpg">2</a></li>
</ul>
<img id="image" src="" />
</body>
节点
next() 获取节点之后的挨着的第一个同辈元素，$(".m").next("div")
nextAll() 获取节点之后的所有同辈元素
prev、prevAll兄弟中之前的元素。
siblings() 获取所有同辈元素，除了自己。也可以加参数。
end()将匹配的元素列表变为前一次的状态。$(".m").next("div").end()就是操作.m
andSelf() 加上自身
实例：表格+多Radio+动态修改对应行的值
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".radio input").on("click", function () {
var v = $(this).val(); //选择的radio的值
$(this).parent().nextAll(".v").html(v); //同行（自己之后）的class=v的区域
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
Id
</td>
<td>
调整
</td>
<td>dd</td>
<td class="v">
值μ
</td>
</tr>
<tr>
<td>
a
</td>
<td class="radio">
<input type="radio" value="5" name="a" checked="checked" />低谷时段 <input type="radio" value="10" name="a" />平时时段
<input type="radio" value="15" name="a" />尖峰时段
</td>
<td></td>
<td class="v">
10
</td>
</tr>
<tr>
<td>
b
</td>
<td class="radio">
<input type="radio" value="5" name="b" />低谷时段
<input type="radio" value="10" name="b" checked="checked" />平时时段
<input type="radio" value="15" name="b" />尖峰时段
</td>
<td></td>
<td class="v">
5
</td>
</tr>
</table>
</div>
</form>
</body>
08.net网站开发（前端）：5.jQuery的更多相关文章
- HubSpot – 网站开发必备的 jQuery 信息提示库
HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...
- I am back-电商网站开发&jQuery
hi 之前有将近两周的时间没有更新,除了懒就是其他的事情耽误了.现在好了,回家了,虽然家里停水,外面又有积雪,天寒地冻的,但诸多不便,都比不过有点闲的好. 开搞每个学PHP的必经之路——电商网站的开发 ...
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...
- 网站开发中很实用的 HTML5 & jQuery 插件
这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...
- web前端开发学习：jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
- MVC5网站开发之一 总体概述
由于前几次都没能写完,这次年底总算有自由时间了,又想继续捣鼓一下.于是下载了VS 2015专业版(不知为什么我特别钟爱专业版,而不喜欢企业版).由于以前的教训,我这次决定写一个极简的Deom,简到什么 ...
- MVC5 网站开发之六 管理员 2、添加、删除、重置密码、修改密码、列表浏览
目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MVC5 网站开发之三 数据存储层功能实现 MVC5 网站开发之四 业务逻辑层的架构和基本功能 MVC5 网 ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- Web前端之jQuery 的10大操作技巧
不管是做什么事情,人们习惯在工作中去找方法.找技巧,来帮助提高效率,在软件开发中更是如此.jQuery作为前端开发必学技术之一,在使用中也有各种各样的小技巧,今天小编为大家分享10条必知会的技巧,希望 ...
随机推荐
- textarea中的空格与换行
当在一个textarea标签中键入一个回车时,实际上会插入2个符号:\n\r在javascript里, line breaks用\n表示when you pull text into Javascri ...
- Scala基础类型与操作
Scala基本类型及操作.程序控制结构 Scala基本类型及操作.程序控制结构 (一)Scala语言优势 自身语言特点: 纯面向对象编程的语言 函数式编程语言 函数式编程语言语言应该支持以下特性: 高 ...
- Toast的替代者Snackbar
在Android design support library中,SnackBar的使用: Part 2 – Welcome Snackbar, Goodbye Toast! BY PARESH MA ...
- Unity3D Android手机开发环境配置
Unity3D Android手机开发环境配置 Date:2014-01-01 07:09 1.配置eclipse环境:首先在官网下载安装包:http://developer.android.com/ ...
- linux系统性能监控常用命令
一.Linux服务器性能关注点 1)CPU -> load:表示cpu在一段时间内正在处理以及等待处理的任务之和统计信息,简单可理解为cpu正处理的线程数和能同时处理的线程数的比值.一般认为 ...
- data pump（数据泵）
先给出oracle给出的一个定义: “Oracle Data Pump technology enables very high-speed movement of data and metadata ...
- cocos2d-x 3.0 新特性样例
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzMyMTMyOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- vs2010 项目编译 ResGen.exe”已退出，代码为 -1073741701
解决的办法如下: 1.关闭所有Visual Studio: 2.以管理员的身份打开命令提示窗口:(开始-运行-cmd) 3.更改目录至"CD C:\Program Files (x86)\M ...
- java 錯誤集錦.
(1)加载驱动成功com.microsoft.sqlserver.jdbc.SQLServerException: 不支持此服务器版本.目标服务器必须是 SQL Server 2000 或更高版本.链 ...
- 【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick
由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...