jQuery 入门级学习笔记及源码
2024-05-06 14:11:47
供稿：网友
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')。
