jQuery 入门级学习笔记及源码


Posted in Javascript onJanuary 22, 2010

jQuery真的很好,有些效果甚至让我尖叫。而各种插件能实现你喜欢的效果,这种方式为jQuery的流行奠定了基础,就像那个crocs鞋子似的。jQuery还有一个优点是达到了将行为与结构分开的目的。

内容概要:
1. 安装
2. Hello jQuery
3. Find me:使用选择器和事件
4. Rate me:使用AJAX
5. Animate me(让我生动起来):使用FX (jQuery FX,jQuery UI后的第二个子库,强调动画效果而非UI的外观模块,包括对象的消失、出现;颜色、大小、位置变换。)
6. Sort me(将我有序化):使用tablesorter插件(表格排序)

custom.js

$(document).ready(function() { //## 简写方法:(document).ready可以去掉 
## 让所有“<a>”在点击时填出“hello world” 
$("a").click(function() { 
alert("Hello world"); 
}); ## id是“orderedlist”增加class名为“red”,在core.css有定义 
$("#orderedlist").addClass("red"); 
## id是“orderedlist”下的最后一个li,鼠标经过时会变色 
$("#orderedlist li:last").hover( 
function() { 
$(this).addClass("green"); 
}, 
function() { 
$(this).removeClass("green"); 
} 
); 
## find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法迭代了所有的li,并可以在此基础上作更多的处理。 
## 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字,并将之设置为li的html文本。 
$("#orderedlist").find("li").each(function(i) { 
$(this).html($(this).html() + " BAM! " + i); 
} 
); 
## 清空所有的input值 
$("#reset").click(function() { 
$("input").attr("value", ""); 
}); 
## 这个代码选择了所有的li元素,然后去除了有ul子元素的li元素。刷新浏览器后,所有的li元素都有了一个边框,只有ul子元素的那个li元素例外。 
## 请注意体会方便之极的css()方法,并再次提醒请务必实际测试观察效果,比方说换个CSS样式呢?再加一个CSS样式呢? 
$("li").not("[ul]").css("border", "1px solid black").css("color", "red"); 
## 这个代码给所有带有name属性的链接加了一个背景色。[注:在jQuery1.2及以上版本中,@符号应该去除] 
$("a[@name]").background("#eee"); 
## 你可能需要选择一个有特点href属性的链接,这在不同的浏览器下对href的理解可能会不一致,所以我们的部分匹配("*=")的方式来代替完全匹配("=") 
$("a[@href*=bot]").click(function() { 
alert("hello world 2"); 
}); 
## 这里我们用了一些链式表达法来减少代码量,而且看上去更直观更容易理解。像'#faq' 只选择了一次,利用end()方法,第一次find()方法会结束(undone), 
## 所以我们可以接着在后面继续find('dt'),而不需要再写$('#faq').find('dt')。 
## 在点击事件中的,我们用 $(this).next() 来找到dt下面紧接的一个dd元素,这让我们可以快速地选择在被点击问题下面的答案。 
$('#faq').find('dd').hide().end().find('dt').click(function() { 
var answer = $(this).next(); 
if (answer.is(':visible')) { 
answer.slideUp(); 
} else { 
answer.slideDown(); 
} 
}); 
## 除了选择同级别的元素外,你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时,它的父级元素--也就是文章的这一段突出显示,试试这个: 
$("a").hover(function() { 
$(this).parents("p").addClass("highlight"); 
}, function() { 
$(this).parents("p").removeClass("highlight"); 
}); 
## AJAX第一次尝试。首先我们需要一些服务器端代码,这个例子中用到了一个ASPX文件,读取rating参数然后返回rating总次数和平均数。 
// generate markup 
var ratingMarkup = [" Please rate: "]; 
for (var i = 1; i <= 5; i++) { 
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> "; //ratingMarkup是个数组 
} 
// add markup to container and applier click handlers to anchors 
$("#rating").append(ratingMarkup.join('')).find("a").click(function(e) { //用join方法返回一个将数组所有元素用指定符号连在一起的字符串 
e.preventDefault(); //该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。 
// send requests 
$.post("rate.aspx?rating=" + $(this).html(), {}, function(xml) { //这里要用{}占一个位 
// format result 
var result = [ 
"Thanks for rating, current average: ", 
$("average", xml).text(), 
", number of votes: ", 
$("count", xml).text() 
]; 
// output result 
$("#rating").html(result.join('')); 
}); 
}); 
## 一些动态的效果可以使用 show() 和 hide()来表现。伸缩效果。 
$("a").toggle(function() { //toggle双向开关 
$(".stuff").hide('slow'); 
}, function() { 
$(".stuff").show('fast'); 
}); 
## 可以与 animate()联合起来创建一些效果,如一个带渐显的滑动效果 
$("a").toggle(function() { 
$(".stuff").animate({ 
height: 'hide', 
opacity: 'hide' 
}, 'slow'); 
}, function() { 
$(".stuff").animate({ 
height: 'show', 
opacity: 'show' 
}, 'slow'); 
}); 
## 使用tablesorter插件(表格排序) 
## 几乎所有的特件都是这样用的:先include插件的js文件,然后在某些元素上使用插件定义的方法,当然也有一些参数选项是可以配置的 
$("#large").tableSorter(); 
## 这个表格还可以加一些突出显示的效果,我们可以做这样一个隔行背景色(斑马线)效果 
$("#large").tableSorter({ 
stripingRowClass: ['odd', 'even'], // Class names for striping supplyed as a array. 
stripRowsOnStartUp: true // Strip rows on tableSorter init. 
}); 
});

jquery-starterkit.rar
Javascript 相关文章推荐
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 #Javascript
Jquery实战_读书笔记2 选择器
Jan 22 #Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 #Javascript
jquery last-child 列表最后一项的样式
Jan 22 #Javascript
javascript 拖放效果实现代码
Jan 22 #Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 #Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 #Javascript
You might like
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
Underscore源码分析
2015/12/30 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
婚礼主持词
2014/03/13 职场文书
函授生自我鉴定
2014/03/25 职场文书
抗震救灾标语
2014/06/26 职场文书
社团活动总结模板
2014/06/30 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python