1. 首页
  2. JAVASCRIPT
  3. jquery事件对象 , 链式编程,选择器和过滤器,动画;js和jquery互转

jquery事件对象 , 链式编程,选择器和过滤器,动画;js和jquery互转

•JavaScript•阅读 3575

1.使用jquery.js(开发环境)或者jquery.min.js(生产环境下使用)

使用第一步 :

1.引包 .<script src="jquery.js"></script>

2.使用入口函数:

　　$(document).ready(function(){ }); 基本写法

　　$(function(){ }); 简写 , 功能一样

三步走:

　　1.事件对象: $(选择器)返回的是jquery对象

　　2.js转jquery $(js对象)

　　 jquery转js $(选择器)[0]

　　 小心this

　　3.jquery链式编程 : 每次返回jquery对象 , 例 : $(this).css({"backgroundColor":"green","width":"300px"}).attr("id","box");

　　4.jquery的筛选选择器和基本过滤器:

　　siblings 选中兄弟元素,除了自己,使用它来做选项卡,排他思想;

　　5.jquery的动画:

　　　　show() , hide() , slideDown() , slideUp() , fadeIn() , fadeOut() , animate()自定义动画;

代码练习 :

1.锚点值跳转

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<div ;
                break;
            default:
                break;
        }
    }
</script>
</body>
</html>

2.-client -offset -scroll

-client内容 clientTop(border边框的高度) clientLeft(border边框的宽度) clientWidth(盒子的宽度去掉border的宽度的值) clientHeight(盒子的高度减去border宽度的值)

<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<title>Title</title>-->
    <!--<style>-->
        <!--.box{-->
            <!--width:200px;-->
            <!--height:200px;-->
            <!--position:absolute;-->
            <!--border:30px solid red;-->
            <!--/*margin:10px 0 0 0;*/-->
            <!--padding:80px;-->
        <!--}-->
    <!--</style>-->
<!--</head>-->
<!--<body>-->
    <!--<div class="box">-->
        <!--哈哈哈哈哈啊哈哈哈哈呵呵呵呵呵呵或或或或或或或或或或或或或或-->
        <!--或或或或或或或或或或或或或或或呵呵呵呵呵呵或或或或或或或或或或或或或或或或或或或-->
        <!--或或或或或或或或或或或或或或呵呵呵呵呵呵或或或或或或或或或或或或-->
        <!--呵呵呵呵呵呵或或或或或或或或或或或或或或呵呵呵呵呵呵或或或或或或或或或或或或或或或或或或或或-->
        <!--或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或-->
        <!--呵呵呵呵呵呵或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或-->
        <!--或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或-->
    <!--</div>-->
    <!--<script>-->
 <!--// clientTop 内容区域到边框顶部的距离,说白了就是边框的高度-->
        <!--// clientLeft 内容区域到边框左部的距离,说白了就是边框的宽度-->
        <!--// clientWidth 内容区域+左右padding 可视宽度不包含border-->
        <!--// clientHeight 内容区域+上下padding 可视高度 不包含border-->
        <!--var oBox=document.getElementsByClassName("box")[0];-->
        <!--console.log(oBox.clientTop);-->
        <!--console.log(oBox.clientLeft);-->
        <!--console.log(oBox.clientWidth);-->
        <!--console.log(oBox.clientHeight);-->
    <!--</script>-->
<!--</body>-->
<!--</html>-->

-offsetWidth(盒子的宽度) offsetHeight(盒子的高度) offsetTop(盒子距离参考点顶部的距离) offsetLeft(盒子距离参考点左边的距离)

<!--<!doctype html>-->
<!--<html>-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<title>Document</title>-->
    <!--<style>-->
        <!--*{-->
            <!--padding:0;-->
            <!--margin:0;-->
        <!--}-->
        <!--.wrap{-->
            <!--width:300px;-->
            <!--height:300px;-->
            <!---->
            <!--margin-top:50px;-->
            <!--margin-left:50px;-->
            <!--position:relative;-->
        <!--}-->
        <!--.wrap #box{-->
            <!--width:200px;-->
            <!--height:200px;-->
            <!--border:5px solid red;-->
            <!--top:50px;left:30px;-->
            <!--padding:10px;-->
            <!--position:absolute;-->
        <!--}-->
    <!--</style>-->
