jQuery

jQuery基础语法是：$(selector).action()

jQuery加载

// 标准JavaScript
window.onload = function () {console.log("xxx");};

//jQuery
$(window).load(function () {console.log("xxx");};
$(document).ready(function () {console.log("xxx");};
jQuery(function () {console.log("xxx");};
$(function () {console.log("xxx");};

// 把jQuery对象转DOM对象的方式:

$(Obj).get(0);		// 方法一
$(Obj)[0];			// 方法二

jQuery 选择器

• 元素选择器 $("Element")
• 类选择器 $(".class")$("#id")
• 通配符选择器 $("*")
• 复合选择器
  • $("xx, xx") 并集选择（同层 并列）
  • $("xx.xx") 交集选择
  • $("xx xx") 后代选择
  • $("xx>xx") 子元素选择
  • $("xx+xx") 相邻选择
  • $("xx~xx") 兄弟选择
  • $("xx[xx]") 属性选择
• 基本过滤选择器
  • $("xx:eq(index)") 索引选择
  • $("xx:gt(index)") 索引大于选择
  • $("xx:lt(index)") 索引小于选择
  • $("xx:odd") 奇数行选择
  • $("xx:even") 偶数行选择
  • $("xx:first") 首元素选择
  • $("xx:last") 末元素选择
• 筛选选择器
  • $("xx").find("xx") 所有后代选择
  • $("xx").children("xx") 亲子代选择
  • $("xx").siblings("xx") 所有兄弟选择
  • $("xx").parent("xx") 父代选择
  • $("xx").eq(index)
  • $("xx").eq(index) 索引选择

事件

jQuery的事件一般为去掉on-前缀的DOM事件

var btn = document.getElementById("btn");
btn.onclick = function(){
    alert("hi");
}

$("btn").click(function(){
    alert("hi");
});

常见事件

• click
• keypress
• submit
• load
• dblclick
• keydown
• change
• resize
• mouseenter
• keyup
• focus
• scroll
• mouseleave
• blur
• unload
• hover

方法

效果

• 显示/隐藏

  • .hide() 隐藏元素 可以设置参数(speed,callback)

  • .show() 显示元素

  • .toggle() 隐藏/显示元素来回切换

  控制 display: block display: none

• 淡出淡入

  • fadeIn() 淡入

  • fadeOut() 淡出

  • fadeToggle() 淡出淡入来回切换

  • fadeTo() 淡出淡入渐变透明度

  控制 display opacity

• 滑动

  • slideDown() 向下滑动

  • slideUp() 向上滑动

  • slideToggle() 向上向下滑动来回切换

  控制 display height

• 动画

  • animate({params}, speed, callback)
  • stop(stopAll, goToEnd) 动画停止

DOM操作

• 操作内容

  • text() 设置或返回所选元素的文本内容
  • html() 设置或返回所选元素的内容（包括 HTML 标记）
  • val() 设置或返回表单字段的值
  • attr() 获取属性值

• 添加元素

  • append() 在被选元素的结尾插入内容
  • prepend() 在被选元素的开头插入内容
  • after() 在被选元素之后插入内容
  • before() 在被选元素之前插入内容

• 删除元素

  • remove() 删除被选元素（及其子元素）
  • empty() 从被选元素中删除子元素

• 操作 CSS

  • addClass() 向被选元素添加一个或多个类
  • removeClass() 从被选元素删除一个或多个类
  • toggleClass() 对被选元素进行添加/删除类的切换操作
  • css() 设置或返回样式属性

• 尺寸

  • width() 设置或返回元素的宽度（不包括内边距、边框或外边距）
  • height() 设置或返回元素的高度（不包括内边距、边框或外边距）
  • innerWidth() 返回元素的宽度（包括内边距）
  • innerHeight() 返回元素的高度（包括内边距）
  • outerWidth() 返回元素的宽度（包括内边距和边框）
  • outerHeight() 返回元素的高度（包括内边距和边框）

• 遍历
  • parent() 返回被选元素的直接父元素
  • parents() 返回被选元素的所有祖先元素
  • parentsUntil() 返回介于两个给定元素之间的所有祖先元素
  • children() 返回被选元素的所有直接子元素
  • find() 返回被选元素的后代元素，一路向下直到最后一个后代
  • siblings() 方法返回被选元素的所有同胞元素
  • next() 方法返回被选元素的下一个同胞元素
  • nextAll() 方法返回被选元素的所有跟随的同胞元素
  • nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
  • prev()
  • prevAll()
  • prevUntil()
  • first() 返回被选元素的首个元素
  • last() 返回被选元素的最后一个元素
  • eq() 返回被选元素中带有指定索引号的元素
  • filter() 规定一个标准，不匹配此标准的元素会被从集合中删除，匹配的元素会被返回
  • not() 返回不匹配标准的所有元素