jquery操作案例版

<script type="text/javascript" src="xxx.js"> </script> 

//-----//选择器找到节点

//-----//对节点的dom操作

 

1.jQuery编程的步骤:

 

  第1步，使用选择器找到要操作的dom对象,该dom对象会被封装成jQuery对象

  

  第2步，通过调用jQuery对象的方法或者属性来操作底层被封装的dom对象

  
  例子:
   function f1(){
    //第一步，使用选择器找到要操作的dom对象,
    //该dom对象会被封装成jQuery对象。
    //变量以$开头只是一个编程习惯
    var $obj = $('#d1');
    //第二步，通过调用jQuery对象的方法或者
    //属性来操作底层被封装的dom对象。
    //$obj.html('hello java');
    $obj.css('font-size','60px').css('color','red');
    
   }
 

2.dom对象与jQuery对象之间的转换

 

  2.1.dom对象 --- > jQuery对象

  
   $(dom对象)
  
   例子:
    function f2(){
    var obj = document.getElementById('d1');
    //将dom对象转换成jQuery对象
    var $obj = $(obj);
    $obj.html('hello java');
   }
   

  2.2.jQuery对象 ---> dom对象

  
   $obj.get(0)或者 $obj.get()[0]
                           
   例子: 
    function f3(){
     var $obj = $('#d1');
     //jQuery对象 ---> dom对象
     //var obj = $obj.get(0);
     var obj = $obj.get()[0];
     obj.innerHTML = 'hello java';
    }
  

3.同时使用prototype和jQuery

 
  使用 jQuery.noConflict()将 $函数改名。
  
   例子:
    function f2(){
     //将jQuery的$函数改一个名 $a
     var $a = jQuery.noConflict();
     //var obj = $('d1');
     //obj.innerHTML = 'hello java';
     $a('#d1').html('hello java');
    }
 

