day 50 jquery之看我操作

一 . jQuery

　　是一个快速的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。它的文档说明很全，而且各种应用也详细，jQuery 对象就是通过jQuery包装DOM对象后产生的对象。

　　jQuery 语法：$("selector").action("color","red");

二 . jQuery各种查找选择器,只要掌握好方法和CSS之前的基础，就信手捏来了

// 一 基本选择器
//$(".c1").css("color","red");
//$(".c3").css("color","red");
//$(".c3:first").css("color","red");
//$(".c3:last").css("color","red");
//$(".c3:eq(3)").css("color","yellow");
//$(".c3:even").css("color","yellow");
//$(".c3:odd").css("color","yellow");
//$(".c3:gt(2)").css("color","yellow");
//$(".c3:lt(2)").css("color","yellow");
//$("[gongfu=666]").css("color","red");
//$("[gongfu=678]").css("color","yellow");
//$("[gongfu=666][Ajing=233]").css("color","yellow");
//$("[type=checkbox]").attr("checked","checked");
//$(":checkbox").attr("checked","checked");

// 二 进阶筛选器
//$(".c5:checkbox");
//$(".c3").first().css("color","red");
//var index=3;
//$(".c3:"+"eq("+index+")").css("color","yellow");
//$(".c3").eq(index).css("color","yellow");

//判断某个标签是否拥有某个class名
//console.log($("#i1").hasClass("c2"));

//console.log($("[yuan]").hasClass(""));

//导航选择器
//查找兄弟标签
//$("#i2").next().css("color","yellow");
//$("#i2").nextAll().css("color","yellow");
//$("#i2").nextUntil(".c8").css("color","yellow");
//$("#i2").prev().css("color","yellow");
//$("#i2").prevAll().css("color","yellow");
//$("#i2").prevUntil("#i3").css("color","yellow");
//$("#i2").siblings().css("color","yellow");

//查找子孙标签
//$(".p1").children().css("color","blue");
//$(".p1").children(":first").css("color","yellow");
//$(".p1").children().first().css("color","yellow");

//$(".c9").children("p").css("color","yellow");
//$(".c9").find("p").css("color","red");

//查找父标签
//$(".c10").parent()
//$(".c10").parents()
//$(".c10").parentsUntil()

</script>

三.事件绑定语法及 操作

$(function () {
// $().事件(function(){})
/*
$("ul li").click(function () {
// this: 当前触发的标签,即一个DOM对象
// alert(this.innerHTML)
alert($(this).html())
});

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

$(".add").click(function () {
$(".box").append("<li>789</li>")

})
})

四 . jQuery操作

/*
    1.文本操作
        $("").html()
        $("").text()
        $("").html("参数")
        $("").text("参数")
     2.属性操作
        $().attr("")
        $().attr("","")
        $("p").attr("gongfu")
        $("p").attr("gongfu","niubi")
     3.class 操作
        $("p").addClass("c1")
        $("p").removeClass("c1")

 */

五 . jQuery实现菜单栏

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

</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
          .left{
               15%;
              height: 600px;
              float: left;
              background-color: wheat;
          }

          .right{
              float: left;
               85%;
              height: 600px;
              background-color: lightgray;

          }

           .title{
               text-align: center;
               line-height: 30px;
               background-color: #0e90d2;
               color: white;
           }
        .item{
            padding: 10px;
        }

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

    <script src="jquery-3.3.1.js"></script>
</head>
<body>



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


<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>
</body>
</html>



2333 总之多敲多练，触类旁通，带脑子去玩代码，而不让代码去玩你.
详情见：https://www.cnblogs.com/yuanchenqi/articles/6936986.html