py17day15

上节补充

JavaScript之事件

1、onload：

　　onload 属性开发中只给 body元素加.这个属性的触发标志着页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性。

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

    <script>
        window.onload=function () {
               var ele=document.getElementsByClassName("c1")[0];
                ele.style.color="red";
                 var ele2=document.getElementsByTagName("button")[0];

                 ele2.onclick=function () {
                     alert(123)
                 }
        };
    </script>
</head>
<body>

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



<button>click</button>


</body>

</html>

onload

2、onsubmit：

　　当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" id="form">
        姓名<input type="text">
        密码<input type="password">
        <input type="submit">
    </form>
    <script>
        var ele=document.getElementById("form");
        ele.onsubmit=function (event) {
            console.log(event);
            alert(123);
            e.preventDefault()
            //  阻止默认的提交事件的两种方法：
            // 方式1：
            // /return false;
    
            // 方式2：
           //e.preventDefault()
        }
    </script>
</body>
</html>

补充：

　　这里的event为触发事件的状态：　

3、事件传播：

　　event.stopPropagation()可以阻止继承父标签事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: blue;
        }

         .c2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

    <div class="c1">
        <div class="c2"></div>
    </div>
    
    <script>
           var ele1=document.getElementsByClassName("c1")[0];
           var ele2=document.getElementsByClassName("c2")[0];
    
           ele1.onclick=function () {
               alert(123)
           };
            ele2.onclick=function (event) {
               alert(456);
               event.stopPropagation()
           };
    </script>

</body>
</html>

事件传播

4、onkeydown：

　　Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
　　事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div >
    <input type="text" id="test">
    <!--<button>click</button>-->
</div>


<script>
    var ele=document.getElementById("test");
//    var div=document.getElementsByTagName("div")[0];
//    div.onkeydown=function (e) {
//        e=e|| window.event;
//        if(e.keyCode=13){
//            console.log(ele.value)
//        }
//    };


    ele.onkeydown=function (e) {
        e=e|| window.event;

        console.log(e.keyCode);
        console.log(String.fromCharCode(e.keyCode))
    }

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

onkeydown

5、onchange：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select name="" id="">
        <option value="">111</option>
        <option value="">222</option>
        <option value="">333</option>
    </select>

    <script>
        var ele=document.getElementsByTagName("select")[0];

        ele.onchange=function(){
              alert(123);
        }

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

onchange

6、onfocus/onblur（获取/失去焦点）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="用户名" >
<input type="text" value="用户名" id="search">


<script>
    var ele=document.getElementById("search");

    ele.onfocus=function () {
        this.value="";
    };

    ele.onblur=function () {
        if (!this.value.trim())
             //失去焦点时，如果为空或者是空格，执行下面
        {this.value="用户名";}
    }
</script>
</body>
</html>

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()

http://jquery.cuishifeng.cn/

三、jQuery选择器和筛选器

　　jQuery选择器/筛选器选择的后的结果是一个集合对象，对其进行属性操作会自动遍历（jQuery的内置遍历循环处理）集合里的每一个元素。

　　另外，如果对这个集合进行相同的属性操作，不需要自主加循环，如果是不同的操作，则需要自己加上each循环。

1.选择器：

1)基本选择器：

$("*") //选择所有元素  
$("#id")    //id选择器
$(".class")  //class选择器
$("element")  //元素选择器
$(".class,p,div")   //多项选择器

2)层级选择器：

$(".outer div")      //后代选择器
$(".outer>div")     //子代选择器
$(".outer+div")     //毗邻选择器
$(".outer~div")     //兄弟选择器

3)基本筛选器：

$("li:first")     //匹配到的第一个li
$("li:eq(2)")   //索引是2的li
$("li:even")    //索引是奇数的li
$("li:gt(1)")    //索引大于1的li

4)属性选择器：

<!--属性选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li class="li" id="1">1</li>
        <li class="li" >2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
    $("[class='li']").css("color","red");
    $("[class='li'][id]").css("color","blue");

</script>
</html>

5)表单选择器：

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

表单属性选择器：

    :enabled
    :disabled
    :checked
    :selected

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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-3.1.1.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>
</html>

View Code

2.筛选器：