<!--</head>-->
<!--<body>-->
    <!--<div>-->
        <!--<div class="wrap">-->
            <!--<div >        <!--// 如果父盒子设置了相对定位,以父辈盒子为基准-->
        <!--console.log(box.offsetTop);-->
        <!--console.log(box.offsetLeft);-->
        <!--console.log(box.offsetWidth);-->
        <!--console.log(box.offsetHeight)-->
    <!--}-->
<!--</script>-->
<!--</html>-->

-scroll(监听事件) s.scrollTop(监听的高度) s.scrollLeft(监听宽度) scrollHeight : 内容的高度 + padding scrollWidth :内容的宽度 + paddi<!doctype html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        div{
            height:200px;
        }
    </style>
</head>
<body >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div > //scrollTop卷起的高度
            //     console.log("上"+document.documentElement.scrollTop);
            //     console.log("左"+document.documentElement.scrollLeft);
            //     console.log("宽"+document.documentElement.scrollWidth);
            //     console.log("高"+document.documentElement.scrollHeight)
            // };
            var s=document.getElementById("scroll");
            s.onscroll=function(){
// scrollHeight:内容的高度+padding  不包含边框
                console.log("上"+s.scrollTop);
                console.log("左"+s.scrollLeft);
                console.log("宽"+s.scrollWidth);
                console.log("宽"+s.clientWidth);
                console.log("高"+s.scrollHeight);
            }
        }
    </script>
</body>
</html>

3.固定导航栏:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration:none;
        }
        input{
            border:0;
            outline:none;
        }
        .header{
            width:100%;
            height:70px;
            background-color:black;
            /*display:none;*/
        }
        .w{
            width:1210px;
            overflow:hidden;
            margin:0 auto;
        }
        .header ul li{
            float:left;
            width:242px;
            height:70px;
            line-height:70px;
            text-align:center;
            background-color:blue;
        }
        .header ul li a{
            display:block;
            width:242px;
            height:70px;
            color:#fff;
        }
        /*固定导航栏*/
        .header-fix{
            width:100%;
            height:80px;
            background-color:white;
            box-shadow:0 0 5px #888;
            display:none;
            position:fixed;
            top:0;
            left:0;
            z-index:999999;
            /*margin-bottom:10px;*/
        }
        .header-fix .logo{
            float:left;
            width:117px;
            height:57px;
            padding-top:23px;
        }
        .header-fix .fm{
            float:left;
            width:700px;
            height:80px;
            margin-left:100px;
        }
        .fm input[type="text"]{
            float:left;
            width:578px;
            height:50px;
            border-top:1px solid #999;
            border-left:1px solid #999;
            border-bottom:1px solid #999;
            margin-top:15px;
            padding-left:20px;
            font-size:20px;
        }
        .fm input[type="submit"]{
            float:left;
            width:100px;
            height:52px;
            background-color:#38f;
            position:relative;
            top:15px;
            color:#fff;
            line-height:52px;
            font-size:18px;
        }
        .box1{
            width:100%;
            height:200px;
            background-color:red;
        }
        .box2{
            width:100%;
            height:300px;
            background-color:green;
        }
    </style>
</head>
<body >
    <div class="header">
        <div class="w">
            <ul>
                <li><a href="#">网站导航</a></li>
                <li><a href="#">网站导航</a></li>
                <li><a href="#">网站导航</a></li>
                <li><a href="#">网站导航</a></li>
                <li><a href="#">网站导航</a></li>
            </ul>
        </div>
    </div>
    <div class="header-fix">
        <div class="w">
            <div class="logo">
                <img src="1.jpg" alt="">
            </div>
            <form class="fm">
                <input type="text" name="">
                <input type="submit" name="" value="百度一下">
            </form>
        </div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>
    <!--javscript:void(0); 阻止默认事件-->
    <a href="javscript:void(0);">百度</a>
</body>
<script>
    window.onload =function(){
        var box2Height=document.getElementsByClassName("box2")[0];
        var fixBox=document.getElementsByClassName("header-fix")[0];
        var headerBox=document.getElementsByClassName("header")[0];
 // onscroll是在元素轴滚动时触发的。window.onscroll或document.onscroll是在浏览器滚动条滚动时触发的
        window.onscroll=function(){
            console.log(box2Height.offsetTop);
            console.log(document.documentElement.scrollTop)
 // scrollTop卷起的高度
            // offsetTop:单独设置该盒子(子)为定位和没有定位 那么是到body顶部的距离
        // 如果父盒子设置了相对定位,以父辈盒子为基准
            if(document.documentElement.scrollTop >=box2Height.offsetTop){
                fixBox.style.display="block";
                document.body.style.paddingTop="80"+"px";
            }else{
                fixBox.style.display="none";
                document.body.style.paddingTop="0"+"px";
                headerBox.style.diaplay="block";
            }
        }
    }
