JQuery 一些基础

   3.核心对象及常用方法和属性
     a)名称
     jQuery和$
     用$找出来的对象叫jQuery对象
     用document找出来的对象叫Dom对象
    
     b)dom和jquery对象转换
     jQuery对象.get(0) --->dom对象
     $(dom对象)--->jQuery对象
   
     c)jQuery对象方法
      .show() 显示
      .hide() 隐藏
      .toggle() 显示或隐藏切换
    

      $("div").hide(); 
      $("#myid").show(); 
      $(".myclass").show(100); 
      

      .size() 找到多少个对象
      var n = $("div").size()

      文本框赋值(value)
    

 $("#myid").val(123); 
      .val()取值 

      层的内容.innerHTML/.innerText
    

 $("div").html() ; 
      $("div").html(123); 
      $("div").html("<input type=button>"); 
      $("div").text("<input type=button>"); 

      样式 document....style.color="red"
    

 $("div").css("color","red").css("font-size","18"); 
      $("div").css({color:"red","font-size":18}); 

      删除
    

 $("div").remove(); 删除所有div 

      添加
      父加子:

 $("div").append("<input button>"); 
              $("div").append( $("#myid") ); 

      子加父
          

$("input").appendTo(  $("div") ); 

      对象属性
    

   $("input").attr("checked",true); 

      去首尾空格:
         $.trim(字符串)
$("div").each(  function(i,obj){}  );
$.post(url,function(x){});
$.post(url,{键:值},function(x){});
$.getJSON(url,function(x){//这里x已转成json了，不要用eval});

      克隆
        $("div").clone();

4. 选择器
    a) 类选择器
       <input type=text class="myclass">
       $(".myclass")     找多个
    b) id选择器  
       <input type=text id="myid">
       $("#myid") 找一个
       相当于:document.getElementById("myid")
    c) 标记选择器   找多个
       $("div,span")
       相当于document.getElementsByTagName()
    d) 表单选择器
       $(":text")   所有文本框
       $("input[type=text][value='']")

       $(":radio")  所有单选框
       $(":checkbox") 所有复选框
    e) 表单属性选择器
       $(":checkbox:checked")或$(":checked:checkbox")
       $(":checked")  找所有选中（单选框和复选框)
       $(":selected") 找所有选中列表框
    f) 层级选择器
       父找子 d找c
       $("table").find("tr")  //找子孙都可以
       $("table>tbody>tr") 找所有tr
       $("table>tbody>tr:first") 找第一行
       $("table>tbody>tr").eq(0) 找第一行
       $("table>tbody>tr:odd")   所有奇数行
       $("table>tbody>tr:even")  所有偶数行

       子找父
       $("tr").parent()

       找兄弟
       $(a).next() 下一个
       $(b).prev() 上一个

评论

1 楼 吃萝卜的外星人 2012-11-02