jQuery必知必熟基础知识

jQuery
   1.特点:
   小巧
   功能强
   跨浏览器
   插件

   2.使用
    实际是js文件
    a)  复制js到WebRoot
    b)  页面<script src="jquery.js" charset=""></script>

   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() 上一个


---jQuery对表格tr的操作
function bh()  //序号进行编号
      {
        jQuery("#t>tr").each(function(i,obj){
           obj.cells[0].innerHTML=i+1;
        });
      }
      function addRow() //添加一行tr
      {
       var tr = jQuery("#t>tr:first").clone().appendTo(jQuery("#t"));
          tr.find(":text").val("");
          tr.find("td").eq(4).html("");  //eq(4)第二个文本框

          bh();
      }
          function droRow(del) //删除一行tr
      {
         jQuery(del).parent().parent().remove();
         bh();
      }
     
      //计算输入文本中数字的结果 
      function js(js)
      {
         //找到tr
         var tr=jQuery(js).parent().parent();
         //取数
         var sl=tr.find(":text").eq(1).val();
         var jg=tr.find(":text").eq(2).val(); 
         tr.find("td").eq(4).html(sl*jg);
        
      }

单选radio取值：jQuery("input[@type=radio][name=ckbb][checked]").val();
<-------------------------------------------------------------

其它看到的：
获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;

获取值：

文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();

控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容

多选框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 （错）
$("input[@name=radio_s][@value=16]").attr("checked",true);（测试通过）

下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 （错）

$("select[name=sex] option[value="-sel3"]").attr("selected",true);(测试通过)


$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框

$("#select1")[0].options(index).selected = true; //使第index个option选中
   $("#select1")[0].options(3).text //取索引为3的option值

评论

19 楼 yzz9i 2011-02-07  

会继续更新的..　大家过年好！过年很少上了..

18 楼 caoxiaoj2ee 2011-01-25  

Dxx23 写道

JQuery现在工作需求多了！应当学习！

很好的东西；

17 楼 Dxx23 2011-01-18  

JQuery现在工作需求多了！应当学习！

16 楼 hua758209 2011-01-08  

还行，可以当作回顾，本人用的都是比较浅显的

15 楼 boygirl 2011-01-07  

感觉基础的东西还是最实在的

14 楼 dir_murong 2011-01-06  

期待lz把动画 ajax 部分的jq总结一下 那样我就不用翻书了 看这个帖子就够了

13 楼 janrn 2011-01-06  

基础很重要,很多都是用到时才去找

12 楼 dahua110 2011-01-05  

为什么一定要加上“必知必熟”呢    不喜欢的你“必X必X”系列    都很浅显   内容又不够丰富 

11 楼 yzz9i 2011-01-04  

谢谢各位的支持! 在这个学习过程当中，我会将自己知道的技术知识点都将全部通过这种方式跟大家一起分享探讨，即便现在还是些基础性知识、基础性技术.. 相信这不仅是一种自己学习总结的好方式，更是一种跟大家相互交流学习的好方式.

10 楼 shouzhang1_2 2011-01-04  

以前还真没有注意这些用法。用的最多的就是$()呵呵，，

9 楼 smzd 2011-01-04  

经常总结是成功必经之途啊！祝福楼主！

8 楼 dreams2018 2011-01-04  

很基础,总结的很好

7 楼 william_ai 2011-01-03  

jquery 的minified and Gziped版本只有26K，可以接受的大小。

6 楼 fooxiaoqiang 2011-01-03  

不错，可以复习一下基础知识。好久没用jq了

5 楼 yzz9i 2011-01-03  

谢谢支持... 会继续更新的  这些都是必须懂得的！

4 楼 stormtoy 2011-01-03  

挺简单明了的

3 楼 linux1689 2011-01-03  

还是看书系统地学习 比较好一些。

2 楼 xiaodatao 2011-01-03  

不错，大体上看了一遍，复习了一下Jquery的基础知识！

1 楼 llyzq 2011-01-01  

还行，作为总结、复习的内容是足够了