美文网首页
day07-jquery

day07-jquery

作者: 克马 | 来源:发表于2018-07-05 18:37 被阅读0次

    A.今天学到了什么

    1.基本选择器

    配置jquery

     <script src="lib/jquery-3.3.1.min.js"> </script>
        <!-- 1.使用本地jquery
         2.使用在线cdn -->
    
        <p id="one" class="one">hello world</p>
        <script>
            var one = $("#one");
            // 修改元素样式
            one.css({ color: "red", backgroundColor: "yellow" });
            console.log(one);
            $("p").click(function(){
                $(this).css({color:"red"})
            })       
             $("*").css({color:"green"}) 
            // 选择器 
            /* $(“#one”) id选择器
               $(“.two”) class选择器
               $(“p”)    元素选择器
               $(“*”)    所有的元素
               $(“p,div”)
            */
        </script>
    
    2.层次选择器
       <div id="parent">
            <p>hello world</p>
            <div>
                <p>hello world</p>
            </div>
    
        </div>
        <button id="btn">btn</button>   
        <script>
                  //  层次选择器
            /* $(“div >p”)
               $(“div p”)
               $(“div+p”)
               $(“div~p”)
            */ 
            $("#btn").click(function(){
                $("#parent>p").css({color:"red"})
            })
        </script>
    
    3.兄弟选择器
       <div>div</div>
        <p>p</p>
        <p>p</p>
        <p>p</p>
        <p>p</p>
        <script>
            // $("div+p").css({color:"red"});
            $("div~p").css({color:"blue"});
        </script>
    
    4.过滤选择器
    A.基本过滤
            $("p:first-child")
            $("p:last-child")
            $(“p:first”)
            $(“p:last”)
            :not(selector)
            $(“div:not(.one)”)
    
            $("p:even")  选择所有偶数项 从0开始
             $(“p:odd”)   选择所有奇数项
            $("p:eq(index)")    index 从0开始
            $(“p:gt(index)”)    大于
            $(“p”lt(index)”)    小于
            $(“:focus”)  配置focus事件
    
    <div>
            <p>hello world</p>
            <p>hello world</p>
            <p>hello world</p>
            <p>hello world</p>
            <input type="text" >
        </div>
    
      $("div>p:first-child").css({color:"red"})
            $("div>p:last-child").css({color:"red"})
            $("p:first").css({color:"blue"})
            $("p:last").css({color:"blue"})
            $("p:even").css({color:"blue"})
            $("p:eq(3)").css({color:"blue"})
            // $("p").eq(3).css({color:"blue"})
            $("p:gt(0)").css({color:"blue"})
            $("p:lt(3)").css({color:"blue"})
            $("input").focus(function(){
                $(":focus").css({backgroundColor:"red"})
            })
    
    5.内容过滤选择器
        $("p:contains(hello)")  //选取文本中含有”hello”的p元素
        $(“div:has(p)”)  //选取含有p元素的div元素
        $(“div:parent”)   //选取含有子元素或者文本的元素
        $(“:hidden”)     选取隐藏元素  只对dispaly:none 起作用 visibility:hidden没用
        $(“div:visible”) 选取所有可见元素
    
        <p>hello world</p>
        <p>good</p>
        <p>world3</p>
        <div class="obe">
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div>
            <h1>h1</h1>
        </div>
        <script>
            $("p:contains(hello)").css({color:"red"})
            $("div:has(p)").css({color:"red"})
            $("div:hidden").css({display:"block"}) 
        </script>
    
    6.Jquery中的DOM操作
       <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div>
            <p>0000</p>
        </div>
        <input type="text" value="hello world">
        <script>
            // 获取元素的文本  text 修改文本
            // attr() 获取属性的值
            var txt = $("li:eq(1)").text("hello world");
            var attr = $("li:eq(1)").attr("class");
            // console.log(attr)
            // html 获取的是整个div里面的内容 包含html标签
            // value 获取的是输入框的值
            var html = $("div").html();
            // console.log(html)
            var val = $("input").val();
            console.log(val);
            // a.创建元素节点
            var p = $("<p></p>");
            // b.创建文本节点
            var li4 = $("<li>04</li>")
            // c.创建属性节点
            var $li = $("<li title='香蕉'>香蕉</li>");
    
            //   增加
            //   append  向父元素的后面添加
            // prepend 向父元素的前面添加
            $("ul").append($li4);
            $("ul").prepend($li4) ;
        </script>
    
    
    7.before和after
        <div>
            div
        </div>
        <p>end</p>
        <button id="btn">btn</button>
        <script>
            // before after  在兄弟元素之间
            var $p=(" <p>one</p>")
            $("div").after($p);
            var $h4=$("<h4>h4</h4>")
            $("p:contains(end)").before($h4);
            // 删除节点  remove
            $("#btn").click(function(){
                $("div").remove();
            })
        </script>
    
    8.属性操作
      <style>
            .current{
                color: blue;
            }
        </style>
    
    <body>
        <!-- <div>hello world</div> -->
        <p class="one">hello world</p>
        <button>toggle</button>
        <script>
            // 标签的内容消失
            // $("div").empty();
            // var $p=("<p>replace</p>");
            // 替换标签
            // $("div").replaceWith($p);
            // 包裹标签
            // $("p").wrap("<li>li</li>");
            // 在标签里面嵌套标签
            // $("p").wrapInner("<li>li</li>");
    
            // 属性操作
            // 设置属性
            // $("p").attr("class","two"); 
            // 多属性操作
            // $("p").attr({class:"one",tittle:"two"});    
            // 删除属性
            // $("p").removeAttr("class");
    
            // 样式操作
            // 通过属性的方式 设置样式
            // $("p").attr("class","current"); 
            // add class
            // $("p").addClass("current") 
            // 移出样式
            // $("p").removeClass("cuurent");
            // 切换样式
            // $("button").click(function(){
            //     $("p").toggleClass("current")
            // })
    
            // 判断是否有某个样式
            var one=$("p").hasClass("current");
            $("button").click(function(){
                if($("p").hasClass("current")){
                    $("p").removeClass("current")
                }else{
                     $("p").addClass("current")
                    }
                
            })
        </script>
    
    9.遍历
       <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div class="grandfather">
            grandf
            <div class="parent">
                parent
                <p>hello world</p>
            </div>
        </div>
    
        <script>
            // 获取子元素
            // var childs=$("ul").children();
            // childs.css({color:"red"});
            // 找到元素的上一个元素
            // $("li:eq(1)").prev().css({backgroundColor:"green"})
            // 找到元素的下一个元素
            // $("li:eq(1)").next().css({backgroundColor:"blue"})
    
            // 所有的DOM元素加载完毕之后执行代码块里的js
            $(function () {
                // siblings 找到所有的兄弟元素
                // var sibs = $("li:eq(0)").siblings();
                // sibs.css({ color: "red" })
                // 获取父元素
                // var parent = $("p").parent();
                // var parents = $("p").parents();
                // parents.css({color:"red"})
                // console.log(parents);
    
                // 找到你想要的父元素
                var closest= $("p").closest(".grandfather");
                closest.css({color:"red"})
            })
        </script>
    
    10.toggle
      <div>
            <p class="one">hello world</p>
        </div>
        <button id="btn">btn</button>
        <script>     
            $("#btn").click(function(){
                $("p").toggle();
            })
        </script>
    
    11.过滤
        <ul class="one">
            <li class="one">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script>
            $("li").filter(".one").css({color:"red"})
        </script>
    
    12.offset
     <style>
            *{margin: 0;padding: 0;}
            div{
                width: 100px;
                height: 100px;
                background: red;
                margin: 100px;
            }
        </style>
    
      <div>
          
        </div>
        <script>
            // 偏移量
            $(function(){
                debugger;
                var left=$("div").offset().left;
            })
        </script>
    

    相关文章

      网友评论

          本文标题:day07-jquery

          本文链接:https://www.haomeiwen.com/subject/nxxmuftx.html