</script>
</html>

4.使用jquery:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <!--<div class="box"></div>-->
    <script src="jquery.js"></script>
    <script>
        // window
        // console.log($)
        // 入口函数 window.onload
        // consloe.log(document);
        // jquery对象
        // console.log($(document));
        // 1.jquery的入口函数 文档加载完成之后 1.文档加载 2.图片加载
        // $(document).ready(function(){
        //     alert(1);
        // });
        // $(document).ready(function(){
        //     alert(2);
        // })
// 2.入口函数2 简便写法 一定要写
        $(function(){
            // 1.事件对象  2.事件   3.事件驱动
            // console.log($(".box"));
            $(".box").click(function(){
 // 添加一个属性的写法
                // $("#box").css("background-color","green");
                // 添加多个属性的写法,用字典的方式
                // $("#box").css({
                //     "backgroundColor":"green",
                //     "width":300
                // });
                // jquery转化js对象
                // console.log($(".box")[0]);
                // $("#box")[0].style.backgroundColor="green";
                // console.log(this);
                // js对象转化jquery对象 $(js对象)就可以使用jquery的属性和方法
                // console.log($(".box"));
                // console.log($(this));
                // console.log($(this)[0]);
// this.css 没有此方法,会报错的Uncaught TypeError: this.css is not a function
                // jquery链式编程
                $(this).css({
                    "backgroundColor":"green",
                    "width":300
// attr 是jquery里的方法,添加id
                }).attr("id","box");
                // console.log(this);
                // console.log($(this).css({
                //     "backgroundColor":"green",
                //     "width":300
                // }))
 // hide是隐藏,里面的参数是时间,1000毫秒,等于1秒
                $(this).hide(1000)
            })
        })
    </script>
</body>
</html>

5.选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box"><h3>alex1</h3></div>
    <div class="box">alex2</div>
    <div class="box">alex3</div>
    <div ).eq())
        })
    </script>
</body>
</html>

6.jquery的排他思想

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<ul>-->
        <!--<li>-->
            <!--<button>按钮1</button>-->
        <!--</li>-->
        <!--<li>-->
            <!--<button>按钮2</button>-->
        <!--</li>-->
        <!--<li>-->
            <!--<button>按钮3</button>-->
        <!--</li>-->
        <!--<li>-->
            <!--<button>按钮4</button>-->
        <!--</li>-->
    <!--</ul>-->
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            $("button").click(function(event){
排他思想的关键 siblings
   $(this).css("backgroundColor","red").siblings("button").css("backgroundColor","white")
            })
            // $("button").click(function(event){
//链式编程
                // $(this).css("backgroundColor","red").parent().siblings("li").children("button").css("backgroundColor","white")
            // })
        })
    </script>
</body>
</html>

7.选项卡

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div )
            })
        })
    </script>
</body>
</html>

8.jquery中的动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:300px;
            height:300px;
            background-color:red;
            display:none;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <div class="box"></div>
    <script src="./jquery.min.js"></script>
    <script>
        $(function(){
            // var isHide=true;
            // $("button").click(function(){
            //     if(isHide){
            //         $(".box").stop().show(1000,function(){
            //             alert("alex");
            //         });
            //         isHide=false;
            //     }else{
            //         $(".box").stop().hide(1000);
            //         isHide=true;
            //     }
            // })
            $("button").click(function(event){
//解决延迟效果



            })


        })


    </script>


</body>


</html>

9.自定义动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position:absolute;
            left:20px;
            top:30px;
            width:100px;
            height:100px;
            background-color:green;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        jQuery(function(){
            $("button").click(function(){
                var json={"width":500,"height":500,"left":300,"top":300,"border-radius":100};
                var json2={
                    "width":100,
                    "height":100,
                    "left":100,
                    "top":100,
                    "border-radius":100,
                };
//animate是自定义动画
                $("div").animate(json,1000,function(){
                    // $("div").css("backgroundColor","red");
                    $("div").animate(json2,2000,function(){
                        // alert("动画执行完毕")
                    })
                    $("div").css("backgroundColor","red")
                })
            })
        })
    </script>
</head>
<body>
    <button>自定义动画</button>
    <div></div>
</body>
</html>

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。