4.jQuery选择器://查找要操作的节点(dom对象)

 

  4.1.基本选择器

  
   #id     -------- id选择器
   .class  -------  类选择器
   element -------  html元素选择器
   selector1,select2..selectn------分组选择器
   *  --------   全部的节点对象
   
   例子:
    function f1(){
     //$(选择器):如果返回的是多个dom节点,
     //仍然封装成一个jQuery对象。
     var $obj = $('.s1');
     $obj.css('font-size','60px');
     }
     
     function f2(){
      $('div').css('font-size','60px');
     }
     
     function f3(){
      $('#d1,p').css('font-size','60px');
     }
     
     function f4(){
      $('*').css('font-size','60px');
    }
     

  4.2.层次选择器

  
   select1 select2     ---所有的子节点和孙子节点中，是select2的节点(常用)
   select1>select2  ---子节点中，是select2的节点
   select1+select2  ---下一个兄弟节点(紧临的)中，是select2的节点
   select1~select2  ---下面的兄弟节点(可以不是紧临的)中，是select2的节点
   
   例子: 
    function f1(){
      $('#d0 div').css('font-size','60px');
    }
    
    function f2(){
     $('#d0>div').css('background-color','green');
    }
    
    function f3(){
     $('#d2+p').css('font-size','60px');
    }
    
    function f4(){
     $('#d1~div').css('font-size','60px');
    }

   

  4.3.过滤选择器

  

   4.3.a,基本过滤选择器 

    
     :first      第一个
     :last    最后一个
     :not(selector)  not(选择器)把这个排除在外
     :even     第偶数个
     :odd  第奇数个
     :eq(index)  等于index(index从0开始)(把所有的都一起排序)
     :gt(index) 大于index(index从0开始)
     :lt(index) 小于index(index从0开始)
   
     例子： 
      function f1(){
      $('#t1 tr:first').css('background-color',
       '#cccccc');
      }
      
      function f2(){
       $('thead tr').css('background-color','#cccccc');
       $('tbody tr:even').css('background-color','#fff8dc');
       $('tbody tr:odd').css('background-color','yellow');
      }
      
      function f3(){
       $('tbody tr:eq(1)').css('background-color','yellow');
      }
      
      function f4(){
       $('tbody tr:not(#l2)').css('background-color','yellow');
      }
     

   4.3.b,内容过滤选择器

    
     :contains(text) 匹配包含给定文本的元素
     :empty    匹配所有不包含子元素或者文本的空元素
     :has(selector)  匹配含有选择器所匹配的元素的元素
     :parent   匹配含有子元素或者文本的元素

     例子:
      function f1(){
       $('div:contains(吃饭)').css('font-size',
       '60px');
      }
      
      function f2(){
       $('div:empty').html('一会就会吃');
      }
      
      function f3(){
       $('div:has(span)').css('color','red');
      }
      
      function f4(){
       $('div:parent').css('font-size','60px');
      }
     

   4.3.c,可见性过滤选择器

   
     :hidden 匹配所有不可见元素，或者type为hidden的元素
     :visible 匹配所有的可见元素

     例子:
      function f1(){
       //$('div:hidden').css('display','block');
       $('div:hidden').show('slow');
      }
      
      function f2(){
       //$('div:visible').css('display','none');
       $('div:visible').hide('slow');
      }
     

   4.3.d,属性过滤选择器

   
     [attribute]     找到具有这个属性的节点
     [attribute=value] 找到具有这个属性属性等于这个值的节点
     [attribute!=value] 找到具有这个属性属性不等于这个值的节点

      例子:
       function f1(){
        //具有id属性的节点
        $('div[id]').css('font-size','60px');
       }
       
       function f2(){
        //具有id属性的节点
        $('div[id=d2]').css('font-size','60px');
       }
       
       function f3(){
        //具有id属性的节点
        $('div[id!=d2]').css('font-size','60px');
       }
     

   4.3.e,子元素过滤选择器

   
    index下标从1开始
   
     :nth-child(index/even/odd)  下标从1开始，每一个分别处理

     例子:
      function f1(){
       //$('ul li:eq(1)').css('font-size','60px');
       $('ul li:nth-child(2)').css('font-size','60px');
      }
     

   4.3.f,表单对象属性过滤选择器

   
     :enabled  没有被禁止的
     :disabled  选择被禁止输入的表单选项
     :checked  单选,多选的属性之一,表示被选中的
     :selected  下拉列表的属性,被选中的
     
     例子:
      function f1(){
       $('#form1 input:disabled')
       .css('border','1px dotted red');
      }
      
      function f2(){
       $('#form1 input:enabled')
       .css('border','1px dotted red');
      }
      
      function f3(){
       // val()方法相当于value属性
       var v1 = $('#form2 input:checked').val();
       alert(v1);
      }
      
      function f4(){
       var v1 = $('#form3 select option:selected').val();
       alert(v1);
      }

     
  4.4.表单过滤选择器

  
   :input
   :text
   :pasword
   :radio
   :checkbox
   :submit
   :image
   :reset
   :button
   :file
   :hidden

 

