web篇---jQuery

一.jQuery是什么

<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

二.什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()    
       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

三 .寻找元素（选择器和筛选器）

3.1选择器

3.1.1基本选择器

$("*")   $("#id")   $(".class")   $("element")   $(".class,p,div")

3.1.2层次选择器

$(".outer div")   $(".outer>div")   $(".oute+div")   $(".outer~div")

3.1.3基本选择器

$("li:first")   $("li:eq(2)")   $("li:even")   $("li:gt(1)")

3.1.4属性选择器

$("[id='div1']")   $("['alex'='sb'][id]")

3.1.5表单选择器

$("[type='text']")------->$(":text")    注意适用于input标签： $("input:checked")

选择器示例：

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



</head>
<body>



<p id="p1">PPP</p>

<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div>DIV</div>

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

<script>
        //  $("#p1")  ------>jquery对象

//        var ele=document.getElementById("p1");  //ele----->  DOM对象
//
//        console.log(ele.innerHTML);
//        console.log($("#p1").html());  //   jquery对象与DOM对象下的方法和属性不能混用



//======================选择器


       // $("#p1").css({"color":"red","fontSize":"35px"});


        //JS实现批量处理
//    var eles_div=document.getElementsByClassName("c1");
//
//    for (var i=0;i<eles_div.length;i++){
//
//        eles_div[i].style.color="green"
        
//
//    }

     //  Jquery实现的批量处理
    // $(".c1").css("color","green")

     // $("div").css("background-color","gold")


    // $("*").css("color","green")

</script>

</body>
</html>

View Code

3.1.6 表单属性选择器

    :enabled
    :disabled
    :checked
    :selected

<body>

<form>
    <input type="checkbox" value="123" checked>
    <input type="checkbox" value="456" checked>


  <select>
      <option value="1">Flowers</option>
      <option value="2" selected="selected">Gardens</option>
      <option value="3" selected="selected">Trees</option>
      <option value="3" selected="selected">Trees</option>
  </select>
</form>


<script src="jquery.min.js"></script>
<script>
    // console.log($("input:checked").length);     // 2

    // console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1

    $("input:checked").each(function(){

        console.log($(this).val())
    })

</script>


</body>

View Code

3.2 筛选器

3.2.1 过滤筛选器

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

3.2.2 查找筛选器　　

 查找子标签：         $("div").children(".test")      $("div").find(".test")  
                               
 向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()     
                    $(".test").nextUntil() 
                           
 向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()       
                    $("div").prevUntil()   

 查找所有兄弟标签：    $("div").siblings()  
              
 查找父标签：         $(".test").parent()              $(".test").parents()     
                    $(".test").parentUntil()

导航方法：

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

<div class="c1">
    <div class="c3">
        DIV
        <div class="c4">

            <p class="p1">P1</p>
        </div>
    </div>
    <p>P2</p>
</div>


[.c4,.c3,]
<div class="c1">
    <p class="item" id="d1">p3</p>
    <p class="item">p3</p>
    <p class="item">p3</p>
    <p class="item" id="d4">p3</p>
    <p class="item">p3</p>
</div>



<div id="c1" egon="123"></div>



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


    // jquery支持链式操作

    //==========================================找兄弟标签
    //next

    // $("#d1").next().css("color","red").next().css("color","green");
    //$("#d1").nextAll().css("color","red");
    //$("#d1").nextUntil("#d4").css("color","red");

    //prev



    //siblings

    //$("#d4").siblings().css("color","red");

//==================================================  find:找所有后代     children：找所有子代

    // $(".c1").children("p").css("border","1px solid red");

     //$(".c1").find("p").css("border","1px solid red")



// ===============================================找父标签
//    console.log($(".p1").parent().parent().attr("class"))
//    console.log($(".p1").parents().attr("class"))
      //$(".p1").parents().css("color","red")
      //$(".p1").parentsUntil(".c1").css("border","1px solid red")




</script>

</body>
</html>

View Code

层级选择器：

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

<div class="outer">
    <div class="inner">
        <p>p3</p>
        <div>DIV</div>
    </div>
    <p>p2</p>

</div>

<p>p1</p>


<ul class="box">

    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
    <li class="item">666</li>

</ul>




<div egon="sb">egon</div>
<div egon="sb" class="c1">egon2</div>


<input type="text">
<input type="text">
<input type="text">
<input type="checkbox">

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

    // $(".outer>p").css("color","red")

