toggle()方法,相当于一个加强版的click事件,可以绑定多个function来执行每次点击的操作(在jQuery1.8版本之后已经淘汰了)
hover()方法,这个就相当于mouseover和mouseout事件的结合。
二、jQuery对对象的值进行操作
2.1val(),应用在获取和设置表单中的标签的value属性。(其他的标签不内置value属性)
val(),获取表单项对象的value属性。
val("属性值"),设置对象的value属性
2.2html(),应用在获取和设置非空标签的标签体中的html内容
html(),获取对象标签体中的html内容
html("html内容"),设置对象的标签体中的html内容,自动解析html标签
2.3text(),应用在获取和设置非空标签的标签体中的文本内容
text(),获取对象标签体中的文本内容
text("文本内容"),设置对象标签体中的文本内容,不解析html标签。
三、jQuery遍历(重要)
$(".class").each(function(i,o){})
i表示遍历到的各个对象的下标
o表示遍历到的各个对象
$.each(数组,function(i,o){})
四、文档处理(重要)
A.append(B):将B插入到A标签的内部的后面
A.prepend(B):将B插入到A标签内部的前面
A.appendTo(B):将A插入B标签的内部的后面
A.prependTo(B):将A插入B标签内部的前面
A.insertBefore(B):将A添加到B的前面
A.insertAfter(B):将A添加到B的后面
案例1:二级联动
<script> // 定义二维数组: var cities = new Array(4); cities[0] = new Array("沈阳市","鞍山市","大连市"); cities[1] = new Array("长春市","吉林市","松原市","延边市"); cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市"); cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市"); cities[4] = new Array("南京市","苏州市","扬州市","无锡市"); //当文档加载完毕的时候,给省份的下拉选择框绑定一个change事件 $(function(){ //第一种做法 /*$("#province").change(function(){ //每次改变之前都要清空原来的城市 $("#city").html("") //根据当前选中的省份对应的option的value就能找到它对应的城市的数组 var items = cities[this.value] //遍历该省份对应的城市数组 $(items).each(function(i,e){ //i表示遍历出来的每一个元素的下标,e表示遍历出来的每一个元素 //每遍历出来一个城市,就要往城市对应的下拉选择框中添加一个option $("#city").append("<option value='"+i+"'>"+e+"</option>") }) })*/ //第二种做法 $("#province").change(function(){ //根据当前选中的option的value获取对应的城市数组 var items = cities[this.value] var content = "" //遍历城市数组 $(items).each(function(i,e){ //遍历出每一个城市名 //每遍历出来一个城市,就往content字符串后面拼接"<option value='"+i+""'>"+e+"</option>" content += "<option value='"+i+"'>"+e+"</option>" }) //将content设置到城市的下拉选择框中,通过html()方法就能设置html文本 $("#city").html(content) }) }) </script>
案例2:左右选择
<script type="text/javascript"> $(function(){ //当鼠标移入左边select的时候,给左边所有的option绑定双击事件 $("#selectLeft").mouseover(function(){ //实现第一个功能:双击将左边的标签添加到右边 $("#selectLeft option").dblclick(function(){ //双击之后,将触发这个事件的当前标签添加到右边 $("#selectRight").append(this) }) }) //实现第二个功能:点击添加按钮,将左边所有选中的标签添加到右边 $("#add").click(function(){ $("#selectLeft option:selected").appendTo($("#selectRight")) }) //实现第三个功能:点击全部添加按钮,将左边所有的标签添加到右边 $("#addAll").click(function(){ $("#selectLeft option").appendTo($("#selectRight")) }) //实现第四个功能:点击右边的全部添加按钮,将右边的所有的option添加到左边 $("#removeAll").click(function(){ $("#selectLeft").append($("#selectRight option")) }) //实现第五个功能:点击右边的添加按钮,将右边所有选中的option添加到左边 $("#remove").click(function(){ $("#selectLeft").append($("#selectRight option:selected")) }) $("#selectRight").mouseover(function(){ //实现第六个功能:双击右边的option,将双击的这个option添加到左边 $("#selectRight option").dblclick(function(){ $("#selectLeft").append(this) }) }) }) </script>
五、validation校验(使用第三方框架validation进行表单校验)
下载地址
引入
直接拷贝下载好的库文件到js目录中,然后像引入jQuery一样引入
json
在Java中我们要描述一个person,就得将Person封装成一个对象,将Person的属性抽取成成员变量。
public class Person{ private String name; private int age; }
在js中可以用json来描述一个person
var person = {name:"张三",age:18,address:"深圳"} person.name;获取name
json的语法:{key1:value1,key2:value2,key3:value3};
六使用jQuery操作标签的样式
css()方法
addClass()添加类名