jquery文章链接

好文链接

1、jQuery是js的一个库，封装了js中常用的逻辑；
2、调用jQuery：
    （1）、本地调用，在script标签的src属性里写上jQuery文件的地址。
    （2）、使用CDN调用jQuery：
        如：https://code.jquery.com/jquery-3.0.0.min.js
3、确认jQuery版本号的方法：
    $:fn.jquery；或$（）.jquery；
4、jquery选择器：
        标签名选择元素：$("a");
        样式名选择元素：$(".title");
        通过id名选择元素：$("#box");
        CSS选择器在jquery里都适用；
5、jquery属性选择器：
        $("[href]");选取所有带有href属性的元素。
        $("[href='#']");选取所有href属性值等于#的元素。
        $("[href!='#']");选取所有href属性值不等于#的元素。
        $("[href$='.jpg']");选取所有href值以".jpg"结尾的元素。
6、jquery常用的过滤选择器：
        :first  选择第一个元素
        :last       选择最后一个元素
        :even   选择偶数元素
        :odd   选择奇数元素
        :eq(index)   选择对应的下标元素
        :gt(index)   选择下标大于指定下标的元素
        :lt(index)   选择下标小于指定小标的元素
        :not(selector)   选择不是此选择器的元素
        jquery选择器可以以各种方式组合使用。
7、jquery中等页面加载完再读取script的方法：
        $(document).ready(function(){...})或者$(function(){...});
8、jquery获取文档信息的方法：
        text（）；获取或设置对象的文本信息；
        html（）；获取或设置对象的子节点；
        val（）；获取或设置表单对象的值；
9、jquery创建标签的方法：
        $("<p></p>");还未添加在页面中
10、jquery添加节点的方法：
        prepend（）；将指定节点添加到对象内部的开头；
        append（）；将指定节点添加到对象内部的结尾；
        after（）；将指定节点添加在对象外部的后面；
        before（）；将指定节点添加在对象外部的前面；

        prependTo（）；需添加的内容写在前面，括号内写上对象。
        appendTo（）；同理
        insertAfter（）；同理
        insertBefore（）；同理
11、jquery删除节点的方法：
        remove（）；删除节点；
        empty（）；删除对象的子节点；使对象变空；
12、jquery样式操作：
        addClass（）；添加样式
        removeClass（）；删除class
        hasClass（）；检测是否有指定的class样式
        toggleClass（）；如果有指定的class样式就去除，如果没有，就添加上。
13、jquery属性操作：
        attr（）；添加或返回指定的属性值。
        removeAttr（）；删除指定的属性值。
14、jquery   css操作：
        $("p").css("font-size")；获取p标签的字体大小；
        $("p").css("font-size","16px");设置p标签的字体大小；
        $("p").css({"font-size":"16px"，"background":"white"});设置多个样式
        css操作函数
        width();height();offset();返回或设置对象的宽度、高度、与x、y坐标（px）
15、jquery遍历操作：
    向上遍历：
        parent（）；代表对象的父亲。
        parents（）；代表对象的所有祖父元素。
    向下遍历：
        find（）；获取对象的没一个子孙后代。
        children（）；获取对象的直接子元素。
    同级遍历：
        siblings（）；获取对象的所有同辈元素。
        next（）；获取对象的下一个同辈元素。
        nextAll（）；获取对象的下边的所有同辈元素。
        prev（）；获取对象的上一个同辈元素；
        prevAll（）；获取对象上边的所有同辈元素。
16、jquery中的事件：
    绑定事件：
        直接绑定：$(selector).click(function(){...});
        bind（）：$(selector).bind('click',function(){...});可绑定多个事件,不能帮定动态元素
        live（）；$(selector).live('click',function(){...});事件绑定在document上，而不是元素,可绑定动态元素.
        on（）；前面绑定方法的综合，兼容性强。在1.9版本之后整合了前三种方法.

    移除事件：
        unbing（）；对应bind（）；
        die（）；对应live（）；
        off（）；对应on（）；

    鼠标事件：
        mouseover/mouseenner:鼠标覆盖在对象上。 mouseenner比较常用
        mouseout/mouseleave:鼠标离开对象。mouseleave比较常用
        mousedown:鼠标的某个键被按下
        mousemove:鼠标在对象上移动
        mouseup:鼠标的按键被松开
        click:单击鼠标
        dblclick:双击鼠标

    键盘事件：
        keydown：键盘被按下
        keypress：键盘按下并松开
        keyup：键盘松开

    表单事件：jquery表单事件中无reset事件
        focusin/focus:表单获得焦点
        focusout/blur:表单失去焦点
        change:表单内容被改变
        submit:表单被提交，加在form上
        select:表单内容被选中，只对input、textarea有效
17、jquery特效
    显示        隐藏      切换           效果
    show();      hide();     toggle();        直接显示或隐藏对象
    fadeIn();     fadeOut();  fadeToggle();     逐渐的显示或隐藏对象
    slideDown();  slideUp();  slideToggle();     滑动的显示或隐藏对象
18、jquery自定义动画：
    关键词：animate
    用法：
        $("#btn").click(function(){
            $("#box").animate("top",0)
            $("#box").animate({"top":300,"left":200})
        })
    后面还可以跟上持续时间和回调函数。
19、动画停止：
    stop（"stopAll","GoToEnd"）
        stopAll：表示是否让动画全部停止，如果为false，即只停止当前动画
        gotoend：表示是否让动画停止时立即完成，如果为false时，即不立即完成。
20、jquery-ajax
    $.ajax({
        type:"get",
        url:"json3.json",
        async:true,
        data:{},向后台传输数据
        dataType:"json",
        success:suc,
        error:function(){}
    });
    //解析后台数据
    function  suc(){
    var  sum="";
    $.each(msg.function(i,v){//给获取到的每条后台数据加函数
        console.log(i+"........."+v);    i代表索引  v代表值
        var  str=var str="<li><img src="+v[1]+" alt='' /></li>";
        sum+=str;
    });
    $(".c1 ul").html(sum);
};