day01

今天学到了什么？

1.Jquery的选择器

1.1基本选择器

Jq的选择器支持所有css选择器
eg：  A:    id-->$("#one"), class-->$(".one")
 <p id="one" class="one">hello world</p>
    <script>
    var one=$("#one");
    one.css({color:"red",backgroundColor:"green"});
    console.log(one);
    </script>

         
B:所有元素-->$(“*”),标签元素-->$(“p”)
<p>hello world</p>
    <div>div</div>
    <h1>h1</h1>
    <script>
        $("p").click(function(){
            $(this).css({color:"red"})
        })
        $("*").css({color:"green"})
    </script>



C:分组选择器-->$(“p,div”):
<h1>h1</h1>
    <p>p</p>
    <div>div</div>
    <script>
    $("h1,p,div").css({color:"red"})
    </script>

1.2层次选择器

A:后代选择器-->$(“div >p”),$(“div p”)
<div id="parent"> 
        <p>hello world</p>
        <div>
            <p>hello world</p>
        </div>
    </div>
    <button id="btn">change</button>
    <script>
    $("#btn").click(function(){
        $("#parent p").css({color:"red"})
    })
    </script>


B:兄弟选择器-->$(“div+p”),$(“div~p”)

1.3过滤选择器

<div>
           <p>hello world</p>
           <p>hello world</p>
           <p>hello world</p>
           <p>hello world</p>
</div>


   <script>
     $("div>p:last-child").css({color:"red"});
    $("div>p:first-child").css({color:"red"});
    $("p:first").css({color:"red"});
    $("p:last").css({color:"red"});
    $("div p").css({color:"red"});
    $("p:not(:last)").css({color:"red"});
   
    $("p:even").css({color:"red"});//偶数开始，从0开始
    $("p:odd").css({color:"green"});//基数开始，从0开始

    $("p:eq(0)").css({color:"red"});//从0开始，等于第一个
    $("p").eq(0).css({color:"red"});
    $("p:gt(1)").css({color:"yellow"});//从0开始，大于第一个
    $("p:lt(3)").css({color:"yellow"});//从0开始，小于第一个，不包括3
   </script>

1.4内容过滤选择器

$("p:contains(hello)")  //选取文本中含有”hello”的p元素
$(“div:has(p)”)  //选取含有p元素的div元素
$(“div:parent”)   //选取含有子元素或者文本的元素  

<p>hello2</p>
    <p>good</p>
    <p>world</p>
    <div>
        <p>test</p>
    </div>
    <div>
        <h1>h1</h1>
    </div>
    <script>
        /*
    contains包含文本，has包含标签
        */
    // $("p:contains(world)").css({color:"red"});
    $("div:has(p)").css({color:"green"});
    </script>

1.5可见性过滤选择器

 <style>
    div{
        display: none;
    }
    </style>


    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <script>
    $(":visible").css({color:"red"});
    $("div:hidden").css({display:"block"})
    </script>

1.6属性过滤选择器

2.Jquery中的DOM操作

2.1查找节点

 // text()-->获取元素的文本
 // text（value)-->修改元素的文本
 // attr(key)获取属性节点
 // html()-->返回标签包裹内容，包含html标签
 // val()-->获取输入框的值
eg:
    <ul>
        <li class="one">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div>
        <p>hello world</p>
    </div>
    <input type="text" value="hello world">
    <script>
   
    var txt=$("li:eq(1)").text();
    // console.log(txt);
    var attr=$("li:eq(0)").attr("class");
    console.log(attr);

    var html=$("div").html();
    console.log(html);

    var value=$("input").val();
    console.log(value);
    </script>

2.2创建节点

  /*
$("<li>2</li>")-->创建一个元素
appened-->向父元素后面的添加
prepend-->向父元素的前面添加
  */
    <ul>
        <li>1</li>
    </ul>
    <script>
      
    var $li=$("<li>2</li>")
    $("ul").append($li);
    </script>

