java学习内容回顾（对象转化，选择器）

一.jQuery语法（jQuery：JavaScript程序库，将JavaScript对象和函数进行封装）

  1.在页面中引入jQuery库：

     <script src="js/jquery-1.8.3.js"type="text/javascript"></script>
 

  2.jQuery操作页面的使用   

    *1.addClass（）

      .a{color:red;font-size}  
        <ul>
         <li id="tv_li">jquery1</li>
         <li>jquery2</li>
         <li>jquery3</li>
         <li>jquery4</li>
        </ul>
     <script src="js/jquery-1.8.3.js"type="text/javascript"></script>
      $(document).ready(function(){
        $("#tv_li").click(function(){
            $(this).addClass("a")
        })
    })
     *click（）:点击事件       语法： $(对象).addClass(类选择器)

    *2.css()     语法$(对象).css({"属性":"属性值","属性":"属性值"})

     <ul>
         <li id="tv_li">jquery1</li>
         <li>jquery2</li>
         <li>jquery3</li>
         <li>jquery4</li>
        </ul>
     <script src="js/jquery-1.8.3.js"type="text/javascript"></script>
      $(document).ready(function(){
        $("#tv_li").click(function(){
            $(this).css({"font-size":"20px","color":"red"})
        })
    })

  3.链式操作（通过.next()实现）

   <h1>显示名称</h1>
    <p class="class">
    yaobinbinduipcdhhslnc
   </p>
   <script src="js/jquery-1.8.3.js"type="text/javascript"></script>
   <script>
    $(document).ready(function(){
      $("h1").click(function(){
          $("h1").css({"background-color":"red"}).next().css({"display":"block"})
      })
    })
   </script>

  *.next()：取得该元素的下一个同胞元素
 
                  
 

  4.Dom对象与jQuery对象之间的转化

    *1.Dom对象转化为jQuery对象

      var tv_div=document.getElementById("div")
      var $tv_div=$(tv_div)  

    *2.jQuery对象转化为Dom对象

      @1.var $tv_div=$("#div")
        var tv_div=$tv_div[0]
 
     @2.var $tv_div=$("#div")
        var tv_div=$tv_div.get(0)

  5.选择器

    *1.基本选择器

   

  *2层次选择器

 

*3属性选择器

*4基本过滤选择器