您的位置:首页 > Web前端 > JQuery

jQuery必知必熟基础知识

2011-12-17 16:04 417 查看
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值
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息