DAY61 jQuery基础2

来源：互联网发布：网站幻灯片js代码编辑：程序博客网时间：2024/06/03 21:19

属性操作

* CSS类操作*
语法

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>tab</title>    <style>        *{            margin: 0;            padding: 0;        }        .tab_outer{            margin: 20px auto;            width: 60%;        }        .menu{            background-color: #cccccc;            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: 11px;        }        .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></body><script src="../2017.8.14/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></html>CSS类操作示例-tab

* 属性操作*
语法

$("").attr();$("").removeAttr();$("").prop();$("").removeProp();

<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>属性操作示例

HTML/Text/value
语法

$("").html([val|fn])$("").text([val|fn])$("").val([val|fn|arr])

<!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="c1">    <p>PPP</p></div><input type="text" value="123"><div value="123"></div><script>    // 取值操作    // html是标签操作、text是文本操作    // 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></html>HTML/Text/value示例

each循环

例如：

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

运行的过程中内部是一个循环，但是如果该循环中的某一个元素需要特殊处理的时候，就不能使用内部的默认循环了

方式一

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

方式二

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src='../2017.8.14/jquery-3.2.1.js'></script></head><body><p>111</p><p>222</p><p>333</p><p>444</p><script>    $("p").each(function () {      console.log($(this).index());    // $(this) ----=>代指当前循环到的标签对象    })    // 注意：下面的this指代$("p")集合中的一个元素    // $("p").click(function () {    //    console.log($(this).index())    // });</script></body></html>

each扩展

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src='../2017.8.14/jquery-3.2.1.js'></script></head><body><p>111</p><p>222</p><p>333</p><p>444</p><script>    // 示例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></html>

阅读全文

0 0