zoukankan      html  css  js  c++  java
  • 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);
    };
  • 相关阅读:
    phpize使用方法
    PHP安装redis扩展
    lnmp 搭建后,nginx下php文件404但是html文件正常访问
    nginx配置https访问安装ssl证书
    Linux安装git最新版本
    微信公众号开发处理微信昵称带图片问题
    如何撰写技术文档
    Asp.Net Core 2.0实现HttpResponse中繁切换
    EF6.0 下sql语句自动生成的参数类型decimal(18,2)修改
    Windows注册表详解
  • 原文地址:https://www.cnblogs.com/fqh123/p/10802192.html
Copyright © 2011-2022 走看看