//======================筛选器
    // $(".box .item:eq(5)").css("color","red")
    // $(".box .item:lt(4)").css("color","red")
    // $(".box .item:gt(3)").css("color","red")
    // $(".box .item:odd").css("color","red")

    // $(".box .item:gt(1):eq(3)").css("color","red")

    // ==================属性选择器

    // $("[egon='sb'][class]").css("color","red")

    //  针对input表单
    //$("[type='text']").css("border","1px solid red");


    //$(":text").css("border","1px solid green");
    
    
    //var x=3;
    
    //$("ul li:eq(x)").css("color","red");

    //$("ul li").eq(x).css("color","red");   // 推荐写法
</script>

</body>
</html>

View Code

四操作元素(属性，css，文档处理)

4.1 事件

页面载入

ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})

事件绑定

//语法:  标签对象.事件(函数)    
eg: $("p").click(function(){})

事件委派：

$("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<hr>
<button id="add_li">Add_li</button>
<button id="off">off</button>

<script src="jquery-3.2.1.js"></script>
<script>
    $("ul li").click(function(){
        alert(123)
    });

    $("#add_li").click(function(){
        var $ele=$("<li>");
        $ele.text(Math.round(Math.random()*10));
        $("ul").append($ele)

    });


//    $("ul").on("click","li",function(){
//        alert(456)
//    })

     $("#off").click(function(){
         $("ul li").off()
     })
    
</script>

事件绑定

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


<ul id="box">
    <li class="item">111</li>
    <li class="item">111</li>
    <li class="item">111</li>
    <li class="item">111</li>
    <li class="item,m46">111</li>

</ul>

<button class="add">ADD</button>
<button class="releave">off</button>

<script src="jquery-3.2.1.js"></script>
<script>
    // 一个标签对象.on事件=function(){}

    // 一个jquery对象（集合对象）.事件（function(){}）
//
//     $(".item").click(function () {
//         alert(123)
//     });



    //  on方法实现的事件委派（新添加的也有上面所有的功能）

    $("#box").on("click",".item",function () {
        //alert($(this).html());
        alert($(this).index());
    });


     $(".add").click(function () {
         $("#box").append("<div class='item'>444</div>")
     });


     // off 方法
    $(".releave").click(function () {
        // 绑定哪个jquery对象就接触哪个对象
       $("#box").off("click")
    });








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

View Code

事件切换

hover事件：

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test{

             200px;
            height: 200px;
            background-color: wheat;

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


<div class="test"></div>
</body>
<script src="jquery.min.js"></script>
<script>
//    function enter(){
//        console.log("enter")
//    }
//    function out(){
//        console.log("out")
//    }
// $(".test").hover(enter,out)


$(".test").mouseenter(function(){
        console.log("enter")
});

$(".test").mouseleave(function(){
        console.log("leave")
    });

</script>
</html>

View Code

4.2 属性操作

--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])

--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();

--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])

---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见



<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。


//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true

    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

View Code

4.3 each循环

我们知道，

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

是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦

jquery支持两种循环方式：

方式一

格式：$.each(obj,fn)

li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
    console.log(i,x)
});

方式二

格式：$("").each(fn)

$("tr").each(function(){
    console.log($(this).html())
})

其中,$(this)代指当前循环标签。

each扩展以及示例

<body>

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



<script>
// ------------   方式1  $.each(obj,callback)


//    var arr=[111,222,333];
//    var  obj={"name":"egon","age":123};
//
//    $.each(obj,function (i,j) {
//          console.log(i);
//          console.log(j);
//
//    });



// ----------- --方式2：


      $("p").click(function () {
         console.log($(this).index())
      });


//      $("p").each(function () {
//
//        console.log($(this).index());    // $(this) ----=>代指当前循环到的标签对象
//
//      })



//jquery扩展

   // 示例1

//   function f(){
//
//        for(var i=0;i<4;i++){
//
//            if (i==2){
//                return
//            }
//            console.log(i)
//        }
//    }
//    f();

    //示例2

     li=[11,22,33,44];
    $.each(li,function(i,v){

        if (v==33){
                return false;   //  ===试一试 return false会怎样?
            }
        console.log(v)
    });

    // each的参数function内如果出现return  结束当次循环，类似于continue；
                       //如果出现return False，结束的是整个each循环，类似break。



</script>



</body>

View Code

文本操作

<body>

<div class="c1">

    <p>PPP</p>

</div>