5.dom操作//(节点的增删改查,以及属性和样式操作)

 

  5.1.查询节点的内容

 

   html()  : html内容
   text()  : 文本内容
   val()  : 值  相当于value属性
   attr(属性名) : 属性的值
   
   这四个方法还可以设置对应的值。
   
   例子:  
      function f1(){
       //alert($('#d1').html());
       alert($('#d1').text());
      }
      
      function f2(){
       $('#d1').html('hello java');
      }
      
      function f3(){
       //alert($(':text').val());
       $(':text').val('tom');
      }
      
      function f4(){
       alert($('#d1').attr('id'));
      }
      
      function f5(){
       $('#d1').attr('class','s1');
      }
   

  5.2.创建节点

  
   $(html内容);
   

  5.3.插入节点

  
   父节点.append(本节点); //作为最后一个孩子添加//如果本节点原来有就被移动了
   父节点.prepend(本节点); //作为第一个孩子添加
   兄弟节点.after(本节点); //作为下一个兄弟添加
   兄弟节点.before(本节点); //作为上一个兄弟添加
 
   //可以简化，直接在()里添加html内容
   
   例子:
     function f1(){
      var $div = $('<div>是一个唐朝的大诗人，号称诗仙</div>');
      //append:作为最末一个孩子添加进来。
      $('body').append($div);
      //prepend:作为第一个孩子添加进来。
      $('body').prepend($div);
     }
     
     function f2(){
      //after:作为下一个兄弟添加进来。
      var $p = $('<p>hello</p>');
      $('ul').after($p);
     }
     
     function f3(){
      //before:作为上一个兄弟添加进来
      var $p = $('<p>hello</p>');
      $('ul').before($p);
     }
     
     function f4(){
      //append方法，当然也包括其它类似的方法，可以
      //简化。
      $('body').append('<div>一个大诗人</div>');
     }
   

  5.4.删除节点

  
   节点.remove();//删除这个节点
   节点.empty();//清空这个节点的内容, 此节点还在,子节点没有了
   节点.remove('选择器');//删除选择器选择的这个节点

   例子:
    function f1(){
     //$('ul li:eq(1)').remove();
     //empty:节点还在，内容清空
     $('ul li:eq(1)').empty();
    }
    
    function f2(){
     $('ul li').remove('#l2');
    }

   
  5.5.如何将js代码与html分开

  
    //用$()函数里面写一个匿名函数:
      //表示页面加载完毕开始调用这个js方法,实现分离
     
     //数据-----html文件
     //样式-----css文件
     //操作-----js文件
  
    例子：
     //javascript代码
    
     //当整个页面加载完毕，会产生load事件。
     window.onload = function(){
      var obj = document.getElementById('d1');
      obj.onclick=function(){
       this.innerHTML = 'hello jetty';
      }
     };
     
     //jQuery代码,类似上面代码的功能
     
     $(function(){
      //整个页面加载完毕，会执行这儿的代码
      $('#d1').click(function(){
       //this表示绑订了click事件的那个dom对象
       //this.innerHTML = 'hello jetty';
       //$(dom对象): 把dom对象封装成了jQuery对象。
       $(this).html('hello jetty');
      });
     });
  

     5.6.复制节点

     
      节点.clone();//复制节点
   clone(true);//将事件一块复制
   
   例子：
    $(function(){
     $('ul li:eq(2)').click(function(){
      alert('你点击了item3');
     });
     
     $('#b1').click(function(){
      var $obj = $('ul li:eq(2)').clone(true);
      $('ul').append($obj);
     });
    });

  
  5.7.属性操作

  
   读取 : attr('');
   设置 : attr('','');
   设置多个 : attr({"":"","":""});
       比如$obj.attr({'id':'d1','class':'s1'});
   删除 : removeAttr('')
  

  5.8.样式操作

  
   获取和设置 : attr("class","")或者attr('style':'');
   追加  : addClass('');
   移除  : removeClass('');
        或者removeClass('s1 s2');
        或者removeClass();//会删除所有样式
   切换样式  : toggleClass('');//有该样式，就删除，没有，就添加。
   是否有某个样式: hasClass('');
   读取   : css('');
   设置  : css('','');
       或者css({'':'','':''});//设置多个样式
   
   例子:
    $(function(){
     $('#b1').click(function(){
      $('#d1').attr('class','s1');
      $('#d1').attr('style','color:red;font-size:60px;');
      
      $('#d1').addClass('s1');
      
      $('#d1').addClass('s1 s2');
      
      $('#d1').removeClass('s1');
      
      $('#d1').toggleClass('s3');
      
      alert($('#d1').hasClass('s3'));
      
      $('#d1').css({'font-size':'80px','color':'blue'});
     });
     
    });
       

       
  5.9.遍历节点

  
 
   children() / children(selector);//所有的子元素,只考虑子元素，不考虑其它后代元素(孙元素)
   next() / next(selector);  //下一个兄弟(紧临的)
   prev() / prev(selector);  //上一个兄弟(紧临的)
   siblings() / siblings(selector);//其他兄弟(包含不紧挨着的)
   find(selector);  //从当前节点开始查找所有的后代(包含孙子节点)中符合选择器要求的节点
   parent() / parent(selector); //父节点，通过子节点找父节点 

   例子:
    $(function(){
     $('#b1').click(function(){
      var $obj = $('#d1').children();
      //length属性：获得jQuery对象包含的dom
      //对象的个数
      var length = $obj.length;
      alert(length);
      
      var $obj = $('#d1').children('div');
      $obj.css('font-size','60px');
      
      $('#d2').next('div').css('font-size','60px');
      
      $('#d2').prev().css('font-size','60px');
      
      $('#d2').siblings('div').css('font-size','60px');
      
      $('#d1').find('p').css('font-size','60px');
      
      alert($('#d2').parent().attr('id'));
     });
    });