JQuery

JQuery:

    $("p").html() 获取ID为test的元素内的html代码。

    $("p").html("Hello<b>world</b>") 设置p标签的内容

    基本选择器：$("*"),$("#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]')

    表单选择器：$("[type='text']"),$(":text"),$("input:checked")

    内容选择器：$(":contains('Hello')")所有包含文本'hello的元素'

                $("div:has(p)") 所有包含有<p>的<div>元素

                $(":empty") 所有空元素

    过滤：hasClass(class) 检查当前的元素时否含有某个特定的class

    属性操作：

        1.$("img").attr("src") //获取src属性的值

        2.$("img").attr({"src":"test.jpg",alt:"Test Image"}) //设置属性值

        3.$("img").removeAttr("src") //删除属性

        4.$(":checkbox").prop("checked") //类似于attr，该方法针对布尔值类型的属性

    css类：

        $("p").addClass("selected") //添加class属性

        $("p").removeClass("selected") //移除class属性

        $("p").toggleClass("selected") //如果不存在就添加，如果存在就移除

   

CCS:

    .css("color") :获取 color css值

    .css("color","#ff0000") :设置值

    .css({"color":"red","display":"None"}) :设置多个值

    offset():获取匹配元素在当前窗口的相对偏移,返回两个int,(top,left)

    position():获取匹配元素相对父元素的偏移，返回两个int,(top,left)

    scrollTop():获取匹配元素相对于滚动条顶部的偏移

    $(window).scrollTop(0):设置距离滚动条顶部的距离为0，也就是说回到顶部

    scrollLeft():获取匹配元素现对于滚动条左边的偏移

    height():获取匹配元素的自身高度

    获取匹配元素的自身宽度

    evnet.clientX: 获取当前鼠标在窗口的X位置

    event.clientY: 获取当前鼠标在窗口的Y位置

    cursor:move: 光标显示可移动状态

    mouseover: 光标移动到上面

    box-shadow: 5px 5px 10px #888888;   阴影

   

Find:

    children()    返回被选元素的所有直接子元素

    closest()    返回被选元素的第一个祖先元素

    contents()    返回被选元素的所有直接子元素（包含文本和注释节点）

    next()    返回被选元素的后一个同级元素

    nextAll()    返回被选元素之后的所有同级元素

    nextUntil()    返回介于两个给定参数之间的每个元素之后的所有同级元素

    parent()    返回被选元素的直接父元素

    parents()    返回被选元素的所有祖先元素

    parentsUntil()    返回介于两个给定参数之间的所有祖先元素

    prev()    返回被选元素的前一个同级元素

    prevAll()    返回被选元素之前的所有同级元素

    prevUntil()    返回介于两个给定参数之间的每个元素之前的所有同级元素

    slibings()   返回被选元素的所有同级元素

   

JQuery对象和DOM对象:

    jquery转DOM:

        1.jquery对象是一个数组对象，通过index的方法得到相应的DOM

            var $cr = $('#cr') //jquery对象

            var cr = $cr[0] //DOM对象

        2.通过get(index)方法获取相应的DOM

            var $cr = $('#cr')  //JQuery对象

            var cr = $cr.get(0) //DOM对象

    DOM转jquery:

        var cr = document.getElementById('cr'); //DOM对象

        var $cr = $(cr);

val 属性：

    input:获取输入的内容

    checkbox:获取的是value的值

    select:单选获取单值，多选获取数组

    $(":text").val() 获取文本内容

    $(":text").val('Hello world') 设置文本内容

    $("#multiple").val(["multiple1","multiple2"]) //设置select 多选值

     

文档操作：

    A.append(B) :把B添加到A中元素的后面

    A.appendTo(B):把B剪切到A中元素的后面

    A.prepend(B):把B添加到A中元素的前面

    A.prependTo(B):把B剪切到A中元素的前面

    外部插入：

        A.after(B):把B添加到A前面

        A.insertAfter(B):把B插入到B的前面

        A.before(B):把B添加到A的后面

        A.insertBefore(B):把B插入到A的后面

    包裹：A.wrap(B) B包A

    替换：A.replaceWith(B) B替换A

          A.replaceAll(B) B全替换A

    删除：

        empty()：清空，内部清空

        remove(): 整体删除

        detach(): 剪切，多保存在变量中，方便再次使用

    克隆：clone()

   

动画：

    基本：

        show()显示

        hide()隐藏

        toggle()触发，reverse操作

    滑动：

        slideDown()滑入

        slideUP()滑出

        slideToggle()触发滑动

    淡入淡出：

        fadeIn()

        fadeOut()

        fadeTo(0.2) 淡出到0.2的透明度

        fadeToggle() 触发淡入淡出的效果

      

jQuery扩展：

    <script>

        jQuery.extend({

          min: function(a, b) { return a < b ? a : b; },

          max: function(a, b) { return a > b ? a : b; }

    });

        jQuery.min(2,3); // => 2

        jQuery.max(4,5); // => 5

    </script>