jQuery事件及取值赋值

jQuery事件

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义了点击后触发事件。您可以通过一个事件函数实现：

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

// 动作触发后执行的代码!!

});

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

实例

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

$(this).hide();

});

dblclick()

当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

实例

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

$(this).hide();

});

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

实例

$("#p1").mouseenter(function(){

alert('您的鼠标移到了 id="p1" 的元素上!');

});

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

实例

$("#p1").mouseleave(function(){

alert("再见，您的鼠标离开了该段落。");

});

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

实例

$("#p1").mousedown(function(){

alert("鼠标在该段落上按下！");

});

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

实例

$("#p1").mouseup(function(){

alert("鼠标在段落上松开。");

});

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

实例

$("#p1").hover(

function(){

alert("你进入了 p1!");

},

function(){

alert("拜拜! 现在你离开了 p1!");

}

);

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

实例

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

实例

$("input").blur(function(){

$(this).css("background-color","#ffffff");

});

jquery取值赋值

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

attr() - 用于获取属性值

$("#test").text() $("#test").html()

$("#val_test").val() $("a").attr("href")

jquery表单取值

文本框操作

取值

$("#text_id").attr("value");

$("#text_id").val();

$("input[type='text']").val();

清除

$("#text_id").attr("value",'');

赋值

$("#text_id").attr("value",'123′);

单选框操作

取值

$("input[@type=radio][@checked]").val();

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

$('input:radio:checked').val();

$("input[name='name_r']:checked").val(); //一组

$(":radio[checked]").each(function(radio){alert($(this).val());

选中

$('input:radio').eq(n).prop('checked', true);

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

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

$("input[value=val]").prop('checked', true);

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

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

$("#radio_id[value=val]").attr("checked",true);//选中

$("#radio_id[value=val]").attr("checked","");//取消

$("#radio_id[value=val]").attr("checked",false);//取消 $("#radio_id[value=val]").removeAttr("checked");//取消

多选框

取值

$("input[type=checkbox][checked]").each(function(){ alert($(this).val());//输出 }) $('input[name="name_c"]:checked').each(function(){ array.push($(this).val());//添加到数组 });

选中

$("#check_id[value=val]").attr("checked",true);//选择

$("#check_id[value=val]").attr("checked","");//取消选择 $("#check_id[value=val]").attr("checked",false);//取消选择 $("#check_id[value=val]").removeattr("checked");//取消选择

下拉框

取值(选中)

$("#selector").val(); $("#select option[selected]").text();

$("#select option:selected").text();

$("#select").find("option:selected").text();

赋值/选中

$("#selector").val("value");

$("#selector").find("option:contains('value')").attr("selected",true);

添加

$('<option value="red">red</option>').appendto($("#select"));

$("#select").append('<option value="red">red</option>');

清空

$("#select").empty();

$("#select").html("");

元素可用不可用

$("#id").attr("disabled",false);//设为可用

$("#id").attr("disabled",true);//设为不可用

表单重置

$('#form_q')[0].reset();

$(function(){

$("#reset").click(function(){

document.getElementById("form_q").reset();

})

})