<input type="text" value="123">


<div value="123"></div>
<script>

    // 取值操作
//    console.log($(".c1").html());
//    console.log($(".c1").text());

   //赋值操作

    // $(".c1").html("<a href=''>click</a>")
    // $(".c1").text("<a href=''>click</a>")


    // 对value属性取值和赋值操作

//    console.log($(":text").val());
//
//    $(":text").val(456);

    // 注意：value属性必须是固有属性

    console.log($("div").val())   // 取不到value属性的值
</script>
</body>

View Code

4.4 文档节点处理

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");

    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()
    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])

节点操作示例：

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

</head>
<body>


<div class="outer">
    <h4>come on</h4>
</div>

<script src="jquery-3.2.1.js"></script>
<script>
//    var $ele=$('<p>');
//    $ele.text('hello world');

    //append:追加到最后的位置

   // $('.outer').append($ele);

   // $ele.appendTo('.outer');


    //添加到最上面的位置
//    $('.outer').prepend($ele);


//    var $ele2=$('<p>');
//    $ele2.text('AAAAA');
//    $('.outer').prepend($ele2);

    //$('.outer').after($ele); //作为 div的兄弟标签出现


    //删除节点

   // $('.outer').remove()


    //清空节点
    //$('.outer').empty();


    //替换节点
//    var $eles=$('<p>'); //<p></p>
//    $eles.text('hello world');
//
//    $('h4').replaceWith($eles);


    //拷贝节点

    var $outer=$('.outer').clone();
    $('.outer').after($outer);



</script>

</body>
</html>

View Code

clone示例：

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


<div class="outer">

    <div class="item">
        <button class="add">+</button>
        <input type="text">
    </div>

</div>

<script>

     $(".add").click(function () {

         var $ele=$(this).parent().clone();

         $ele.children("button").text("-").attr("class","removeA");

         $(".outer").append($ele);

     });


     $(".outer").on("click",".removeA",function () {

         $(this).parent().remove()
     });



//    $(".removeA").click(function () {
//
//        alert(1234)
//    })


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

View Code

4.5 动画效果

显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏</title>
    
    <style>
        *{
            margin: 0;
        }

        p{
             500px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            background-color: orange;

        }
    </style>



</head>
<body>

<p>hello</p>

<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>


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

<script>

    $(document).ready(function () {

        $('#hide').click(function () {
            $('p').hide(1000);
        });

        $('#show').click(function () {
            $('p').show(1000);
        });

        //用于切换被选元素的 hide() 与 show() 方法
        $('#toggle').click(function () {
            $('p').toggle();
        });
    })
</script>

</body>
</html>

View Code

滑动

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

    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border: 1px solid red;
            display: none;
            padding: 50px;

        }
    </style>


    <script src="jquery-3.2.1.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>

</head>
<body>

<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>

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

</body>
</html>

View Code

淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>

    <style>
       #id1{
            300px;
           height: 300px;
           background-color: blueviolet;

           margin-top: 50px;
           margin-left: 50px;
       }

    </style>

</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" ></div>


<script src="jquery-3.2.1.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>

</body>
</html>

View Code

回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回调函数</title>

</head>
<body>

<button>hide</button>

<p>hello hello hello</p>

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

 <script>
     
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })

   });
 
 </script>

</body>
</html>

View Code

4.6 css操作

css位置操作

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

元素偏移控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素偏移控制</title>


    <style>
        *{

            margin: 0;
        }

        .box1{
             200px;
            height: 200px;
            background-color: yellowgreen;
        }

        .box2{
             200px;
            height: 200px;
            background-color: rebeccapurple;
        }

    </style>
    <script src='jquery-3.2.1.js'></script>
</head>
<body>



<div class="box1"></div>
<div class="box2"></div>

<button>change</button>

