选择网页元素

模拟css选择器

<script>
 $(function(){
    // $("#di").css("background","red")
    $("div").css("background","green")
    // $("p").css("background","skyblue")
 })
</script>

jq省略循环

<body>
    <div id="di">
        <p>东方不败1</p>
        <p>东方不败1</p>
        <p>东方不败2</p>
        <p>东方不败3</p>
        <p>东方不败4</p>
    </div>
</body>
<script>
 $(function(){
 $("p").css('background','skyblue')
 })
</script>

根据div找对象的两种方法

  <body>
          <div id="12">东方不败</div>
          <div id="13">东方不败</div>
          <div id="14">东方不败</div>
          <div id="15">东方不败</div>
          <div id="16">东方不败</div>
        </body>
        <script>
            $(function() {
               $('div#15').css('background','skyblue')
            });
        </script>

 <body>
            <div id="12">东方不败</div>
            <div id="13">东方不败</div>
            <div id="14">东方不败</div>
            <div id="15">东方不败</div>
            <div id="16">东方不败</div>
          </body>
          <script>
              $(function() {
                  $('div')
                 .filter('#15')
                     .css('background','skyblue')
              });
          </script>

:first选择第一个

    <body>
        <p>东方不败1</p>
        <p>东方不败2</p>
        <p>东方不败3</p>
        <p>东方不败4</p>
        <p>东方不败5</p>
    </body>
    <script>
        // jquery省略了循环
        $(function() {
            $("p:first").css("background", "skyblue");
        });
    </script>

:last选择最后一个

 <script>
        $(function() {
            $("p:last").css("background", "skyblue");
        });
    </script>

odd基数行变色

  <script>
        $(function() {
            $("p:odd").css("background", "skyblue");
        });
    </script>

even偶数行变色

  <script>
        $(function() {
            $("p:even").css("background", "skyblue");
        });
    </script>

title=hello支持自定义要加中括号

  <body>
            <div id="12">东方不败</div>
            <div id="13">东方不败</div>
            <div id="14">东方不败</div>
            <div id="15">东方不败</div>
            <div class="1" id="16">东方不败</div>
          </body>
          <script>
              $(function() {
                  $('div')
                 .filter('[class=1]')
                     .css('background','skyblue')
              });
          </script>

css一个参数是取值,两个是赋值
几乎所有的都需要加括号,不能用等号]
HTML多个取其中之一

   <body>
        <ul>
            <li>this is li tag 0</li>
            <li>this is li tag 1</li>
            <li>this is li tag 2</li>
            <li>this is li tag 3</li>
            <li>this is li tag 4</li>
            <li>this is li tag 5</li>
            <li>this is li tag 6</li>
        </ul>
    </body>
    <script>
        $(function() {
            alert($('li').html())
        });
    </script>

text可以取多个

    <body>
        <ul>
            <li>this is li tag 0</li>
            <li>this is li tag 1</li>
            <li>this is li tag 2</li>
            <li>this is li tag 3</li>
            <li>this is li tag 4</li>
            <li>this is li tag 5</li>
            <li>this is li tag 6</li>
        </ul>
    </body>
    <script>
        $(function() {
            alert($('li').text())
        });
    </script>

filter是在div里面找,has是在div的子元素里面找
prev找上一个

  <body>
        <ul>
            <li>this is li tag 0</li>
            <li>this is li tag 1</li>
            <p>nihs</p>
            <h1>hhh</h1>
        </ul>
    </body>
    <script>
        $(function() {
           $('h1')
           .prev()
           .prev()
           .prev()//可以一直连续跳
           .css('background','red')
        });
    </script>

index找兄弟

   <body>
        <div>
            <h2>this is a tag h2_1</h2>
            <h2>this is a tag h2_2</h2>
            <h2>this is a tag h2_3</h2>
            <h2>this is a tag h2_4</h2>
            <h3 id="h3">this is a tag h3_1</h3>
            <h3>this is a tag h3_2</h3>
            <h3>this is a tag h3_3</h3>
            <h3>this is a tag h3_4</h3>
        </div>
    </body>
    <script>
        $(function() {
            console.log($("#h3").index());//按照下标排
        });
    </script>

attr()一个参数取值

<body>
    <p class="我是杀心观音"></p>
    
</body>
<script>
 $(function(){
     alert($('p').attr('class'))
 })
</script>

remove删除,removeClass删除类

<body>
    <p class="我是杀心观音"></p>
    <p class="我是杀心观音1"></p>
    
    
</body>
<script>
 $(function(){
     $('p').removeClass('我是杀心观音')
 })
</script>

<body>
    <p class="我是杀心观音"></p> 
    <h1>woshi h1</h1> 
</body>
<script>
 $(function(){
     $('p').remove()
 })
</script>//没有类的

addClass增加类

<body>
    <p class="我是杀心观音"></p>  
</body>
<script>
 $(function(){
     $('p').addClass('woshi')
 })
</script>

insertbefore 插在什么之前

<body>
    <p class="我是杀心观音"></p> 
    <h1>woshi h1</h1> 
</body>
<script>
 $(function(){
     $('h1').insertBefore($('p'))
 })
</script>
//在浏览器查看器显示insertbefore,appendto都是这样查看

appendto把a作为B的第一个儿子

<body>
    <p class="我是杀心观音"></p> 
    <h1>woshi h1</h1> 
</body>
<script>
 $(function(){
     $('p').appendTo($('h1'))
 })
</script>

append把a的子元素的前面追加一个儿子

<body>
    <p class="我是杀心观音"></p> 
    <h1>woshi h1</h1> 
</body>
<script>
 $(function(){
     $('p').append($('h1'))
 })
</script>

insertafter插在后面

<body>
    <p class="我是杀心观音"></p> 
    <h1>woshi h1</h1> 
</body>
<script>
 $(function(){
     $('p').insertAfter($('h1'))
 })
</script>

mouseover,click移入和点击事件

  <body>
    <div class="1">东方不败</div>
  </body>
  <script>
    $(function() {
      $("div").css("background", "skyblue").click(function(){
        alert("hello world");
      });
    });
  </script>

on可以让click和mouseover一块写

        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: #0f0;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    <script>
        $(function() {
            $("div").on("click mouseov", function() {
                alert("has clicked");
            });
        });
    </script>

        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: #0f0;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    <script>
        $(function() {
            $("div").off("click", function() {
                alert("has clicked");
            });
        });
    </script>

jquery基础02

选择网页元素