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>