• Python web前端 09 jQuery


    Python web前端 09 jQuery

    一、三个重要网址

    http://jquery.cuishifeng.cn/ #中文查询网站
    http://www.bootcdn.cn/ #引入jq
    http://api.jquery.com/ #官网
    
    #jQuery是一种新的JavaScript库;jq是js写的,能用jq实现的,js都能实现;js能实现的,jq有些不能实现。
    
    #jQuery   $ 符号传字符串、选择器、尖括号标签的形式、函数、对象(object)
    
    #jq的API只对自己开放,jq不能用js的API,js也不能用jq的API
    
    #jQuery引入方法
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> #通过网页引入
    
    <script src="jquery.js"></script> #将代码复制到本地,通过本地连接引入
    
    #验证是否已引入
    $(function(){alert(1);})#在一个新的script里面验证弹窗

    二、jQuery

     获取元素

    var oBox=document.getElementById("#box");  #js获取元素
    oBox.innerHTML="div++";        #js修改元素
    
    var $box=$("#box");  #jq获取id元素
    $box.html="div++";   #jq修改元素
    $box.html("<em>div++</em>");#加粗内容
    
    var $p=$("p");#jq获取标签

      jq、js的互相转换

    js---->jq
    var oBox=document.getElenmentById("box");
    oBox.innerHTML="888";
    $(oBox).html("999");#在js对象前加个$符号即可将js转化为jq
    
    jq---->js
    var $p=$("#box p");
    $p.html("999");
    $p[2].innerHTML="666";#在jq对象后面加个索引(转化为js)的后缀即可转化
    $p.get(2).innerHTML="666";#这种方法(转化为js)也可以
    
    jq----->特定的jq
    var $p=$("#box p");
    $p.eq(1).html("888");#仍然是jq
    js---->jq
    var oBox=document.getElenmentById("box");
    oBox.innerHTML="888";
    $(oBox).html("999");#在js对象前加个$符号即可将js转化为jq
    
    jq---->js
    var $p=$("#box p");
    $p.html("999");
    $p[2].innerHTML="666";#在jq对象后面加个索引(转化为js)的后缀即可转化
    $p.get(2).innerHTML="666";#这种方法(转化为js)也可以
    
    jq----->特定的jq
    var $p=$("#box p");
    $p.eq(1).html("888");#仍然是jq

      jq的遍历

        <div id="box">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
        </div>
        <script  src="jQuery.js"></script>
        <script>
            $("#box p").each(function (i) {
                this.innerHTML="我是第"+i+"";用js方法完成遍历
                $(this).html("我是第"+i+"")#用jq方法完成遍历
            });
        </script>

      jq操作属性

    attr #设置、获取 标签属性
    removeattr   #移除标签属性
    
    addClass
    removeClass
        #传class 移除你传的那个
        #没有     移除全部
    toggleClass #有就删除没有就添加
    #操作class类名
      jq             js
    html()     innerHTML
    text()      innerTEXT
    val()        value
    
    #在jq里面,设置某个值的时候一般都是自带遍历,获取某个值的时候一般都是获取第一个
    
        <div id="box" class="box">
            <p class="on">1</p>
            <p class="show">2</p>
            <p>3</p>
        </div>
        <script  src="jQuery.js"></script>
        <script>
            var $box=$("box");
            $box.attr("class","xiaopo");#添加class="xiaopo",将原来的class覆盖掉
            $box.attr("py","xp");#添加py="xp"
            $box.removeAttr("class");#移除所有class
            $box.addClass("box1 box2");#在原有的基础上,给class添加个一个box1、box2,(不删除原class)
            $box.removeClass("box1");#只移除其中一个class "box1"
            $("#box p").toggleClass("on");#原来有class "on"的没有了,原来没有的现在有了
            $("#box p").html("999");#在设置值的时候一般自带遍历
            alert($("#box p").html());#在获取值的时候一般获取第一个
        </script>

      jq操作样式

    .css()
    .width()
    .height()
    
    innerWidth()/innerHeight #算了padding
    outerWidth()/outerHeight #算了padding加border
    
    offset()  #该对象有top、left属性,代表到浏览器窗口的top、left的值
    
    position()  #该对象有top、left的值,代表到定位父级的top、left的值
    
    
        <script src="jQuery.js"></script>
        <script>
            var $box=$("#box");
            $box.css("height","300px");#操作单个属性
            $box.css({
                "width":"200px",
                "height":"200x",
                "background":"red"
            });       #用键值对的形式操作多个属性
            alert($box.width());#盒子本身的宽度300
            alert($box.height());#盒子本身的高度200
            alert($box.innerWidth());#盒子宽度+padding400
            alert($box.innerHeight());#盒子高度+padding300
            alert($box.outerWidth());#盒子宽度+padding+border420
            alert($box.outerHeight());#盒子高度+padding+border420
            alert($("#box").offset().top);#盒子距离顶部的距离
            alert($("#box").offset().left);#盒子距离左边的距离
            alert($("#box").position().top);#盒子距离父级顶部的距离 
            alert($("#box").position().left);#盒子距离父级左边的距离
        </script>

      scroll滚动条

    <script>
            $(document).click(function () {
                console.log("滚动高度"+$(this).scrollTop());#这是获取高度
            });
            console.log("滚动宽度"+$(this).scrollLeft()); #这是获取宽度
    
            $(document).click(function () {
                $(this).scrollTop(1000);#这是设置高度
                $(this).scrollLeft(500);#这是设置宽度
            });
    
        </script>

      append prepend 添加子元素

    #添加子元素 可以是标签、本文、js对象、jq对象
    append 
    prepend
    
    appendTo
    prependTo
    
    <div id="box">
            <p>我是本来的p</p>
        </div>
        <b id="box1">我是外面的b标签</b>
        <script src="jQuery.js"></script>
        <script>
            $("#box").append("<em>ahh</em>");#在p标签的后面添加
            $("#box").prepend("<em>ahh1</em>");#在p标签的前面添加
            var oB=document.getElementById("box1");
            $("#box").append(oB);#将外面的b标签移动到前面div里面去了
            $("#box").append($(oB));#相同效果
            $("<em>ahh</em>").appendTo("#box");#跟上面意义一样
        </script>

      筛选

    eq
    
    hasClass #检查当前的元素是否含有某个特定的类,如果有,返回true,否则返回false
    children #找儿子,可以不传参
    find       #不传参,默认不找;传参的话就找符合参数的后代
    parent   #不需要参数
    parents("show") #找到名字叫做show的先祖
    siblings #不传参,所有兄弟;传参,所有的兄弟按照参数筛选出合格的
    
    <body>
        <div id="box" class="show">
            <p>1</p>
            <p class="box1">2</p>
            <div>
                <p>3</p>
                <p>4</p>
            </div>
        </div>
        <script src="jQuery.js"></script>
        <script>
            alert($("p").hasClass("box2"));#检查p标签是否含有class "box2" 返回false
            console.log($("#box").children());#查找#box下面的所有儿子标签,传参的时候找儿子标签某某
            console.log($("#box").find("p"));#查找#box下面的所有后代标签p,不传参的时候不找
            console.log($("p").parent());找出所有p标签的爸爸
            console.log($("p").parents());#一次p标签找出所有的祖宗
            console.log($("p").parents(".show"));#找出class为show的祖宗
            $("p").sibling().css("color","red");#将p标签的所有兄弟的样式都改便
            $("p").sibling(".box1").css("color","red");#将p标签所有的class为box1的兄弟改变样式
        </script>
    </body>
    </html>

      事件

    <body>
        <ul id="box">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <script src="jQuery.js"></script>
        <script>
            var oBox=document.getElementById("box");
            oBox.onclick=function () {
                alert(1);
            };
            oBox.onclick=function () {
                alert(2);
            };#js里面的事件都是以赋值的形式,所以前面的函数被覆盖了,只会弹出 2
    
            $("#box").click(function () {
                alert(1);
            });#这是jq里面的事件
            $("#box").click(function () {
                alert(2);
            });#jq里面的事件是以绑定的形式,所以会弹出1和2
    
            #绑定单个事件
            $("li").on("clink",function () {
                alert($(this).index());#index() 在jq里面是方法(快速获取对应下标)
            });
            
            #绑定多个事件
            $("#box").on(
                {
                    "clink":function () {
                        console.log("惦记我");
                    },
                    "mouseenter":function () {
                        console.log("一处啦")
                    },
                    "mouseleave":function () {
                        console.log("啦啦啦")
                    }
                }
            );
    
            #移除事件
            $("#box").off();#如果不传参,就会将所有事件都移除
            $("#box").off("mouseenter");#移除单个鼠标移入事件
    
            #hover
            $("#box").hover(function () {
                console.log("ahh");#不管鼠标移入还是移出都会打印这个ahh
            });
            $("#box").hover(function () {
                console.log("ahh") #鼠标移入打印ahh
            },function () {
              console.log("hhh")  #鼠标移出打印hhh
            });
        </script>
    </body>    

    二、动画

    show   hide   toggle  #不传参,瞬间显示隐藏;传一个数字,代表毫秒数,改变宽、高、透明度
    
    fadeIn   fadeOut   fadeTo(1000,0.1)  #默认事件300毫秒,改变透明度,可以吧透明度设置成一个值,时间参数不能省略
    
    slideDown  slideUp   slideToggle  #默认时间300毫秒,改变高度
    
    #这三组不仅仅可以接受一个数字参数,能接受的数字如下:
    number/string #代表动画时间(可缺省)毫秒数(fast normal slow)
    string  #代表运动曲线(可缺省)
    function #代表回调函数(可缺省)
    <body>
        <div id="box">
    
        </div>
        <script src="jQuery.js"></script>
        <script>
            var $box=$("#box");
            $(document).click(function () {
                $box.hide(2000);#如果不传参,就瞬间小时;传了,就有动画效果得两秒后消失
            });
    
            var off=true;#用于判断图像是否存在
            $(document).click(function () {
                if(off){#如果存在,就让他消失
                    $box.hide(2000);
                }else{#否则,就让他出现
                    $box.show(2000);
                }
                off=!off;#为了使再点一下的时候让他出现,取一下反
            });
    
            $(document).click(function () {
                $box.toggle(2000);#这个就是综合了上面那个函数
            });
    
    
            var off=true;
            $(document).click(function () {
                if(off){
                    $box.fadeIn(2000);#宽高并没有变化,只是改变透明度
                }else{
                    $box.fadeOut(2000);
                }
                off=!off;
            });
    
            $(document).click(function () {
                $box.fadeTo(1000,0.5);#
            });
    
            var off=true;
            $(document).click(function () {
                if(off){
                    $box.slideUp(2000);#透明度并没有变化,只是改变高度
                }else{
                    $box.slideDown(2000);
                }
                off=!off;
            });
    
            $(document).click(function () {
                $box.slideToggle(1000,0.5);#只改变高度
            });
        </script>
    </body>

     三、补充

      添加兄弟元素

    <body>
        <div id="box">555</div>
        <script src="jQuery.js"></script>
        <script>
            var $box=$("#box")
            $box.append("<b>hahahaha<b>");#添加子元素
            $box.before("<b>hahahaha<b>");#在元素前加兄弟元素
            $box.after("<b>hahahaha<b>");#在元素后加兄弟元素
        </script>
    </body>

      wrap

    wrap #给每个元素添加一个父元素
    unwrap  #删除元素的父元素
    wrapAll  #给子元素添加一个父元素都包起来
    wrapInner #给元素内的内容添加一个标签
    
    <body>
        <div id="box">
            <p>1</p>
            <span>01</span>
            <p>2</p>
            <span>02</span>
            <p>3</p>
            <span>03</span>
        </div>
        <script src="jQuery.js"></script>
        <script>
            $("#box p").wrap("<div></div>");#给个p元素添加一个div标签
            $("#box p").unwrap();$删除p元素的父级元素
            $("#box p").wrapAll("<div></div>>");#将p元素全部包起来然后添加到同一个父级元素
            $("#box p").wrapInner("<b></b>>");#给p里面的内容添加b标签
        </script>
    </body>

      empty

    empty  #清空子节点
    remove #移除自己(不保留数据和事件)
    detach #移除自己(保留数据和事件)
    
    <body>
        <div id="box">
            <p class="box1">1</p>
            <p class="box2">2</p>
            <p class="box3">3</p>
        </div>
        <script src="jQuery.js"></script>
        <script>
            $("#box").empty();#清除#box目录下的所有子元素及所有后代
            $("#box .p").remove(".box2"); #移除名字叫.box2的p标签的所有内容,包括自己;如果不传参就是移除所有p标签(包括自身)
            $("#box p").detach(".box1");#移除名字叫.box2的p标签的所有内容,包括自己
        </script>
    </body>

      animate

    animate
    #传参 
    obj  #必传  {}格式代表的变化的属性和目标值,数值变化
    number/string  #可缺省  代表毫秒数 或者三个预设好的值,默认为300毫秒
    string   #可缺省,代表运动曲线,默认jQuery提供“linear”和“swing”
    function #可缺省,代表动画结束后的回调函数
    
    <body>
        <div id="box"></div>
        <script src="jQuery.js"></script>
        <script>
            var $box=$("#box");
            $box.animate({
                "width":"300px",
                "height":"300px",
                "margin-left":"200"
                },2000);#自定义动画样式
        </script>
    </body>

      stop

    stop
    #清空动画队列,可以接受两个布尔值参数
    #第一个不用管,第二个决定是否瞬间到达队列终点,true表示到,false表示不到(默认)
    
    <body>
        <div id="box">
            <ul>
                <li>lucky</li>
                <li>tuple</li>
                <li>which</li>
                <li>xiaopo</li>
                <li>budong</li>
            </ul>
        </div>
        <script src="jQuery.js"></script>
        <script>
            $("#box ul li").hover(function () {
                    $(this).stop(true,true).animate({"height": "400px"});#加了stop就能够清除队列,马上到达终点
                },function () {
                    $(this).stop(true,true).animate({"height": "50px"});
                }
            )
        </script>
    </body>

      delay

    <body>
        <div id="box"></div>
        <script src="jQuery.js"></script>
        <script>
            $(document).clink(function () {
                $("#box").fadeOut();#点击完马上消失
                $("#box").delay(5000).fadeOut();#点完过5秒才消失,延迟消失,只对动画有效
            });
    
            $("#box").delay(5000).queue(function () {
                $(this).css("background","red");#如果想要delay对样式生效,要用这个
            })
        </script>
    </body>
  • 相关阅读:
    第03组 Beta冲刺(1/4)
    第03组 Alpha事后诸葛亮
    第03组 Alpha冲刺(4/4)
    第03组 Alpha冲刺(3/4)
    第03组 Alpha(2/4)
    第03组 Alpha冲刺(1/4)
    第03组团队Git现场编程实战
    第二次结对编程作业
    团队项目-需求分析报告
    第01组 Beta冲刺(3/5)
  • 原文地址:https://www.cnblogs.com/xuchengcheng1215/p/8782758.html
Copyright © 2020-2023  润新知