jQuery常用方法(持续更新)

(1)AJAX请求

$(function() {
  $('#send').click(function() {
    $.ajax({
      type: "GET", //GET或POST,
      async:true, //默认设置为true,所有请求均为异步请求。
      url: "http://www.idaima.com/xxxxx.php",
      data: {
        username: $("#username").val(),
        content: $("#content").val()
      },
      dataType: "json",        //xml、html、script、jsonp、text
      beforeSend:function(){},
      complete:function(){},
      success: function(data) {
        alert(data)
      },
      error:function(){},
    });
  });
});

 

(2) 如何获取checkbox,并判断是否选中

$("input[type='checkbox']").is(':checked') 
//返回结果:选中=true,未选中=false

(3) 获取checkbox选中的值

var chk_value =[]; 
$('input[name="test"]:checked').each(function(){ 
  chk_value.push($(this).val()); 
});

(4)checkbox全选/反选/选择奇数

$("document").ready(function() {
  $("#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下拉框的值

直接val就行了

$("#select").val()

(6)获取选中值,三种方法都可以:

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

 

(7)设置第一个Radio为选中值:

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

或者:

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

(8)设置最后一个Radio为选中值:

$('input:radio:last').attr('checked', 'checked');

或者:

$('input:radio:last').attr('checked', 'true');

(9)根据索引值设置任意一个radio为选中值:

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

或者:

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

(10)根据Value值设置Radio为选中值

$("input:radio[value='rd2']").attr('checked','true');

或者:

$("input[value='rd2']").attr('checked','true');

(11)关于页面元素的引用

通过jquery的$()引用元素,包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

(12)jQuery对象与dom对象的转换

可以通过$()转换成jquery对象

$(document.getElementById("msg"));

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。如:

$("msg")[0],

$("div").eq(1)[0],

$("div").get()[1],

$("td")[5]

这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。

(13)如何获取jQuery集合的某一项

对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:

$("div").eq(2).html();   //调用jquery对象的方法

$("div").get(2).innerHTML    // 调用dom的方法属性

(14)支持方法的连写

对一个jquery对象连续调用各种不同的方法,例如:

$("p").click(function(){

  alert($(this).html())

}).mouseover(function(){

  alert('mouse over event')

}).each(function(i){

  this.style.color=['#foo', '#0f0', '00f'][i]

})

(15)完善的事件处理功能

jQuery中几个自定义的事件:

(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

$("tr").hover(

  function(){

   $(this).addClass("over"); 

  },

  function(){

   $(this).addClass("out");

  })

 

(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 

$(document).ready(function(){alert("Load Success")})http://www.idaima.com/a/1663.html 

//页面加载完毕提示“Load Success”,不同于onload事件,onload需要页面内容加载完毕(图片等),而ready只要页面html代码下载完毕即触发。与$(fn)等价 

 

(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class

$("p").toggle(function(){

  $(this).addClass("selected");

},function(){

  $(this).removeClass("selected");

})

 

(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。

例如:

$("p").trigger("click"); //触发所有p元素的click事件

 

(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中(添加)删除绑定的事件。 

例如: 

$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件 

$("p").unbind(); //删除所有p元素上的所有事件 

$("p").unbind("click") //删除所有p元素上的单击事件

 

(16)几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。 

如toggle()方法包括了hide()和show()方法。 

slideToggle()方法包括了slideDown()和slideUp方法。

 

(17)jQuery实现回车监听

$(document).keyup(function(event){

  if(event.keyCode == 13){

    $("#submit").trigger("click");

  }

})

此处仅作交流学习,版权归原作者所有。

详细方法介绍,可见网址:https://www.hellojava.com/a/84.html

 

posted @ 2019-11-19 11:50  IT尘土  阅读(182)  评论(0)    收藏  举报