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