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');
或者:
(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

浙公网安备 33010602011771号