jQuery常用方法

javascript

jQuery常用方法

以下会列出一些jQuery常用的方法，包括下拉列表、单选框、复选框等的值的获取，常用的选择器，常用的选择器会用到的方法。

  1. AJAX请求。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $.ajax({
      type: "get",
      async: true, //默认设置为true，所有请求均为异步请求。
      url: "xxxxx.php",
      data: {
        uname: 'user',
        con: 'test content'
      },
      dataType: "json", //xml、html、script、jsonp、text
      beforeSend: function() {},
      complete: function() {},
      success: function(data) {
        alert(data)
      }
      error: function() {},
    });

  2. 获取复选框checkbox，并判断是否选中。

    1
    2
    $("input[type='checkbox']").is(':checked');
    //true为选中。

  3. 获取复选框checkbox的值。

    1
    2
    3
    4
    var c_val =[]; 
    $('input[name="cbox"]:checked').each(function(){ 
      c_val.push($(this).val()); 
    });

  4. 复选框checkbox 的 全选/反选/选择奇数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    $("#btn1").click(function() {
      $("[name='checkbox']").attr("checked", 'true'); //全选 
    });
    $("#btn2").click(function() {
      $("[name='checkbox']").removeAttr("checked"); //取消全选 
    });
    $("#btn3").click(function() {
      $("[name='checkbox']:even").attr("checked", 'true'); //选中所有奇数 
    });
    $("#btn4").click(function() {
      $("[name='checkbox']").each(function() { //反选 
        if ($(this).attr("checked")) {
          $(this).removeAttr("checked");
        } else {
          $(this).attr("checked", 'true');
        }
      })
    })

  5. 获取下拉列表select的值。

    1
    $('#select').val();

  6. 获取单选radio的值。

    1
    2
    3
    $('input:radio:checked').val(); //方法 1
    $("input[type='radio']:checked").val(); //方法 2
    $("input[name='rad']:checked").val(); //方法 3

  7. 设置第一个radio为选中。

    1
    2
    $('input:radio:first').attr('checked', 'checked');
    $('input:radio:first').attr('checked', 'true');

  8. 根据索引值设置任意一个radio为选中。

    1
    2
    $('input:radio').eq(索引值).attr('checked', 'true'); //索引值=0,1,2....
    $("input[value='rd2']").attr('checked','true');

  9. jQuery对象和Dom对象的互相转化。

    1
    2
    3
    4
    5
    6
    7
    8
    // Dom对象 转为 jQuery对象
    $(document.getElementById("msg"));
    // jQuery对象 转为 Dom对象
    $('#msg')[0];
    $('div').eq(1)[0];
    $('div').get()[1];
    $('td')[5];

  10. 同一个函数使用set和get。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    $("#msg").html(); //返回id为msg的元素节点的html内容。
    $("#msg").html("<b>new content</b>");
    //将"<b>new content</b>" 作为html串写入id为msg的元素节点内容中, 页面显示粗体的"new content"
    $("#msg").text(); //返回id为msg的元素节点的文本内容。
    $("#msg").text("<b>new content</b>");
    //将"<b>new content</b>" 作为普通文本串写入id为msg的元素节点内容中, 页面显示"<b>new content</b>""
    $("#msg").height(); //返回id为msg的元素的高度
    $("#msg").height("300"); //将id为msg的元素的高度设为300
    $("#msg").width(); //返回id为msg的元素的宽度
    $("#msg").width("300"); //将id为msg的元素的宽度设为300
    $("input").val(); //返回输入框的值
    $("input").val("test"); //将输入框的值设为test
    $("#msg").click(); //触发id为msg的元素的单击事件 
    $("#msg").click(fn); //为id为msg的元素单击事件添加函数
    //类似的还有blur, focus, select, submit事件

  11. 集合处理功能。

    1
    2
    3
    4
    5
    6
    7
    8
    $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
    //为索引分别为0，1，2的p元素分别设定不同的字体颜色。
    $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
    //实现表格的隔行换色效果
    $("p").click(function(){alert($(this).html())})
    //为每个p元素增加了click事件，单击某个p元素则弹出其内容

  12. 功能拓展。

    1
    2
    3
    4
    5
    6
    7
    8
    //为jquery扩展了min,max两个方法
    $.extend({ 
      min: function(a, b){return a < b?a:b; },
      max: function(a, b){return a > b?a:b; }
    });
    //调用方式 
    alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

  13. 修改元素的样式。 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $("#msg").css("background"); //返回元素的背景颜色
    $("#msg").css("background","#ccc") //设定元素背景为灰色
    $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
    $("#msg").height(300); //设定宽高
    $("#msg").width("200"); 
    $("#msg").addClass("select"); //为元素增加名称为select的class
    $("#msg").removeClass("select"); //删除元素名称为select的class
    $("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class

  14. jQuery的自定义事件。

  • hover(fn1, fn2): 一个模仿悬停事件的方法。移入时触发fn1，移出时触发fn2. 

    1
    2
    3
    4
    5
    6
    7
    8
    $('tr').hover(
      function(){
        $(this).addClass("over");
      },
      function(){
        $(this).removeClass("over");
      }
    );

  • ready(fn): 当Dom全部载入就绪的时候会执行的一个函数，与$(fn)等价。不同于onload的是，onload需要图片加载完毕才会触发。

  • toggle(evenFn, oddFn): 每次点击时切换需要调用的函数，奇数次点击的时候触发evenFn，偶数次点击触发oddFn。

    1
    2
    3
    4
    5
    $("p").toggle(function(){ 
      $(this).addClass("selected"); 
    },function(){ 
      $(this).removeClass("selected"); 
    });

  • trigger(event_type): 为匹配的元素触发某类事件。

    1
    $('#btn').trigger('click');

  • bind(event_type, fn), unbind(event_type): 事件的绑定与解除绑定。 

    1
    2
    3
    4
    5
    6
    7
    8
    //为每个p元素添加单击事件 
    $("p").bind("click", function() { alert($(this).text()); });
    //删除所有p元素上的所有事件 
    $("p").unbind();
    //删除所有p元素上的单击事件
    $("p").unbind("click");

本文标题:jQuery常用方法

文章作者:Yausing

发布时间:2017年05月02日 - 10时35分

最后更新:2017年05月02日 - 12时03分

原始链接:http://zhuoyousheng.cn/jquery-useful-function/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. jQuery常用方法
,