DAY61 jQuery基础2

最新推荐文章于 2021-04-01 00:02:13 发布

苹果切一半

最新推荐文章于 2021-04-01 00:02:13 发布

阅读量215

点赞数

分类专栏：学习笔记文章标签： jquery

本文链接：https://blog.csdn.net/gavin3318/article/details/77248764

版权

学习笔记专栏收录该内容

54 篇文章 0 订阅

订阅专栏

属性操作

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