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 id='d1'>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 复杂动画