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);
};