jquery_2

1jquery进阶

1.1jquery属性操作之html,text,,val方法

//-----------------------------------------------属性
    $("").attr();
    $("").removeAttr();
    $("").prop();
    $("").removeProp();
//-----------------------------------------------css类
    $("").addClass(class|fn)
    $("").removeClass([class|fn])
//-----------------------------------------------HTML代码/文本/值
    $("").html([val|fn])
    $("").text([val|fn])
    $("").val([val|fn|arr]) //val()针对固有属性是val的值操作
//----------------------------------------------
    $("").css("color","red")

固有属性，常用prop()

自我定义属性，常用attr()

标签内部涉及到html的，可用html()操作

标签内部是纯文本，可用text()操作

批处理某一个标签里的文本值

$("div").css("color","red")

或者对特定文本进行操作

$("div").css({"color":"red","background-color":"grey"})

1.2jquery循环方法之attr和prop方法

jquery方法用数组替换标签中的内容

<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>

<script src="jquery-3.5.0.js"></script>
<script>
    arr=[11,22,33];
    for(var i=0;i<arr.length;i++){
        // $("p").html(arr[i])
        $("p").eq(i).html(arr[i])
    }
</script>

jquery实现正反选

预备：

<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>

<script src="jquery-3.5.0.js"></script>
<script>
arr=[11,22,33]
for(var i=0;i<arr.length;i++){
    $("p").eq(i).html(arr[i]) //用数组内容替换p标签内容
}

//jquery中的each使用两种方法
//遍历标签的两种方法
//方式一，jquery遍历数组，x-索引，y-内容值
$.each(arr,function(x,y){
    console.log(x);
    console.log(y);      
})

//方式二 遍历标签
$("p").each(function(){  
    console.log($(this))   //$(this)用来找标签集合
    $(this).html("hello")  //用().html("xxx")把p标签中的内容替换成统一
})
View Code

正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>

<hr>
    <table border="1px">
        <tr>
            <td><input type="checkbox"></td>
            <td>111</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>222</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>333</td>
        </tr>
         <tr>
            <td><input type="checkbox"></td>
            <td>444</td>
        </tr>
    </table>

<script src="jquery-3.5.0.js"></script>
<script>
    function selectAll(){
        $(":checkbox").each(function(){
            $(this).prop("checked",true) //prop操作固有属性
        })
    }

     function cancel(){
        $(":checkbox").each(function(){
            $(this).prop("checked",false)
        })
    }

    function reverse(){
        $(":checkbox").each(function(){
            if($(this).prop("checked")){
                $(this).prop("checked",false)
            }
            else{
                $(this).prop("checked",true)
            }
        })
    }

</script>
</body>
</html>
View Code

1.3jquery模态对话框与clone的应用

<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>

<script src="jquery-3.5.0.js"></script>
<script>
    arr=[11,22,33];
    for(var i=0;i<arr.length;i++){
        // $("p").html(arr[i])
$("p").eq(i).html(arr[i])
    }
</script>

利用jquery模拟登陆/取消界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 1800px;
            background-color:white;
        }
        .shade{
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:black;
            opacity:0.3;
        }
        .models{
            width:200px;
            height:200px;
            background-color:white;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>

<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>

<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>

<script src="jquery-3.5.0.js"></script>
<script>
    function action1(self){
        $(self).parent().siblings().removeClass("hide");
    }

    function action2(self){
        $(self).parent().addClass("hide").prev().addClass("hide");
        // $(self).parent().prev().addClass("hide");
        // $(self).parent().parent().children(".models,.shade").addClass("hide");
    }
</script>
</body>
</html>
View Code

文档处理

内部(子级)插入

append,appendTo

$(".c1").append($ele);
$ele.appendTo(".c1");  //同$(".c1").append($ele)，添加的hello Yu在PPP后面
$(".c1").prepend($ele);  //添加的hello Yu在PPP前面
$ele.prependTo(".c1") //同$(".c1").prepend($ele)

外部(同级)插入

$(".c1").after($ele) //与p标签同级插入
$ele.insertAfter(".c1") //同$(".c1").after($ele)
$(".c1").before($ele);
$ele.insertBefore(".c1")

替换

$("p").replaceWith($ele)

删除与清空

$(".c1").empty();
$(".c1").remove(); //与empty区别在于是否remove移除了标签,
empty仅做删除操作，类比excel：empty=delete,remove=backspace

克隆：增加和删除标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="outer">
    <div class="item">
        <button onclick="add(this)">+</button>
        <input tpye="text">
    </div>
</div>

<script src="jquery-3.5.0.js"></script>
<script>
    function add(self){
        // var $clone_obj=$(".item").clone();
        var $clone_obj=$(self).parent().clone();
        $clone_obj.children("button").html("-").attr("onclick","remove_obj(this)");
        $(".outer").append($clone_obj);
    }

    function remove_obj(self){
        $(self).parent().remove()
    }
</script>
</body>
</html>
View Code

css操作

$("").css(name|pro[,val|fn]}

位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])

尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
View Code

使用jquery返回顶部

window.onscroll = function(){}用法

window.onscroll = function (e) {
    //当页面的滚动条滚动时,会执行这里的代码 
}

$(window).scrollTop()滚轮当前位置

console.log($(window).scrollTop())打印当前位置的像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .div1,.div2{
            width:100%;
            height:800px;
        }
        .div1{
            background-color:antiquewhite;
        }
        .div2{
            background-color:rebeccapurple;
        }
        .returnTop{
            position:fixed;
            right:20px;
            bottom:20px;
            width:90px;
            height:50px;
            background-color:grey;
            color:white;
            text-align:center;
            line-height:50px;
        }
    </style>
</head>
<body>

<div class="div1"></div>

<div class="div2"></div>

<div class="returnTop hide" onclick="returnTop()">返回顶部</div>

<script src="jquery-3.5.0.js"></script>

<script>
    window.onscroll=function(){
        console.log($(window).scrollTop());
        if($(window).scrollTop()>100){
            $(".returnTop").removeClass("hide")
        }else{
            $(".returnTop").addClass("hide")
        }
    }
    function returnTop(){
        $(window).scrollTop(0)
    }

</script>
</body>
</html>
View Code

1.3jquery事件绑定和事件委托

时间绑定之点击add增加数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

<button onclick="function()">
    add
</button>
<script src="jquery-3.5.0.js"></script>
<script>

    $("ul li").bind("click",function(){  //bind()功能同click()
        alert(123)
    });
    
    $("button").click(function(){
        var $ele=$("<li>");
        var len=$("ul li").length;
        $ele.html(len+1);
        $("ul").append($ele);
    })
</script>
</body>
</html>
View Code

初级版绑定方法

    $("ul li").bind("click",function(){  //bind()功能同click()
        alert(123)
    });

    $("button").click(function(){
        var $ele=$("<li>");
        var len=$("ul li").length;
        $ele.html(len+1);
        $("ul").append($ele);
    });

中级版绑定方法

    $("ul").on("click","li",function(){ //先放事件，不是委托事件
       alert(123);
    });

    $("button").click(function(){
        var $ele=$("<li>");
        var len=$("ul li").length;
        $ele.html(len+1);
        $("ul").append($ele);
    });

用数字5替代其他列表标签如<li>1111<li>

    $("ul").on("click","li",function(){ //先放事件，不是委托事件
       alert(123);
    });

    $("button").click(function(){
        var $ele=$("<li>");
        var len=$("ul li").length;
        $ele.html(len+1);
        $("ul").append($ele);
    });

1.4动画效果

  • 状态的显示，隐藏和切换（无js效果时，显示静态）

    <button onclick="f1()">出现</button>
    <button onclick="f2()">隐藏</button>
    <button onclick="f3()">切换</button>

    <script src="jquery-3.5.0.js"></script>
    <script>
        function f1(){
            $("div").show();
        }
        function f2(){
            $("div").hide();
        }
        function f3(){
            $("div").toggle(); //toggle内部有两个函数即show()和hide()
        }
View Code

点击按钮可以切换状态。

  • 下拉幕方式，显示，隐藏和切换（无js效果时，显示静态）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.0.js"></script>
    <script>
    $(document).ready(function(){
        $("#slideDown").click(function(){
            $("#content").slideDown(1000);
        });
        $("#slideUp").click(function(){
            $("#content").slideUp(1000);
        });
        $("#slideToggle").click(function(){
            $("#content").slideToggle(1000);
        })
    });
    </script>

    <style>
        #content{
            text-align:center;
            background-color:lightblue;
            border:solid 1px red;
            display:none;
            padding:50px;
        }
    </style>