<script>

    $("button").click(function () {

//        $(".box1").offset({left:0,top:200});
        $(".box2").offset({left:200,top:400});

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

View Code

css之position

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

    <style>

        *{
            margin: 0;
        }
        .box1{
             200px;
            height: 200px;
            background-color: wheat;
        }
        .box2{
             200px;
            height: 200px;
            background-color: green;
        }

        
        /*尝试 注释掉*/
        .outer{
            position: relative;
        }
    </style>
    <script src='jquery-3.2.1.js'></script>
</head>
<body>


<div class="box1"></div>

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



<script>
    console.log($(".box2").position().top);
    console.log( $(".box2").position().left);


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



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

View Code

panel移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>panel移动</title>

    <style>

        *{
            margin: 0;
        }

        .box{
             200px;
            height: 200px;
            background-color: #2459a2;

        }
    </style>
    <script src='jquery-3.2.1.js'></script>
</head>
<body>

<div class="box">

</div>

<script>

    var mouse_x=0;
    var mouse_y=0;
    $(".box").mouseover(function () {
      $(this).css("cursor","move")
    });
    $(".box").mousedown(function (e) {
          mouse_x=e.clientX;
          mouse_y=e.clientY;
          var $box_top= $(this).offset().top;
          var $box_left=$(this).offset().left;

          $(document).mousemove(function (e) {

              var new_mouse_x=e.clientX;
              var new_mouse_y=e.clientY;


              $(".box").offset({left:new_mouse_x-mouse_x,top:new_mouse_y-mouse_y})

          });

            $(document).mouseup(function () {
                $(document).off()
            })


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

View Code

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>

    <style>
        .box{
             100%;
            height: 2000px;
            background-color: wheat;
        }

        #returnTop{
             70px;
            height: 40px;
            background-color: royalblue;
            color: white;

            font-weight: 800;
            text-align: center;
            line-height: 40px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;

        }
    </style>

</head>
<body>

<div class="box"></div>
<div id="returnTop">TOP</div>

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

<script>
    $(window).scroll(function () {

        console.log($(window).scrollTop());

        if($(window).scrollTop()>200){
            $('#returnTop').show();   //  >200 显示
        }
        else {
            $('#returnTop').hide();   //  <200 隐藏
        }
    });


    $('#returnTop').click(function () {
        $(window).scrollTop(0);
    });

</script>



</body>
</html>

View Code

尺寸操作

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

尺寸操作

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

    <style>
        .box{
             200px;
            height: 200px;
            padding: 50px;
            border: 10px red solid;
            background-color: green;
            margin: 20px;
        }
    </style>



</head>
<body>

<div class="box">DIV</div>



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

    <script>
        console.log($('.box').height());
        console.log($('.box').width());


        console.log($('.box').innerHeight());
        console.log($('.box').innerWidth());

        console.log($('.box').outerHeight());
        console.log($('.box').outerWidth());
    </script>
</body>
</html>

View Code

　　　　　　　　　　　　　　　　　　　　　　jquery实例

实例之左侧菜单（注意：jquery版本的引用）

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

    <style>
          .menu{
              height: 500px;
               30%;
              background-color: gray;
              float: left;
          }
          .content{
              height: 500px;
               70%;
              background-color: darkkhaki;
              float: left;
          }
         .title{
             line-height: 50px;
             background-color: wheat;
             color: forestgreen;}


         .hide{
             display: none;
         }


    </style>
</head>
<body>



<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this);">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单二</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单三</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>

    </div>
    <div class="content"></div>

</div>


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

 <script>
          function show(self){
              $(self).next().removeClass("hide");
              $(self).parent().siblings().children(".con").addClass("hide");

          }
    </script>

</body>
</html>

View Code

tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>

    <style>
        *{
            margin:0;
            padding: 0;
        }

        .tab_outer{
            margin: 20px auto;
             60%;
        }

        .menu{
            background-color: #cccccc;
            border: 1px solid red;
            line-height: 40px;
            text-align: center;
        }
        .menu li{
            display: inline-block;
            margin-left: 14px;
            padding: 5px 20px;
        }
        .menu a{
            border-right:1px solid red ;
            padding: 13px;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;
        }

        .hide{
            display: none;

        }
        .current{
            background-color: #2868c8;
            color: white;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>

<div class="tab_outer">
    <ul class="menu">
        <li relation="c1" class="current">菜单一</li>
        <li relation="c2">菜单二</li>
        <li relation="c3">菜单三</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.2.1.js"></script>

<script>
    $('.menu li').click(function () {
        var index=$(this).attr('relation');
        $('#'+index).removeClass('hide').siblings().addClass('hide');
        $(this).addClass('current').siblings().removeClass('current')
    })
</script>


</body>
</html>

View Code

leftmenu

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

    <style>
          .menu{
              height: 500px;
               20%;
              background-color: gainsboro;
              text-align: center;
              float: left;
          }
          .content{
              height: 500px;
               80%;
              background-color: darkgray;
              float: left;
          }
         .title{
             line-height: 50px;
             background-color: wheat;
             color: rebeccapurple;
             }


         .hide{
             display: none;
         }


    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>

    </div>
    <div class="content"></div>

</div>
<script src="../day48/jquery-3.2.1.js"></script>


<script>

      $(".item .title").click(function () {

          $(this).next().removeClass("hide");
          $(this).parent().siblings().children(".con").addClass("hide");

          // $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide")

      })

</script>


</body>
</html>

View Code

tab全选反选取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab全反取</title>

</head>
<body>

<button class="selectAll">全选</button>
<button class="reverse">反选</button>
<button class="cancel">取消</button>
<hr>
<table border="1">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>

     <tr>
         <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>

     <tr>
         <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
         <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
</table>


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

<script>
    //全选
    $('.selectAll').click(function () {
        $(':checkbox').prop('checked',true)
    });
    
    
    //取消
    $('.cancel').click(function () {
        $(':checkbox').prop('checked',false)
    });
    
    
    //反选 
    $('.reverse').click(function () {
        $(':checkbox').each(function () {

            $(this).prop('checked',!$(this).prop('checked'));

        })
    })


    
    //----反选（2）
//    $('.reverse').click(function () {
//        $(':checkbox').each(function () {
//            if ($(this).prop('checked')){
//                $(this).prop('checked',false);
//            }
//            else {
//                $(this).prop('checked',true);
//            }
//        })
//    });

</script>

</body>
</html>

View Code

JD轮播图

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


    <style>

            .outer{
                 790px;
                height: 340px;
                margin: 80px auto;
                position: relative;
            }

            .img li{
                 position: absolute;
                 list-style: none;
                 top: 0;
                 left: 0;

            }

           .num{
               position: absolute;
               bottom: 18px;
               left: 270px;
               list-style: none;


           }

           .num li{
               display: inline-block;
                18px;
               height: 18px;
               background-color: white;
               border-radius: 50%;
               text-align: center;
               line-height: 18px;
               margin-left: 4px;
           }

           .btn{
               position: absolute;
               top:50%;
                30px;
               height: 60px;
               background-color: lightgrey;
               color: white;

               text-align: center;
               line-height: 60px;
               font-size: 30px;
               opacity: 0.7;
               margin-top: -30px;

               display: none;

           }

           .left{
               left: 0;
           }

           .right{
               right: 0;
           }

          .outer:hover .btn{
              display: block;
          }

        .num .active{
            background-color: red;
        }


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

</head>
<body>


      <div class="outer">
          <ul class="img">
              <li><a href=""><img src="img/1.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/6.jpg" alt=""></a></li>
          </ul>

          <ul class="num">
              <li class="active">1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
          </ul>

          <div class="left  btn"> < </div>
          <div class="right btn"> > </div>

      </div>

<script>
    var i=0;
    //功能1：  鼠标悬浮到图标的位置时实现切换

    $(".num li").mouseover(function () {
          $(this).addClass("active").siblings().removeClass("active");

          var $icon_index=$(this).index();

          i=$icon_index;

          $(".img li").eq($icon_index).removeClass("hide").siblings().addClass("hide")
    });


    // 自动轮播   setInterval(fn,1000)


    function foo() {
         if(i==5){
             i=-1
         }

         i++;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
          $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000);

    }

    var ID=setInterval(foo,1000);


    //  悬浮终止定时器
        $(".outer").hover(function () {
             // 终止定时器
            clearInterval(ID)

        },function () {
           // 重新开启一个定时器
           ID=setInterval(foo,1500);

        });


    //  通过按钮实现切换

    $(".right").click(function () {
        foo()
    });



    function bar() {
         if(i==0){
             i=6
         }

         i--;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000);
        //$(".img li").eq(i).removeClass("hide").siblings().addClass("hide");

    }

     $(".left").click(function () {
        bar()
    })





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

View Code

web篇---jQuery

3.1.6 表单属性选择器

3.2 筛选器

3.2.1 过滤筛选器

3.2.2 查找筛选器

四 操作元素(属性，css，文档处理)

4.1 事件

页面载入

事件绑定

事件委派：

事件切换

4.2 属性操作

4.3 each循环

方式一

方式二

each扩展以及示例

4.4 文档节点处理

4.5 动画效果

显示隐藏

滑动

淡入淡出

回调函数

4.6 css操作

css位置操作

尺寸操作

3.2.2 查找筛选器　　

四操作元素(属性，css，文档处理)