jquery最快速入门文档

选择器

1. id

    $('#id')

2. class

    <div class="c1"></div>

    $(".c1")

3. 标签  

    <div class="c1">

        <a>f</a>

        <a>f</a>

    </div>

    <div class="c1">

        <a>f</a>

    </div>

    <div class="c2"></div>

    $("a")

4. 组合

   <div class="c1">

        <a>f</a>

        <a>f</a>

    </div>

    <div class="c1">

        <a>f</a>

    </div>

    <div class="c2"></div>

    <div id="i10"></div>

    $("a")

    $('a,.c2,#i10')

5. 层级   

<div id="i10' class="c1">

    <a>f<a>

    <div><a>f<a></div>

</div>

$('#i10 a')子子孙孙都找到

$('#i10>a')儿子  

6. 基本  

    ：first

    ：last

    :eq()

7.属性  

    $('[wj]') 具有wj属性的所有标签

    $('[wj="wangjian"]') wj属性等于wangjian的标签

    $("input[type='text']")==$(':text')



jQuery方法内置循环： ￥（’#tb:checkbox').xxxx

$('#tb:checkbox').each(function(k){

    //k当前索引  

    //this.Dom,当前循环的元素

}

var v = 条件 ? 真值 : 假值

筛选器

$(this).next();获取当前标签的下一个标签

$(this).nextAll();获取当前后的所有标签

$('#i1').nextUntil('#ii1');获取从#i1的标签到#ii1的标签

$(this).prev();获取当前标签的上一个标签  

$(this).prevAll();获取当前标签以前的所有标签

$('#i1').prevUntil('#ii1');获取从#i1的标签到#ii1的标签

$(this).parent();获取当前标签的父标签

$('#i1').parents()

$('#i1').parentsUntil()

$(this).children();获取当前标签的子标签

$(this).siblings();获取当前标签的所有兄弟标签  

$(this).find('.class/#id');在当前标签下子标签中找符合条件的标签

给标签添加删除样式  

$(this).addClass('样式')

$(this).removeClass('样式')

first()

last()

hasClass('样式')

文本操作

$(..).text()           # 获取文本内容

$(..).text(“<a>1</a>”) # 设置文本内容

$(..).html()

$(..).html("<a>1</a>")

$(..).val()

$(..).val(..)

        $(..).val(..)

样式操作：

    addClass

    removeClass

    toggleClass

属性操作：

    专们用于做自定义属性

    $(..).attr('n')

    $(..).attr('n','v')

    $(..).removeAttr('n')

    <input type='checkbox' id='i1'  />

    专们用于chekbox,radio

    $(..).prop('checked')

    $(..).prop('checked', true)

    PS: 

        index 获取索引位置

文本操作

    append

    prepend

    after

    before

    remove

    empty

    clone

css处理

        $('t1').css('样式名称', '样式值')

        点赞：

             - $('t1').append()

             - $('t1').remove()

             - setInterval

             - 透明度 1 》 0

             - position

             - 字体大小，位置

位置

$(window).scrollTop()获取

$(window).scrollTop(0)设置

$('div').scrollTop()获取div滑动高度

scrollLeft([val])与scrollTop作用相同

offset().left      指定标签在html中的坐标

offset().top       指定标签在html中的坐标

position()   指定标签相对父标签(relative)标签的坐标

<div style='relative'>

            <div>

                <div id='i1' style='position:absolute;height:80px;border:1px'></div>

            </div>

        </div>

$('i1').height()           # 获取标签的高度 纯高度

$('i1').innerHeight()      # 获取边框 + 纯高度 + ？

$('i1').outerHeight()      # 获取边框 + 纯高度 + ？

$('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？

纯高度，边框，外边距，内边距

事件

Dom:三种绑定方式

jQuery:

    $('.c1').click()

    $('.c1')....好多事件，去掉了on

    $('.c1').bind('click',function(){})

    $('.c1').unbind('click',function(){})

    $('.c').delegate('a','click',function(){})

    $('.c').undelegate('a','click',function(){})

$('.c1').on('click',function(){})<br/>
$('.c1').off('click',function(){})<br/>

阻止事件发生

return false阻止后面的事件发生，把事件拦截住

当页面框架加载完成之后，自动执行

            $(function(){



                $(...)



            })

jQuery扩展

第一种扩展

$.extend({'wj':function(){return 'nb';}})

var v=$.wj();

alert(v);

第二种扩展

$.fn.extend({'wj':function(){return nb}});

var v=$('#i1').wj();*必须有标签选择器

alert(v)

第三种

(function(arg){

    var status=1;

    //封装变量

    arg.extend({'wj':function(){ return 'nb';}});  
 
})(jQuery/$)