jQuery 简单笔记

这是学习 jQuery 时做的一些简单的笔记。

我的想法是：

根据这些简单的笔记去回想他们详细的用法。
仔细思考相同的效果如何用原生 JavaScript 实现，或者说怎样用原生 JavaScript 写这些方法，达到练习 JavaScript 的目的。
可以看一些源码（从早期的 jQuery 开始），通过和其它框架进行比较，了解各个框架的优缺点，熟悉原生 JavaScript 及各大框架

选择元素

$().action

等待文档加载完成

$(function() {
	//jQuery method
})

$(docuemnt).ready(function() {
	//jQuery method
})

选择器

$()
$("selecter")
$("#id")
$(".class")

事件

click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()

隐藏/显示

hide()
show()
toggle() $(selector).toggle(speed,callback);

淡入/淡出

fadeIn()
fadeOut()
fadeToggle()
fadeTo() 不透明度（0 - 1之间）

滑动

slideDown()
slideUp()
slideToggle()

动画

$(selector).animate({params},speed,callback);

params 为必选，可以操作几乎所有 CSS 属性，但必须使用 Comel 命名法
speed 可选项，动画执行的速度（fast，normal，slow，毫秒）
callback 可选项，animate 完成后执行的函数

停止动画

$(selector).stop(stopAll,goToEnd);

stopAll 为是否要清除动画队列，默认为 false，即仅仅清除当前动画
goToEnd 为是否立即完成动画，默认为 false

Chaining

在相同元素上联系运行命令，一条接一条

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

捕获

text()
html()
val()
attr()

设置

text("text")
html("html")
val("value")
attr("attr", "attrValue")

以上四个方法都有回调函数，函数有两个参数：当前元素在列表中的下标，原始（旧的）值。函数返回新值。

添加元素

append()
preppend()
before()
after()

删除元素

remove() --- 删除元素及其子元素
empty() --- 删除子元素
remove(.class) 过滤

CSS类

addClass()
removeClass()
toggleClass()

css() 方法

css("propertyname");
css("propertyname","value");
css({"propertyname":"value","propertyname":"value",...});

尺寸

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerWidth()

祖先

parent()
parents("selecter")
parentUntil("selecter")

后代

children() $(div).children("p.1")
find("selecter")

同胞

siblings("selecter")
next()
nextAll()
nextUntil("selecter")
prev()
prevAll()
prevUntil("selecter")

过滤

first()
last()
eq(0)
filter()
not()

AJAX load()

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

AJAX get()/post()

$.get()
$.post()

noConflict

var jq = $.noConflict();

JSONP