</head>
<body>
    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">切换</div>

    <div id="content">hello world</div>

</body>
</html>
View Code
  •  淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.0.js"></script>
    <script>
        $(document).ready(function(){
            $("#in").click(function(){ // 找到标签绑定函数
                $("#id1").fadeIn(1000); //对字段样式进行操作
            });
            $("#out").click(function(){
                $("#id1").fadeOut(1000);
            });
            $("#toggle").click(function(){
                $("#id1").fadeToggle(1000);
            });
            $("#fadeto").click(function(){
                $("#id1").fadeTo(1000, 0.4);
            })
        })
    </script>
</head>
<body>

    <button id="in">fadein</button>
    <button id="out">fadeout</button>
    <button id="toggle">fadetoggle</button>
    <button id="fadeto">fadeto</button>

    <div id="id1" style="display:none; width:80px; height:80px; background-color:blueviolet"></div>

</body>
</html>
View Code
  • 回调函数（在执行完本段代码后，执行function()函数）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            text-align:center;
            background-color:lightblue;
            border:solid 1px red;
            display:none;
            padding:50px;
        }
    </style>
</head>
<body>
    <div id="content">hello world</div>

    <button onclick="f1()">出现</button>
    <button onclick="f2()">隐藏</button>
    <button onclick="f3()">切换</button>

    <script src="jquery-3.5.0.js"></script>
    <script>
        function f1(){
            $("div").show(1000,function(){
                alert(123)
            });

        }
        function f2(){
            $("div").hide(1000,function(){
                alert(456)
            });
        }
        function f3(){
            $("div").toggle(1000,function(){
                alert(789)
            }); //toggle内部有两个函数即show()和hide()
        }
     </script>
</body>
</html>
View Code

1.5jquery扩展与插件

$.extend(object) //为jquery添加一个静态方法

$.fn.extend(object) //为jquery实例添加一个方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.5.0.js"></script>
    <title>Title</title>
</head>
<body>

<p>111</p>
<p>222</p>
<p>333</p>

<script>

    $.extend({
        Myprint:function(){
            console.log("hello")
        }
    });

    $.fn.extend({
        GetText:function(){
            console.log($(this).html())
        }
    });

    $("p").GetText()

</script>

</body>
</html>
View Code

遍历标签对象的一种方式，以name对象进行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul>
    <li name="li1">1111</li>
    <li name="li2">2222</li>
    <li name="li3">3333</li>
    <li name="li4">4444</li>
</ul>

<!--<button onclick="function()">-->
    <!--add-->
<!--</button>-->
<script src="jquery-3.5.0.js"></script>
<script>
    //事件准备，加载方式完后再执行代码
    // $("ul li").html(5);

    //事件委托
    // $("ul li").html(5)
    // $("ul li").bind("click",function(){  //bind()功能同click()
    //     alert(123)
    // });
    // $("ul").on("click","li",function(){ //先放事件，不是委托事件
    //    alert(123);
    // });
    $("li[name^='li_']").each(function(i){
        var name=$(this).attr("name")
    })
</script>
</body>
</html>
View Code

jquery循环遍历的两种写法：jquery对象和js对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.5.0.js"></script>
    <title>Title</title>
</head>
<body>

<p>111</p>
<p>222</p>
<p>333</p>

<script>

    $.extend({
        Myprint:function(){
            console.log("hello")
        }
    });

    $.fn.extend({
        GetText:function(){
            // for(var i=0;i<this.length;i++){
            //     console.log(this[i].innerHTML) //this就代表数组
            // }
            $.each($(this),function(x,y){
                console.log($(y).html());  //jquery对象写法
                // console.log(y.innerHTML); //js对象
            })
        }
    });

    $("p").GetText() //$.fn.extend扩展首先需要写GetText()

</script>

</body>
</html>
View Code

 

posted on 2020-04-24 21:25  yukun093  阅读(168)  评论(0)  编辑  收藏  举报

导航