1)过滤筛选器：

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

2)查找筛选器（导航查找）：

//查找子标签：         
$("div").children(".test")      //查找子标签里的".test"
$("div").find(".test")          //查找后代标签里的".test"
                               
//向下查找兄弟标签：    
$(".test").next()    //下一个标签           
$(".test").nextAll()      //下面所有标签                   
$(".test").nextUntil()   //下面的标签直到（）为止
                           
//向上查找兄弟标签：    
$("div").prev()                  
$("div").prevAll()       
$("div").prevUntil()   

//查找所有兄弟标签：    
$("div").siblings()  
              
//查找父标签：         
$(".test").parent()        //".test"的父标签      
$(".test").parents()       //".test"的所有祖级标签                  
$(".test").parentUntil()   //".test"的祖级标签直到（）为止

四、jQuery之操作元素（属性，css样式，文档处理等）

1.事件：

1)页面载入：

　　相当于DOM事件下的window.onload

$(document).ready(function(){}) 
//等同于：
$(function(){})

2)绑定事件：

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

3)事件委派：

　　通常我们想通过click事件绑定给li标签，使其alter(123456),但是在新创建的li标签却不管用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.1.1.js"></script>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

    <button>add</button>
    <script>
        $("li").click(function () {
           alert("123456")
        });

        
        $("button").click(function () {
           $("ul").append("<li>666</li>")
        });

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

　　我们可以通过事件委派的方式实现给新创建的标签也能够绑定事件：

$("").on(event,[selector],[data],fn)

    <script>
//        $("li").click(function () {
//           alert("123456")
//        });

        $("ul").on("click","li",function () {
            alert("123456");
        });

        $("button").click(function () {
           $("ul").append("<li>666</li>")
        });

    </script>

2.属性操作：

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

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

//--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])  //input标签才有意义

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

　　关于attr和prop：

<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>

五、each循环

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

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

jquery支持两种循环方式：

　　方式一：

    <script>
        li=[10,20,30,40];
        $.each(li,function(k,v){
            console.log(k,v)
        });
    </script>

结果：
 0 10
 1 20
 2 30
 3 40

    <script src="jquery-3.1.1.js"></script>
    <script>
        dic={name:"Dylan",gender:"male"};
        $.each(dic,function(k,v){
            console.log(k,v)
        });
    </script>

结果：
name Dylan
gender male

　　方式二：

<body>
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
    <div class="item1">6</div>

    <script src="jquery-3.1.1.js"></script>
    <script>
        $(".item1").each(function () {
            console.log($(this));
        })
    </script>
</body>
</html>

六、节点操作

//创建一个标签对象
    $("<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>

    <style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: wheat;
            margin: 50px auto;
        }
    </style>
</head>
<body>
<div class="outer">
    <h4>HELLO NODE</h4>
</div>

<button class="add">ADD</button>
<button class="removes">REMOVE</button>


<div class="box">
    <p>PPP</p>
</div>



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

<script>

    $(".add").click(function () {
//        <p></p>
        var $ele_p=$("<p>");
        $ele_p.text("HELLO egon");

        // 添加子标签
//        $(".outer").append($ele_p);

//        $ele_p.appendTo(".outer")

        // 添加兄弟标签

//        $(".outer").after($ele_p);


         // $(".box").empty();
//         $(".box").remove()


     })

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

增删改节点操作

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

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



</div>


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

<script>
         $(".add").click(function () {
             // <item></item>
             var $item_obj=$(this).parent().clone();
             $item_obj.children("button").html("-").attr("class","rem");

             $(".outer").append($item_obj);
         });


//        $(".removed").click(function () {
//
//            var $p=$(this).parent();
//            $(".outer").remove($p);
//        });


       $(".outer").on("click",".rem",function () {
            var $p=$(this).parent();
            // console.log($p);
           $p.remove();
       })

</script>

</body>
</html>

clone

七、动画效果

1.显示与隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="d1">Hello Elaine!</div>
    <button class="b1">显示</button>
    <button class="b2">隐藏</button>
    <button class="b3">toggle切换</button>
