jQuary学习（一）

一、jQuary简介

jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
jQuery 对象就是通过jQuery包装DOM对象后产生的对象

二、寻找元素(重要的选择器和筛选器)

2.1选择器

2.1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")

2.1.2层级选择器 $(".outer div")

$(".outer>div") 在给定的父元素下匹配所有的子元素,只有子

$(".outer+div") 匹配所有紧接在 outer 元素后的 div 元素，有子有孙

$(".outer~div") 匹配 outer元素之后的所有 siblings 元素

2.1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

2.1.4 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')

2.1.5 表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签

$("input:checked")

2.2 筛选器

2.2.1 过滤筛选器

$("li").eq(2) $("li").first() $("ul li").hasclass("test")

2.2.2 查找筛选器

$("div").children(".test") $("div").find(".test")

$(".test").next() $(".test").nextAll() $(".test").nextUntil()

$("div").prev() $("div").prevAll() $("div").prevUntil()

$(".test").parent() $(".test").parents() $(".test").parentUntil()

$("div").siblings()

三操作元素(属性 CSS 和文档处理)

3.1 属性操作

$("p").text() $("p").html() $(":checkbox").val()

$(".test").attr("alex") $(".test").attr("alex","sb")

$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")

$(".test").prop("checked",true)

$(".test").addClass("hide")

3.1 this的两种用法

方法一

<body>

<div id="div" onclick="func1(this)" >hello </div>
<script>
    function func1(self) {
       console.log(self.getAttribute("id"))
    }

</script>
</body>

方法二

<body>

<div id="div" >hello </div>
<script>
    document.getElementById("div").onclick=function () {
        console.log(this.getAttribute("id"))
    }

</script>
</body>

实例

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;}
        #div1{
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            height: 2000px;
            background-color: #b4b4b4;
            z-index: 1000;
        }
        #div2{
            width: 100%;
            z-index:1001;
            position: fixed;
            top:0;
            left: 0;
            right:0;
            bottom: 0;
            background-color: red;
            opacity: 0.1;
        }
        #div3{
            height: 200px;
            width:500px;
            background-color: whitesmoke;
            position:absolute;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -250px;
            z-index:1002;
            border: 1px floralwhite solid;
            border-radius: 10%;
        }
        .hide{
            display: none;
        }
        #div3 input{
            display: inline-block;
            position: absolute;
            right: 25%;
            bottom: 20%;
            width: 100px;
            height: 40px;
        }
    </style>
</head>
<body>
<div id="div1">
    <input type="button" value="click" onclick="show(this)">
</div>
<div id="div2" class="div hide"></div>
<div id="div3" class="div hide">
    <input type="button" value="cancel" onclick="cancel(this)">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    function show(self) {
       $(self).parent().siblings().removeClass("hide");
    }
    function cancel(self) {
        $(self).parent().parent().children("#div2,#div3").addClass("hide");
    }
</script>
</body>
</html>

编辑框正反选

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

     <table border="1" id="Table">
         <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.3.1.min.js"></script>
<script>
    function selectall() {
        $("#Table :checkbox").each(function(){
            $(this).prop("checked",true);
        })
    }
    function cancel() {
        $("#Table :checkbox").each(function(){
            $(this).prop("checked",false);
        })
    }
    function reverse() {
        $("#Table :checkbox").each(function(){
           if ($(this).prop("checked")){
               $(this).prop("checked",false);
           }else{
              $(this).prop("checked",true);
            }
        })
    }


</script>
</body>

table切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .menu li{
            border-right:1px solid red;
            padding:5px;
        }
        .hide{
            display: none;
        }
        .content{
            background-color: beige;
            border: 1px solid gray;
            height: 300px;
        }
        .current{
            background-color: darkgrey;
            color: yellow;
            border-top: solid 2px greenyellow;
        }
    </style>
</head>
<body>

<div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current" onclick="tab(this)">菜单一</li>
              <li xxx="c2" onclick="tab(this)">菜单二</li>
              <li xxx="c3" onclick="tab(this)">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>

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

<script>
    function tab(self){
        $(self).addClass("current").siblings().removeClass("current");
        var cont_id=$(self).attr("xxx");
        $("#"+cont_id).removeClass("hide").siblings().addClass("hide")

    }
</script>




</body>
</html>

3.3 CSS操作

3.2.1(样式) css("{color:'red',backgroud:'blue'}")

3.2.2(位置) offset() position() scrollTop() scrollLeft()

3.2.3(尺寸) height() width()

3.4 文档处理

内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")

prepend() prependTo()

外部插入 before() insertBefore() after insertAfter()

replaceWith() remove() empty() clone()

内部插入

<body>
<input type="text" value="123">
<input type="checkbox" name="hobby">
<p>hello p</p>
<div id="div1">
    <p>hello p</p>
    <p>hello pr</p>
</div>

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

var ele=$("p")
    ele.appendTo($("#div1"))

</script>
</body>

实例 clone方法的应用

<body>

<div id="outer">
    <div id="item">
        <input type="button" value="+" onclick="func1(this)">
        <input type="text">
    </div>
</div>

<script src="jquery-3.3.1.min.js"></script>
<script>
    function func1(self){
        var Clone=$(self).parent().clone();
        Clone.children(":button").val("-").attr("onclick","func2(this)");
        $("#outer").append(Clone);
    }
    function func2(self) {
        $(self).parent().remove();
    }

</script>
</body>

