JQuery教程 Headsen著

JQuery教程按Ctrl并单击链接访问作者Headsen博客。

目录JQuery教程按Ctrl并单击链接访问作者Headsen博客。

(1)一、使用JQuery处理表单元素 (2)（1）输入框、密码框、多行文本框 (2)（2）单选框、多选框 (2)（3）下拉单 (3)语法汇总解释： (3)二、绑定基本事件 (4)（1）为超链接、按钮等绑定单击等用户触发事件 (4)（2）使用bind为元素绑定事件 (5)（3）使用One为元素绑定一次性事件 (5)（4）一些特殊的绑定 (5)三、常用的选择器和过滤器 (6)常用选择器： (6)选择器基本筛选： (6)选择器属性筛选 (7)四、处理元素属性 (7)1、基本属性 (7)2、HTML文本 (8)3、非HTML文本 (8)4、CSS属性 (9)五、布局和样式 (9)1、基本样式 (9)2、尺寸 (9)六、使用JQuery实现Ajax操作 (10)一个JQuery操作AJAX的实例 (10)使用$.ajax() (11)使用一些快捷方法 (11)JQuery内的AJAX事件 (12)JQuery号称写最少的代码，处理更多的事，那么我们赶紧看看吧。

一、使用JQuery处理表单元素HTML表单(Form)常用控件有：•input type="text" 单行文本输入框•input type="password" 密码输入框(输入的文字用*表示)•input type="radio" 单选框•input type="checkbox" 复选框•textArea 多行文本输入框•select 下拉框(单选和多选)在jQuery里，我们可以下面方法来获取这些元素的值：1.获取input类的值：$("input").val(); //包括radio、checkbox2.获取textarea类的值:$("textarea").val();3.获取select类的值：$("select").val();当表单上含有多个input类（或者textarea类和select类），使用上述方法得到的将是一个数组。

当然，你可以给这些控件加上ID，从而对某个特定的控件取值，例如：$("input#myID").val()。

下面逐一实例讲解：（1）输入框、密码框、多行文本框输入框：<input name="inp_name1" id="inp_id1" value="ww"><br/>密码框：<input type="password" name="pass_name1" id="pass_id1"><br/>输入域：<textarea name="area_name1" id="area_name1" rows="4" cols="10"/><br/>普通方式：document.getElementById("myid").value或document.all.myname.value如：document.getElementById("id1").value或document.all. inp_name1.valueJQuery方式：$("input#id").val()，其中$()为选择器，id对应元素ID值，通过ID选择时“#”不能省，val()获取元素对象的值。

input、textarea可省略。

如：var pass_value = $("#pass_id1").val();var area_value = $("#area_id1").val();（2）单选框、多选框单选框：<input name="ro_name1" id="ro_id1" type="radio" value="本科" checked="checked">本科<input name="ro_name1" id="ro_id1" type="radio" value="研究生">研究生<br>复选框：<input name="chk_name1" type="checkbox" value="足球">足球<input name="chk_name1" type="checkbox" value="篮球">篮球<input name="chk_name1" type="checkbox" value="乒乓球">乒乓球<br>普通方式：通过document.getElementsByName("name")获取元素数组，然后遍历数组，筛选选中值如：var ros = document.getElementsByName("ro_name1");for(var i=0;i<ros.length;i++){if(ros[i].checked){alert(ros[i].value); break;//单选框只有一个值}}var chks = document.getElementsByName("chk_name1");var ckd_value =[];for(var i=0;i<chks.length;i++){if(chks[i].checked)ckd_value.push(chks[i].value);//多选框返回数组}alert(ckd_value)JQuery方式：单选框：var ro_value =$("input:checked#ro_id1").val();多选框：注意返回是数组，使用each()函数迭代。

var chk_value =[];var chk_values = $("input:checked#chk_id1").each(function(index){ chk_value.push($(this).val());});（3）下拉单<select id="sel_id1" name="sel_name1"><option value="河北" selected="selected">河北</option><option value="山东">山东</option><option value="江苏">江苏</option></select><br/>普通方式：var sel_value = document.getElementById("sel_id1").value;JQuery方式：var sel_value = $("select#sel_id1").val();如果允许复选，返回数组。

语法汇总解释：val() ;返回值String和Array 描述：获得第一个匹配元素的当前值。

$(“#ID”) ;描述：根据给定的ID匹配一个元素。

如果选择器中包含特殊字符，可以用两个斜杠转义。

如：HTML 代码:<span id="foo:bar"></span><span id="foo[bar]"></span><span id="foo.bar"></span>jQuery 代码:#foo\\:bar#foo\\[bar\\]#foo\\.bar:checked返回值:Array<Element(s)>概述：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)如：$("input:checked"):selected返回值:Array<Element(s)>:selected概述：匹配所有选中的option元素如：$("select option:selected#id")，等价于例子中的$("select#sel_id1")each(callback)返回值:jQuery概述:以每一个匹配的元素作为上下文来执行一个函数。

参数:callback Function对于每个匹配的元素所要执行的函数二、绑定基本事件网页上的事件很多，最常见的有单击、双击、按键、鼠标滑过、获取焦点等，本节将对比演示最常见的一个事件。

更多的事件机制，读者可以查看JQuery的API手册。

（1）为超链接、按钮等绑定单击等用户触发事件<a href="#" id="a1">超链接1</a><a href="#" id="a2">超链接2</a>普通方式：document.getElementById("a1").onclick=fun;//fun为要执行的函数。

JQuery方式：$("#a1").click(fun);使用JQuery还可以为所有相同类指定事件，如$("a").click(fun);若绑定双击、鼠标滑过只需要将相应的事件名称替换click即可，如双击：$("#id").dbclick(fun);鼠标滑过：$("#id").mouseover(fun);获得焦点：$("#id").foucus(fun);更多的事件，读者可以查看API。