Juery入门2

1.Jquery操作文档

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

<div class="c1">
    <p>pppp</p>
</div>

<button id="btn1">add</button>
<script src="jquery-1.12.4.min.js"></script>
<script>

    //jquery文档处理
    //内部插入
    $("#btn1").click(function (){
        //$(".c1").append("<h1>123</h1>");
        var $ele=$("<h1>hello</h1>");
        $ele.text("tang");
        $ele.css("color","red");
        //$(".c1").append($ele); 在元素的子元素后面添加元素
        //$ele.appendTo(".c1");
        
        //$(".c1").prepend($ele);//在元素的子元素前面添加元素

        //$ele.prependTo($(".c1"))
        

        //外部插入
        //$(".c1").after($ele);//兄弟标签向下插入
        //$ele.insertAfter(".c1")

        // $(".c1").before($ele);兄弟标签向上插入
        //$ele.insertBefore(".c1");
    

    //替换
        //$("p").replaceWith($ele)

    //删除与清空
    //$(".c1").empty();//清空元素内容

    //$(".c1").remove();//删除元素及元素内容
    
    //clone 复制
    
    var $c1=$(".c1").clone()
    $(".c1").after($c1);

    })

    


//外部插入



</script>
</body>
</html>

2.clone属性使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

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

<script src="jquery-1.12.4.min.js"></script>

<script type="text/javascript">
    function add(self){
        //var $clone_obj=$(".outer .item").clone();
        var $clone_obj=$(self).parent().clone()//克隆父级item属性
        $clone_obj.children("button").html("-").attr("onclick","del_obj(this)");//修改克隆父级属性下面的button内容以及添加事件
        $(".outer").append($clone_obj);
    }

    function del_obj(self){
        $(self).parent().remove()
    }
</script>

</body>
</html>

3.Jquery模态对话框

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .content{
            height: 1800px;
            background-color: pink;
        }

        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.5;
            //opacity 透明度
        }
        
    .model{
        width: 200px;
        height: 200px;
        background-color: bisque;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;

        /*height: 50%*/
    }

    .hide{
        display: none;
    }
    </style>

</head>
<body>

<div class="content">
    <button onclick="func(this)">show</button>
    
</div>
<div class="shade hide"></div>
<div class="model hide">
    <button onclick="cancel(this)">show</button>
</div>


<script src="jquery-1.12.4.min.js"></script>
<script>
function cancel(self) {
    // $(self).parent().addClass("hide").prev().addClass("hide");
    //prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
    $(self).parent().parent().children(".model,.shade").addClass("hide");
}


function func(self) {
    //siblings返回所有兄弟节点
    $(self).parent().siblings().removeClass("hide");
    // console.log(123)

}


</script>
</body>
</html>

4.Jquery事件操作

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="jquery-1.12.4.min.js"></script>
    <script>
    //页面加载完后再执行 事件准备就绪加载方式一
        $(document).ready(function(){
            $("ul li").html(5);
        })

    //事件准备就绪加载方式二
        $(function(){

        })
        
        //window.onload=function(){}
        
        
    </script>
</head>

<body>

<ul>

    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>

</ul>

<button>add</button>
<script src="jquery-1.12.4.min.js"></script>
<script>

/*$("doucmunet").ready()*/
    //$("ul li").html(5);



    // $("ul li").click(function(){
    //     alert("666");
    // })
    
    //当script元素集合绑定事件时必须要进行循环绑定
    //jquery会帮我们自动循环绑定事件
    
    //绑定事件
    // $("ul li").bind("click",function(){
    //     alert(123)
　　　//只针对当前元素里的内容进行绑定,不包括DOM添加的内容

    // })
    
    //on事件维托
    // $("ul").on("click","li",function(){
    //     alert(123)
　　//只要是在本元素内的元素都可以进行绑定

    // })





    // $("button").click(function(){
    //     // var $ele="<li>555</li>"
    //     // $("ul").append($ele);
            
    //         var $ele=$("<li></li>");
    //         var i=$("ul li").length
    //         $ele.html((i+1)*1111);
    //         $("ul").append($ele);
    // })

    //解绑事件
    //$("ul li").unbind("click");
