前端学习之jquery/下

前端学习之jquery

一 属性操作

html():
console.log($("div").html());
$(".test").html("<h1>hello</h1>");   拿到的是标签

test():
console.log($("div").text());
$(".test").text("<h1>hello</h1>");   整个纯文本
val():val针对的是固有属性value
console.log($(":text").val());
console.log($(":checkbox").val());
console.log($(":button").val())//val针对的是固有属性value

tab切换案例:

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

        .outer{
            width: 80%;
            margin: 0 auto;

        }

        .nav li{
            float: left;
            list-style: none;
            width: 100px;
            height: 40px;
            background-color: #6AA1EA;
            text-align: center;
            line-height: 40px;
            border-right: 2px solid green;
        }

        .content{
            width: 306px;
            height: 400px;
            background-color: #99cc99;
            margin-top: 40px;

        }

        ul .active{
            background-color: #99aecb;
        }

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


</head>
<body>

<div class="outer">
    <ul class="nav">
       <li f="con1" class="active">菜单一</li>
       <li f="con2">菜单二</li>
       <li f="con3">菜单三</li>
    </ul>

    <div class="content">
        <div class="con1">111</div>
        <div class="con2 hide">222</div>
        <div class="con3 hide">333</div>
    </div>

</div>

<script src="jquery-3.2.1.js"></script>
<script>
      var outer=document.getElementsByClassName("outer")[0];
      var lis=outer.getElementsByTagName("li");
      for(var i=0;i<lis.length;i++){
          lis[i].onclick=function () {


          $(this).addClass("active").siblings().removeClass("active");

          var $name=$(this).attr("f");

          $("."+$name).removeClass("hide").siblings().addClass("hide")
          }


      }


</script>
tab切换案例

 

二 jquery循环方式 

方法一:
//$.each(arr,funtion(){})  //循环语法
arr=[123,456,"hello"];
obj={"name":"egon","age":22};
$.each(arr,function (i,j) {
    console.log(i,j)
})
$.each(obj,function (i,j) {
    console.log(i,j)
})

方法二:
$().each(function () {
})
<ul>
    <li>111</li>
    <li class="item">222</li>
    <li>333</li>
</ul>
$("ul li").each(function () {
    console.log($(this))
    if ($(this).hasClass("item")){
        alert($(this).text())
    }
})
View Code

 table正反选示例:

<body>

<h1>表格示例</h1>
    <button>全选</button>
    <button>反选</button>
    <button>取消</button>
<hr>

<table border="2px">
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
      <tr>
        <td><input type="checkbox" class="item"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
      <tr>
        <td><input type="checkbox" class="item"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
     <tr>
        <td><input type="checkbox" class="item"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>

</table>

<script src="jquery-3.2.1.js"></script>
<script>
    var eles=document.getElementsByTagName("button");
//    var inps=document.getElementsByClassName("item");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function () {
           if (this.innerText=="全选"){
//               for(var j=0;j<inps.length;j++){
//                   inps[j].checked=true
//               }
            $(":checkbox").prop("checked",true);
           }
           else if (this.innerText=="取消"){
             $(":checkbox").prop("checked",false);
           }
           else{
               $(":checkbox").each(function () {
                    $(this).prop("checked",!$(this).prop("checked")); //最新优化
//                   if ($(this).prop("checked")){
//                       $(this).prop("checked",false)
//                   }
//                    else {
//                       $(this).prop("checked",true)
//                   }
               })
           }
        }
    }

</script>

</body>
table 正反选示例

 

三 动画效果 

hide()与show()隐藏与显示

<p>hello</p>
<img src="top.jpg" width="400px" height="200px">
<button id="hide">隐藏</button>
<button id="=show">显示</button>
<button id="toggle">切换</button>

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

<script>

    //用于切换备选元素的 hide()与show()方法。
    // 标签对象.事件(function(){})
    $("#hide").click(function () {
        $("img").hide(1000);

    });
    $("#show").click(function () {
        $("img").show(1000);
    });

    $("#toggle").click(function () {
        $("img").toggle(1000);
    })

</script>

 

滑动效果:

slideDown()  slideUp()  slideToggle()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #con{
        line-height: 80px;
        background-color: #015e98;
    }

    </style>
</head>
<body>

<div id="con">滑动效果</div>

<button id="slideDown">slideDown</button>
<button id="slideUp">slideUp</button>
<button id="toggle">toggle</button>

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

<script>
   $("#slideDown").click(function () {
       $("#con").slideDown(1000)
   });

   $("#slideUp").click(function () {
       $("#con").slideUp(1000)
   });

    $("#toggle").click(function () {
       $("#con").slideToggle(1000)
   })
</script>


</script>
</body>

 

淡入淡出透明度:

fadeIn()  fadeout()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     #con{
         height: 200px;
         width: 200px;
         background-color:#ccecef;
     }
    </style>

</head>
<body>

<div id="con"></div>

<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
<button id="fadeTo">fadeTo</button>


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

    $("#fadeIn").click(function () {
        $("#con").fadeIn(2000)
    });
    $("#fadeOut").click(function () {
        $("#con").fadeOut(2000)
    });
    $("#fadeToggle").click(function () {
        $("#con").fadeToggle(2000)
    })
$("#fadeTo").click(function () {
    $("#con").fadeTo(1000,0.4)  //透明度
})

</script>

回调函数:当某一个动作执行完成之后自动触发的函数

四 文档操作

内部插入:

(append)  ( prepend) //父节点添加子节点

<script>
   $("button").click(function () {
       $("div").append("<h1>hello</h1>");//插入的位置不一样 一个在后面
       $("div").prepend("<h1>hi</h1>"); //一个在前面插入
   })
</script>

(appendTo)(perpendTo) //子节点插入父节点

<script>
   $("button").click(function () {
   var $ele=$("<p>hello</p>");
  $ele.appendTo("div") //子节点插入父节点
  $ele.prependTo("div")//
});
</script>

外部插入:兄弟之间插入

after() before()

$("div").after("<p>pppppp</p>");
$("div").before("<p>pppppp</p>")

insertAfter()   insertBefore()

var $ele=$("<p>hello</p>");
//   $ele.insertAfter("div")
      $ele.insertBefore("div")

替换replaceWith()

$("div").replaceWith("<h1>egon</h1>")  

删除

//$("div").empty()  //清空文本内容
 $("div").remove()  //清空整个标签

复制(克隆)

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

<script src="jquery-3.2.1.js"></script>
<script>
    $(":button").click(function () {
       //var $clone=$(".box .item").clone(); //1变2 2变4
      var $clone=$(this).parent().clone();
      $clone.children(":button").val("-").attr("onclick","removeA(this)");
      $clone.children();
        $(".box").append($clone)
    });
    function removeA(self) {
        console.log($(self).parent());
        $(self).parent().remove()
    }
</script>

 

posted @ 2017-06-01 19:16  karina梅梅  阅读(155)  评论(0编辑  收藏  举报