前端那些事之----jQuery

1.jquery是什么

    一个js的框架,可以方便的使用js

2 什么是jQuery对象

    是由jQuery封装后的DOM对象

    注意:与DOM对象的方法不同,不可以混用,但是可以相互转换

3.基本语法:

    jQuery对象.方法()

4.得到jQuery对象:

        1)选择器:

        基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")

        层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

        基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

        属性选择器 $('[id="div1"]') $('["alex="sb"][id]')

        表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签

                        $("input:checked")

        

    2)筛选器:

    
 

     过滤筛选器

            $("li").eq(2) $("li").first() $("ul li").hasclass("test")

查找筛选器

            $("div").children(".test") $("div").find(".test")

            $(".test").next() $(".test").nextAll() $(".test").nextUntil()

            $("div").prev() $("div").prevAll() $("div").prevUntil()

            $(".test").parent() $(".test").parents() $(".test").parentUntil()

            $("div").siblings()

    

    补充:根据text进行选择:

        $(":contains('搜索工具')")

 

 

5.操作:

属性操作

 

$("p").text() $("p").html() $(":checkbox").val()

 

$(".test").attr("alex") $(".test").attr("alex","sb")

 

$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")

 

$(".test").prop("checked",true)

 

$(".test").addClass("hide")

 

 

    CSS操作

 

(样式) css("{color:'red',backgroud:'blue'}")

 

(位置) offset() position() scrollTop() scrollLeft()

 

(尺寸) height() width()

文档处理

 

内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")

 

prepend() prependTo()

 

外部插入 before() insertBefore() after insertAfter()

 

replaceWith() remove() empty() clone()

 

 

eg:

remove: 移除

$("#cnblogs_post_body > p:nth-child(60) > span > span").remove()

[span, prevObject: init(1), context: document, selector: "#cnblogs_post_body > p:nth-child(60) > span > span"]

 

事件                

     $(document).ready(function(){}) -----------> $(function(){})

 

 

 

$("p").click(function(){})

 

$("p").bind("click",function(){})

 

$("ul").delegate("li","click",function(){})

 

动画效果: 查看http://jquery.cuishifeng.cn/

 

回调函数:

$("p").hide(1000,function(){

alert('动画结束')

})