</body>
<script src="../jquery-3.1.1.js"></script>
<script>
    $(".b1").click(function () {
        $(".d1").show(1000) //延迟1000毫秒
    });
    $(".b2").click(function () {
        $(".d1").hide(1000)
    });
    $(".b3").click(function () {
        $(".d1").toggle(1000)
    });
</script>
</html>

显示与隐藏

2.滑入与滑出：

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

<!--<div style="background-color: wheat;color: brown;line-height: 100px;text-align: center" >hello world</div>-->
<img src="juhua.jpg" alt="" class="juhua">

<button class="slide_down">滑出</button>
<button class="slide_up">滑入</button>
<button class="slide_toggle">切换</button>

<script src="../jquery-3.1.1.js"></script>
<script>
      $(".slide_down").click(function () {
          $(".juhua").slideDown(1000);
      });

      $(".slide_up").click(function () {
          $(".juhua").slideUp(1000);
      });

        $(".slide_toggle").click(function () {
          $(".juhua").slideToggle(1000);
      });
</script>
</body>
</html>

滑动与滑出

3.淡入与淡出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>

<div class="item"></div>

<button class="fade_in">淡入</button>
<button class="fade_out">淡出</button>
<button class="fade_toggle">切换</button>


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

<script>
       $(".fade_in").click(function () {
           $(".item").fadeIn(2000);
       });
       $(".fade_out").click(function () {
           $(".item").fadeOut(1000);
       });
       $(".fade_toggle").click(function () {
           $(".item").fadeToggle(1000);
       })
</script>

</body>
</html>

淡入淡出

4.回调函数：

　　当一个事件执行完成之后，触发了另一个事件的执行（这个事件不会自主发生，只会在特定事件发生后才触发）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p class="p1">Hello World!</p>
    <button class="btn">click</button>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
    $(".btn").click(function () {      //执行完点击".btn"的事件：使".p1"隐藏
        $(".p1").hide(1000,function () {
            alert($(this).text())    //才会执行alert
        })
    })
</script>
</html>

八、示例

左侧菜单：

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

    <style>
        .left_menu{
            width: 20%;
            height: 500px;
            background-color: wheat;
            float: left;
        }
        .content_menu{
            width: 80%;
            height: 500px;
            background-color: darkgray;
            float: left;

        }

        .title{
            text-align: center;
            background-color: brown;
            line-height: 30px;
            color: white;
        }
        .item{
            margin: 20px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>


<div class="outer">
    <div class="left_menu">

           <div class="item">
                <div class="title">菜单一</div>
                <div class="con">
                    <p>11111</p>
                    <p>11111</p>
                    <p>11111</p>
                </div>
           </div>

           <div class="item">
                <div class="title">菜单二</div>
                <div class="con hide">
                    <p>22222</p>
                    <p>22222</p>
                    <p>22222</p>
                </div>
        </div>

           <div class="item">
                <div class="title ">菜单三</div>
                <div class="con hide">
                    <p>33333</p>
                    <p>33333</p>
                    <p>33333</p>
                </div>
            </div>


    </div>
    <div class="content_menu"></div>
</div>

<script src="jquery-3.1.1.js"></script>
<script>
        $(".title").click(function () {
//            $(this).next().removeClass("hide");
//
//            $(this).parent().siblings().children(".con").addClass("hide")


            // jquery支持链式操作
            $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

        })

</script>


<!--<script>-->
         <!--var eles=document.getElementsByClassName("title");-->

         <!--for (var i=0;i<eles.length;i++){-->
             <!--eles[i].onclick=function () {-->

                 <!--this.nextElementSibling.classList.remove("hide");-->


                 <!--var arr_item=this.parentElement.parentElement.children;-->

                 <!--var ele_curr_p=this.parentElement;-->

                 <!--for (var j=0;j<arr_item.length;j++){-->
                     <!--if (arr_item[j]!=ele_curr_p){-->
                         <!--arr_item[j].children[1].classList.add("hide");-->
                     <!--}-->
                 <!--}-->
             <!--}-->
         <!--}-->

<!--</script>-->
</body>
</html>

左侧菜单

posted @ 2017-08-06 09:28 Dylan_Wu 阅读(137) 评论(0) 收藏举报

刷新页面返回顶部

Dylan_Wu