实例，滚动菜单，阅读小说页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .head{
            height: 48px;
            background-color: #336699;
        }
        .menu{
            position: absolute;
            top:48px;
            left: 200px;
            bottom: 0px;
            width: 280px;
            background-color: darkgray;
        }
        .menu a{
            display: block;
        }
        .active{
            background-color: #336699;
            color: white;
        }
        .fafafa{
            position: fixed;
            top:0;
        }

        .content{
            position: absolute;
            left:480px;
            right: 200px;
            bottom: 0;
            top:48px;
            /*overflow: auto;*/   /*加上之后顶部不随滚动条移动*/
            background-color: bisque;
            border:1px solid gray;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="head_menu"></div>
    </div>
    <div id="menu" class="menu">
        <a b="1">第一章</a>
        <a b="2">第二章</a>
        <a b="3">第三章</a>
        <a b="4">第四章</a>
    </div>
    <div class="content">
        <div id="li1" a="1" style="height: 500px;background-color: rebeccapurple"></div>
        <div id="ii2" a='2' style="height: 900px;background-color: #303a40"></div>
        <div           a='3' style="height: 1000px;background-color: #84a42b"></div>
        <div           a='4' style="height: 50px;background-color: #336699"></div>
    </div>
    <div onclick="GoTop()" style="cursor:pointer;position:fixed;right: 0;bottom:0;width: 50px;height: 50px;background-color: #303a40;color: white;border: 1px solid red;" >返回顶部</div>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        function GoTop(){
            //滚动条顶部位置设为0
            $(window).scrollTop(0)
        }
        //窗口内滚动滑轮即触发该方法
        window.onscroll=function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop>48){
                $('#menu').addClass("fafafa");
            }else{
                $('#menu').removeClass("fafafa");
                $('#menu a').removeClass('active');//消除再次回到顶部时，第一章仍然亮的bug
            }
            $(".content").children().each(function(){
                var eleTop = $(this).offset().top; //offset获取元素的顶部位置和左侧位置
                var winTop = eleTop-scrollTop; //实时的元素顶部与窗口顶部距离
                var winBottomTop = eleTop+$(this).height()-scrollTop; //实时的元素底部与窗口顶部距离
                var docHeight = $(document).height();//整个文档的高度
                var winHeight = $(window).height();//整个窗口的高度
                if (docHeight-winHeight == scrollTop){  //如果已经到了底部，直接让最后一章菜单变色
                    $('#menu a:last').addClass("active").siblings().removeClass('active');
                }else{
                   if (winTop<=0 && winBottomTop>0){
                    var a = $(this).attr('a');//找到同样属性值的菜单
                    $("#menu a[b="+a+"]").addClass("active").siblings().removeClass('active');
                    //不再继续检测其他内容了
                    return;
                }
                }

            })
        }
    </script>
</body>
</html>

实例京东轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style-type: none;
        }
        #outer{
            margin: 0 auto;
            margin-top: 50px;
            width: 590px;
            height: 470px;
            position: relative;
        }
        .img li{
            position: absolute;
            top: 0;
            left: 0;
        }
        .num{
            position: absolute;
            width: 100%;
            bottom: 20px;
            text-align: center;

        }
        .num li{
            display: inline-block;
            background-color: #cccccc;
            height: 20px;
            width: 20px;
            color: #ffffff;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            margin: 0 5px;
        }
        .but{
            position: absolute;
            height: 60px;
            width: 30px;
            color: white;
            font-size: 20px;
            background-color: #b4b4b4;
            line-height: 60px;
            text-align: center;
            top: 50%;
            margin-top: -30px;
            display: none;
        }
        .but-l{
            left:0;
        }
        .but-r{
            right: 0;
        }
        #outer:hover .but{
            display: block;
        }
        .num .current{
            background-color: red;
        }

    </style>
</head>
<body>
<div id = 'outer'>
    <div class="img">
        <ul>
            <li><a><img src="img/1.jpg"></a></li>
            <li><a><img src="img/2.jpg"></a></li>
            <li><a><img src="img/3.jpg"></a></li>
            <li><a><img src="img/4.jpg"></a></li>
            <li><a><img src="img/5.jpg"></a></li>
        </ul>
    </div>
    <div class="num">
        <ul>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div class="but-l but"> < </div>
    <div class="but-r but" > > </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    //当鼠标悬浮到底部数字时，数字变红，同时出现相对应的图片
    $('.num li').mouseover(function () {
        $(this).addClass('current').siblings().removeClass('current');
        //通过index能够获得this的索引值
        var index = $(this).index();
        $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
        i = index;
    })
    //图片与数字随时间自动轮播
    var time =setInterval(move,1500); //定义函数，经过1.5s运行move函数
    var i = 0;
    function move() {
        //当轮播到最后一个后，再从头开始
        if (i==4){
            i = -1;
        }
        i++;
        $('.num li').eq(i).addClass('current').siblings().removeClass('current');
        $('.img li').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); //加上stop()，停止其他动画再进行后面的动画
    }
    //定义一个方法，当鼠标悬浮到图片时，停止自动轮播
    $("#outer").hover(function () {
        clearInterval(time);
    },function () {
        time =setInterval(move,1500);
    })
    $(".but-r").click(function () {
        move();
    })
    function moveL() {
        //当轮播到第一个时，再最后开始
        if (i==0){
            i = 5;
        }
        i--;
        $('.num li').eq(i).addClass('current').siblings().removeClass('current');
        $('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
    }
    $(".but-l").click(function () {
        moveL();
    })
</script>
</body>
</html>

posted on 2018-06-15 16:53 11wayne 阅读(154) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

11wayne