一.基础
-
入口函数(文档树加载完成就开始执行):
$(document).ready(function() {})
和$(function() {})
-
$就是一个函数:
$()
;$ === jQuery
参数不一样,功能不一样 -
jQuery对象与DOM对象之间的转换,jQuery对象其实就是DOM对象的包装集
-
jquery对象转DOM对象:
var $li = $("li");
通过$li[0]或$li.get(0)获取 -
DOM对象转jquery对象:
var $obj = $(domObj);
$(document).ready(function(){});就是DOM对象转jQuery对象
-
-
基本:
-
$("#id")
ID -
$(".class")
类 -
$("div")
标签 -
$("div,p,li")
并集 -
$("div.redClass")
交集
-
-
层级:
-
$("ul>li")
子代 -
$("ul li")
包括孙子的后代元素
-
-
过滤(带冒号):
-
$("li:eq(2)")
索引号2的li -
$("li:odd")
索引号为奇的li -
$("li:even")
索引号为偶的li
-
-
筛选(类似过滤,用法不一样,是方法):
-
$("ul").children("li")
相当于子代选择器 -
$("ul").find("li")
相当于后代选择器 -
$("#first").siblings("li")
找兄弟不包括自己 -
$("#first").parent()
找父亲 -
$("li").eq(2)
相当于$("li:eq(2)")
-
$("li").next()
找下一兄弟 -
$("li").prev()
找上一兄弟
-
三.操作样式
-
css操作
-
设置单个样式
$("#one").css("background","gray")
-
设置多个
$("#one").css({"width":"400px","height":"200px"})
-
获取样式
$("div").css("background-color")
-
-
class操作
-
添加样式
$("div").addClass("one")
-
移除样式
$("div").removeClass("one")
-
判断有无类
$("div").hasClass("one")
-
切换样式
$("div").toggleClass("one")
-
四.操作属性
-
attr
-
设置单个属性
$("#one").attr("background","gray")
-
移除属性
$("div").removeAttr("one")
-
-
prop
-
对于布尔类型的属性,disabled,selected,checked,只能用prop
-
五.操作节点
-
创建节点
$("<span></span>")
-
添加节点append appendTo prepend prependTo after before
-
清空内容empty
-
删除节点remove
-
克隆节点clone
六.动画
-
三组基本动画
-
基本效果show/hide
-
滑动slideDown/slideUp/slideToggle
-
淡入淡出fadeIn/fadeOut/fadeToggle
-
-
自定义动画
-
$(selector).animate({params},speed,callback);
-
-
停止动画stop
七.特殊属性操作
-
$("#name").val()
:设置和获取表单元素的值input、textarea -
$("div").html()
和$("div").text()
:html方法相当于innerHTML text方法相当于innerText -
$(window).width()
和$("img").height(200)
:设置或者获取高度 -
$(window).scrollTop()
和$(window).scrollLeft()
:设置或者获取垂直滚动条的位置 -
$(selector).offset()
和$(selector).position()
:offset方法获取元素距离document的位置,position方法获取的是元素距离有定位的父元素的位置。
八.事件机制
-
简单事件绑定(不能同时注册多个):click(handler)
-
bind事件绑定(不支持动态事件绑定):
$("p").bind("click mouseenter", function(){//事件响应方法})
-
delegate事件绑定:
$(".parentBox").delegate("p", "click", function(){//为.parentBox下面的所有的p标签绑定事件});
-
on事件绑定(推荐):
-
注册简单事件(由自己触发不支持动态绑定):
$(selector).on( "click", function() {})
-
注册委托事件:
$(selector).on( "click","span", function() {})
给$(selector)绑定代理事件,它内部元素span才能触发这个事件,支持动态绑定
-
-
事件解绑:
-
$(selector).unbind("click")
-
$( selector).undelegate( "click" )
-
$(selector).off("click")(推荐)
-
-
事件触发:
$(selector).click()
、$(selector).trigger("click")
-
事件对象
-
screenX和screenY距离屏幕最左上角的值
-
clientX和clientY距离页面左上角的值(忽略滚动条)
-
pageX和pageY距离页面左上角的值(会计算滚动条的距离)
-
event.keyCode按下的键盘代码
-
event.data存储绑定事件时传递的附加数据
-
event.stopPropagation()阻止事件冒泡
-
event.preventDefault()阻止浏览器默认行为
-
return false既能阻止事件冒泡,又能阻止浏览器默认行为
-
九.补充
-
链式编程:end()//改变jQ对象的DOM对象,回复到上一次状态,并返回匹配元素之前的状态
-
each()方法:遍历对象,操作匹配元素
-
多库共存:
var c = $.noConflict();//释放的控制权,并且把$的能力给了c
十.插件
-
常用插件:jquery.color.js支持颜色的渐变、jquery.lazyload.js懒加载插件、jquery.ui.js官方维护的UI方向的插件......
-
制作插件(给jquery对象增加一个新的方法,让jquery对象拥有某一个功能):
$.fn.pluginName = function() {}//给$.fn添加方法就能扩展jquery对象