2.3插入节点

   /*
    brfore,after-->兄弟元素之前，之后
    */
    <div>div</div>
    <p>end</p>
    
    <script>
    var $p=$("<p>one</p>");
    var $h4=$("<h4>h4</h4>")
    $("div").after($p);
    $("p:contains(end)").before($h4)
    </script>

2.4/删除节点

1.删除节点
eg1:
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <button id="btn">btn</button>
    <script>
    $("#btn").click(function(){
        $("ul>li:eq(1)").remove();//删除节点
    })
    </script>

2.让标签的内容消失
eg2:
     <div>hello world</div>
     <script>
     $("div").empty();//让标签的内容消失
     </script>

3.替换节点
eg3:
    <div>hello world</div>
    <script>
    var $p=$("<p>replace</p>")
    $("div").replaceWith($p);//replaceWith-->替换节点
    </script>

3.包裹节点

 // wrap-->在元素的外层嵌套标签
 // wrapInner-->在元素内层嵌套标签
    <p>hello world</p>
    <script>
       
    $("p").wrap("<strong></strong>");
    $("p").wrapInner("<div></div>")
    </script>

4.属性操作

  1.操作属性attr(attrName,value)
  2.设置多个属性$("p").attr("class","two");
  3.删除属性$("p").removeAttr("class");
    
<p class="one">hello world</p>
    
   <script>
   $("p").attr({calss:"one",title:"two"})//设置多个属性
   $("p").removeAttr("class");//删除属性
   </script>

5.样式操作

//2.addClass-->添加class样式
// 3.removeClass-->移除class的样式

 <style>
    .current{
        color: red;
    }
 </style>


 <p>hello world</p>
    <button id="btn">btn</button>
    <script>
     //$("p").attr("class","current")1.通过属性的方式设置属性
     $("p").addClass("current")
  
    $("#btn").click(function(){
        $("p").removeClass("current");
    })
    </script>

6.切换样式

1.判断是否含有某个样式,返回true或false-->hasClass()
2.toggleClass-->切换样式


 <p>hello world</p>
    <button>toggle</button>
    <script>
    /*
    $("button").click(function(){
        $("p").toggleClass("current")//
    })
    
    */
    var one=$("p").hasClass("current");
    console.log(one);
    $("button").click(function(){
        if($("p").hasClass("current")){
            $("p").removeClass("current")
        }else{
            $("p").addClass("current")
        }
    })
    </script>

6.1遍历节点

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        /*
        children()获取子节点
        */
    var childs=$("ul").children();
    // console.log(childs);
    childs.css({color:"red"});
    //prev()-->找到元素的上一个元素
    $("li:eq(1)").prev().css({backgroundColor:"green"})
     //next()-->找到元素的下一个元素
    $("li:eq(1)").next().css({backgroundColor:"yellow"})
    </script>

6.2遍历节点

<p>hello world</p>
    <script>
        // wrap-->在元素的外层嵌套标签
        // wrapInner-->在元素内层嵌套标签
    $("p").wrap("<strong></strong>");
    $("p").wrapInner("<div></div>")

6.3遍历节点

 // siblings()-->找到所有兄弟元素

7.

<div>
        <p class="one">hello world</p>
    </div>
    <button id="btn">btn</button>
    <script>
        // is-->放回一个boolean值
        // hide()-->将元素隐藏
        //show()-->将元素显现

        $("#btn").click(function () {
            // var p = $("p").is(":visible");
            // console.log(p);
            // if (p) {
            //     $("p").hide();
            // } else {
            //     $("p").show();
            // }
            $("p").toggle();
        })
    </script>

8.css的操作

  <style>
        *{margin:0;padding:0}
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 100px;
        }
    </style>


    <!-- offset().left获取水平方向的偏移量 -->
    <div>

    </div>
    <script>
    $(function(){
        debugger;
        var left=$("div").offset().left;
        var top=$("div").offset().top;
    })
    </script>