javascript ,jquery总结

jQeury顶级对象 缩写$

1、$(document).ready(function(){

})

dom加载完成后触发

window.onload

只能注册一个方法

页面所有内容加载完成后触发（图片，css，js都加载）

缩写

$(function(){

})

2、jQuery对象(包装集) dom对象

var div = document.getElementById("id") dom对象

var div = $(".class") 包装集,对dom对象包装，返回的是很多个dom对象

3、jQeury选择器

$("#id")

$(".class")

$("input")

复合选择器 $("#id,.class,input")

*

4 $(who).when(what) $("#btn").click(function(){})

5、层次选择器

$("div p") 包含选择器 div中所有的p 子元素 子子元素..

$("div > p") 子后代选择器 div中直接子后代

6、常用的方法html() text() val() attr() css() removeAttr()

6.5 节点遍历

next() nextAll()

prev() prevAll()

siblings()

end() andSelf()

7、简单选择器

:first 选取第一个元素 $("div:first")

:last 选取最后一个元素

:not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)")

:even、:odd，选取索引是奇数、偶数的元素

:eq(索引序号)、:gt(索引序号)、:lt(索引序号)

8、设置样式

css()

attr("class","...")

addClass("myclass")(不影响其他样式)

removeClass("myclass")移除样式

toggleClass("myclass")如果存在样式则去掉样式，如果没有样式则添加样式

hasClass("myclass")判断是否存在样式

9、链式编程

$(this).css("background-color", "red").siblings().css("background-color", "white");

---------------------------

10、属性过滤选择器

$("div[id]")选取有id属性

$("div[title=test]")选取title属性为test的元素

$("div[title!=test]")选取title属性不为test的元素

etc....查看帮助

11、表单选择器

$(":input")匹配所有 input, textarea, select 和 button 元素

$(":text")匹配所有 匹配所有的单行文本框

$(":checkbox")匹配所有复选框

etc.....查看帮助

12、动态创建Dom

var link = $("<a href='http://www.baidu.com'>百度</a>");动态创建jquery对象，只是在内存中

$("div:first").append(link); 把动态创建的jquery对象，加到第一个div中

动态创建dom注意：

var some = $("<div >a<p></p>c</div>")

当把动态创建的节点添加到窗体前，不能通过$("#d1")访问到它

必须先把some追加到窗体

$("div:first").append(some);

才可以通过$("#d1") 中找到它

append 把link元素追加到哪$("div:first").append(link);

appendTo link.appendTo("div:first")

在结束标签之前添加元素

prepend

prependTo

在开始标签之后添加元素

after

afterTo

在结束标签外添加元素

before

beforeTo

在开始标签前添加元素

13、删除节点

remove() 删除当前节点

empty() 清空当前节点之间的内容，节点保留

14、*替换节点

$(“br”).replaceWith(“<hr/>”);

15、*包裹节点

wrap()将所有元素逐个用指定标签包裹

----------------------

16、绑定事件

绑定事件 $("#id").bind("click",function(){})

解除绑定 $("#id").unbind("click")

让事件只执行一次 $("#id").one("click",function(){})

合成事件hover toggle

hover(enterfn,leavefn) 当鼠标放上时执行enterfn，当鼠标离开时执行leavefn

toggle(fn1,fn2) 当鼠标第一次点击时执行fn1，第二次点击执行fn2，以后依次执行

17、事件冒泡

mouseover、mouseenter mouseover会事件冒泡，mouseenter不会

mouseout、mouseleave

阻止事件冒泡

$("#d1").click(function(e){ e.stopPropagation();})

18、*事件参数

pageX、pageY

target 获得触发事件的元素

altKey、shiftKey、ctrlKey

keyCode 键盘码、charCode ascii码

19、动画

show()、hide()

toggle() 切换显示隐藏

slideDown、slideUp、 fadeOut、fadeIn

animate 复杂动画