</script>

</body>
</html>

5.JQuery--scrollTop方法

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0;
        }

        .div2{
            width: 100%;
            height: 800px;
        }

        .div1{
            height: 150px;
            width: 40%;
            background-color: yellow;
            overflow: auto;
        }

        .div2{
            background-color: green;
        }

        .returnTop{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 90px;
            height: 50px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 50px;

        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="div1">
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
</div>
<div class="div2">
    <button onclick="returnTop()">return</button>
</div>

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

<script src="jquery-1.12.4.min.js"></script>
<script>

     window.onscroll=function () {
　　　//监听垂直滚动条
    //     console.log($(window).scrollTop());
        if($(window).scrollTop()>300){
        $(".returnTop").removeClass("hide");
    }

    else{
        $(".returnTop").addClass("hide");
    }
    
    }
    

    function returnTop(){
         $(window).scrollTop(0)
        //$(".div1").scrollTop(0);
    }

    $(".div2 button").click(function(){
        $(".div1").scrollTop(0)
    })

</script>
</body>
</html>

6.Jquery-拓展

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<p>11</p>
<p>22</p>
<p>33</p>

<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    // $.each(obj,function (argument) {
    //     // body...
        
    // })


    // $("").each(function(){

    // })

    //添加自定义函数
    //直接调用方法
    // $.extend({
    //     Myprint:function(){
    //         alert("hello");
    //     }
    // })

    // $.Myprint();


//先加标签再调用方法
    $.fn.extend({
        GetText:function(){
            // console.log(this)
            // this再这里指的是调用对象的集合
            // for (var i = 0;i<this.length;i++) {
            //     console.log(this[i].innerHTML)
            //     }
            // }
            // 
            
            $.each($(this),function(x,y){
                console.log($(y).innerHTML);
            })
    }
})

    $("p").GetText()
</script>
</body>
</html>

7.Jquery-offset方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0;
        }

        .div1,.div2{
            width: 200px;
            height: 100px;
        }

        .div1{
            border: 3px solid red;
            padding: 20px;
            background-color: yellow;
        }

        .div2{
            background-color: green;
            position: relative;
            left: 20px;
        }

        .outer{
            /*//position: relative;*/


        }
    </style>
</head>
<body>

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

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


<script src="jquery-1.12.4.min.js"></script>
<script>


    //css操作

    //offset()相对于视口的偏移量
    // console.log($(".div1").offset().top);
    // console.log($(".div1").offset().left);

    // console.log($(".div2").offset().top);
    // console.log($(".div2").offset().left);

    //position():相对于已经定位的父标签的偏移量
    console.log($(".div1").position().top);
     console.log($(".div1").position().left);

     console.log($(".div2").position().top);
    console.log($(".div2").position().left);

    // console.log($(".div1").height("300px"))只包括元素内容区大小
    // console.log($(".div1").width())
    
    // console.log($(".div1").innerHeight())//包括padding的大小
    // console.log($(".div1").innerWidth())

    // console.log($(".div1").outerWidth())//包括padding，border的大小
    // console.log($(".div1").outerHeight())



</script>

</body>
</html>

8.JQuery动画

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

<p>一段文章</p>

<button id="hide">hide</button>
<button id="show">show</button>

<script src="jquery-1.12.4.min.js"></script>

<script>
    // $("p").html("123")
    //$("p").hide();//隐藏显示的元素
    // $("p").show([s,[e],[fn]);显示隐藏的元素

    // $("p").toggle() 如果元素是可见的，切换为隐藏的，如果元素是隐藏的，切换为可见的

    /* speed
    * 可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。
    可能的值：
    毫秒 （比如 1500）
    "slow"
    "normal"
    "fast"
    在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。
    *
    * $(selector).slideDown(speed,callback)
    *
    * 可选。slideDown 函数执行完之后，要执行的函数。
    如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。
    除非设置了 speed 参数，否则不能设置该参数。
    *
    * */


    $("#hide").click(function () {
        $("p").slideUp(1000)//向上滑动
    });

    $("#show").click(function () {
        $("p").slideDown()//向下滑动
    })

</script>

</body>
</html>

猜你喜欢