浅谈JQuery选择器（一）

浅谈JQuery选择器（一）

 

<script type="text/javascript">
       /**第一步加载html页面*/
      // window.onload = function(){};//加载html 并且加载外部所有的引用文件(图片,css样式,js等)
      
       /**Jquery*/
       //window --->location  /history/document/Na...
       //DOM对象 是不能使用Jquery中的方法的. JQuery中的对象是不能使用DOM对象的方法
       //但是它们之间可以相互转换
       //那又是怎么转换的呢?
       /**
          讲解第一种:DOM对象转换成Jquery对象的方式
           1、对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象
            var document = window.document;//DOM对象
            实现转换方式如下：
            var $document=$(document);//$()从哪里来 到底从哪里来？
 
       */
       /**Jquery的页面载入事件处理方式 */
       $(document).ready(function (){  //加载html 立即加载
           alert("第一个Jquery的案例")
       });   
       $(function(){
  alert("加载页面");
       });
       /**理解：
               1、Jquery的引入方式
               2、$的由来
               3、DOM对象与Jquery对象转换
               4、理解匿名函数的处理*/

</script>

JQuery对象转换成DOM对象
<script>
/**
  在这里重点介绍：
       一：Jquery中的基本选择器
               1、id选择器
               2、class选择器
               3、元素选择器器
               4、*
               5、并列选择器 用英文的逗号区分
       二：重点介绍了Jquery对象转换成DOM对象的方法
               1、Jquery对象返回的是一个数组对象可以采用如下方式转换
                   var domObject = $("#thed")[0];
               2、可以采用Jquery中get(index)方法获取
                    get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象
       三：重点介绍Jquery对象中的get(index)方法,size()方法,length属性

*/
    $(document).ready(function(){
      //ID匹配的选择器Jquery对象
       //alert($("#thed"));
     /**转换成DOM对象的方式
       1、Jquery对象返回的是一个数组对象可以采用如下方式转换
         var domObject = $("#thed")[0];
       */
      alert(($("#thed")[0]).innerHTML);
    
      
      //class匹配选择器Jquery对象
      alert($(".rdc"));
      /**
        2、Jquery对象转换成DOM对象可以采用Jquery中get(index)方法获取
 
        get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象
      */
      var domObject = $(".rdc").get(0);
      alert(domObject.innerHTML);
     
     
     
      //* 匹配所有的元素的Jquery对象
        alert($("*"));
    
       alert($("*").get(0).innerHTML)
     
      //根据给定的元素名称获取Jquery对象
      alert($("tr"));
      /**采用第一种方式把$("tr")转换成DOM对象*/
      alert(($("tr")[$("tr").size()-1]).innerHTML);
      alert(($("tr")[$("tr").length-1]).innerHTML);
     
      //匹配所有选择器的Jquery组合对象
      alert($("tr,tr.rdc"));
     
      alert($("tr,tr.rdc")[$("tr,tr.rdc").length-1].innerHTML)
     
    });

</script>

<style>
   #thed{
     background-color: blue;
   }
  
   .rdc{
     background-color: red;
   }
   #tbdy rdc{
  
   }
</style>

//=============层次关系，及CSS样式

   <script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
  
   <script>
   /**   
           层次元素关系
               1、祖先关系   空格符号
               2、父子关系   大于符号   >
               3、紧跟的关系  +符号
               4、紧跟后的所有兄弟关系  ~符号
           CSS样式
               1、css("");带有一个参数是获取其属性的值
               2、css("","");为其对象设置一个指定的属性和属性值
               3、css(properties);把一个"名/值对"对象设置为所有匹配元素的样式属性 {"":"","":""...};
        
       */
      $(document).ready(function(){
           /**层级元素选择器的使用方式*/
           /**祖先关系 符号为===>空格*/
           var $frmipts = $("div input");//获取div元素的后代的所有input的元素 返回一个Jquery对象
           /**输出Jquery对象的大小*/
           alert("后代个数是："+$frmipts.size());
          
           /**父子关系 符号为===>>*/
           var $ipt = $("form>input");
           //为你获取的input添加背景颜色
           /**采用Jquery对象转换成DOM对象后使用style样式进行设置的*/
           var iptt = $ipt[0];
           iptt.style.backgroundColor="red";
          
           alert("-----------改变中介线---------------");
           /**采用Jquery对象本身的css方法来设置样式*/
           $ipt.css("background-color","blue");
          
           /**匹配所有紧接在某个元素后的某个元素 符号为===> +*/
           var $lipts=$("label+input");
           /**为其添加背景颜色*/
           $lipts.css("background-color","green");
          
           /**匹配 prev 元素之后的所有 siblings(兄弟) 元素  符号为====> ~*/
           var $fipts = $("form~input");
           $fipts.css("background-color","yellow");
           /**我使用到了CSS样式
             .css("")//获取其样式属性的值
              案例： $fipts.css("background-color");
             .css("","") //为其添加样式属性及属性值
              $fipts.css("background-color","yellow");
             .css(Map);//把一个"名/值对"对象设置为所有匹配元素的样式属性。
              $fipts.css({"background-color":"red","color":"blue"});
             */
           alert("获取该Jquery对象的背景颜色值："+$fipts.css("background-color"));
          
   
      });
//----------------------------------------------------
<script>
    /**
           简单选择器
              1、：first 匹配的第一个
              2、：last 匹配的最后一个
              3、：lt(index) 小于某个的
              4、：gt(index) 大于某个的;
              5、：eq(index) 等于某个  相当于过滤器中的.eq(index)
              6、：even 奇数行 
              7、：odd  偶数行
              8、：header 匹配h1,h2 h3 等标题
              9、：not 除去匹配的(剩下的)
          过滤器：
                .eq(index)匹配某个
          属性中html代码
             .html()返回整个html文本
          属性的文本
             .text();返回这个html代码中的文本内容 如果是多个就组合文本内容并返回
         
         //纠正：开始讲的过滤器
    */
    /**页面载入事件处理*/
    $(function(){
        //获取class类别选择器JQuery对像集合中的第一个对象
        var $tr1 = $(".rdc:first");
        //属性：.html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
        alert($tr1.html());
        //获取class选择器对象集合中的最后一个对象
        var $ltr = $(".rdc:last");
        //属性:.text();结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
        alert($ltr.text());
        /** even匹配的是索引是:0 2 4 但行数是1,3 5......
          :even 选择奇数行并且为其添加背景颜色为红色*/
        $("tr:even").css("background-color","red");
        /** :odd 选择偶数行并且为其添加背景颜色为蓝色*/
        $("tr:odd").css("background-color","blue");
       
        /**$("tr")取得所有的行的JQuery对象的集合
           .eq(index)匹配一个给定索引值的元素的Jquery对象
           .css("","")为Jquery对象添加一个样式属性和属性值
           对象链式操作*/
        $("tr:eq(2)").css("background-color","yellow");
        //等效于
        $("tr").eq(2).css("background-color","yellow");
        /**集合 List   --->get(index)--->具体的对象--->具体对象的方法*/
       
        /**取得所有行的Jquery对象集合索引值小于1的所有的tr对象样式设置为green*/
        $("tr:lt(1)").css("background-color","green");
       
        /**取得索引大于1 并且把背景颜色设置为black*/
         $("tr:gt(1)").css("background-color","black");
       
         //匹配不是最后一行的样式背景颜色统一设置为红色
         $("tr:not(:last)").css("background-color","red");
        
         //匹配标题
         alert($(":header").html());
       
       
       
    });
   
</script>