$.ajax传递数组的两种方式

1.第一种方式

前台代码

var arrays= [];//定义要传递的数组
arrays.push("1");
arrays.push("2");
arrays.push("3");//向数组中添加元素
 
$.ajax({
    type:"post",
    url:"",
    data:{arrays:arrays},
    dataType: "json",
    traditional: true,//必须指定为true
    success:function(data){
        if(data.success){
            arrays= [];
        }
    }
});

后台代码

public JsonResult getArrays(String[] arrays){
    //这个时候已经得到了arrays数组值
    //利用Array类中的toString方法
	//调用Array.toString(a),返回一个包含数组元素的字符串,这些元素被放置在括号内,并用逗号分开
   System.out.println(Arrays.toString(arrays));
	//输出:[1, 2, 3]
    return JsonResult.ok(arrays[0]) ;
}

1.第二种方式

前台代码

var arrays= [];//定义要传递的数组
arrays.push("1");
arrays.push("2");
arrays.push("3");//向数组中添加元素
 
$.ajax({
    type:"post",
    url:"",
    data:{arrays:arrays},
    dataType: "json",
    success:function(data){
        if(data.success){
            arrays= [];
        }
    }
});

后台代码

public JsonResult getArrays(@RequestParam("arrays[]") String[] arrays){
    //这个时候已经得到了arrays数组值
    //利用Array类中的toString方法
	//调用Array.toString(a),返回一个包含数组元素的字符串,这些元素被放置在括号内,并用逗号分开
   System.out.println(Arrays.toString(arrays));
	//输出:[1, 2, 3]
    return JsonResult.ok(arrays[0]) ;
}
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第2章(\代码\第02章) • sample01.htm 将JavaScript代码插入在<head>标签与</head>标签之间 • sample02.htm 将JavaScript代码放在了<body>标签与</body>标签之间 • sample03.htm JavaScript与HTML混合执行 • sample04.htm 在同一个网页中使用不同脚本语言 • sample05.htm 判断浏览器对JavaScript版本的支持情况 • sample06.htm 引用外部JavaScript • sample07.htm 在同一个HTML文档中多次引用外部脚本文件 • sample08.htm 使用外部脚本文件和嵌入的JavaScript代码 • sample09.htm 边加载边解析的JavaScript代码 • sample10.htm 先加载后解析的JavaScript代码 • sample11.htm 单行注释语句 • sample12.htm 多行注释语句 • sample13.htm 使用HTML注释语句隐藏JavaScript代码 • sample14.htm 提示用户浏览器不支持客户端脚本语言 • sample15.htm 直接执行的JavaScript代码 • sample16.htm 直接调用函数 • sample17.htm 使用“javascript:”语句调用函数或方法 • sample18.htm 通过事件调用JavaScript代码 • sample19.htm 一段错误的JavaScript代码(调试用) 第3章(\代码\第03章) • sample01.htm 转换成数字型 第4章(\代码\第04章) • sample01.htm 字符串直接量 • sample02.htm 使用转义字符 • sample03.htm 数组直接量的使用方法 • sample04.htm 数组直接量 • sample05.htm 函数直接量的使用方法 • sample06.htm 对象直接量 第5章(\代码\第05章) • sample01.htm 全局变量 • sample02.htm 在不同的语句块中使用全局变量 • sample03.htm 局部变量的使用方式 • sample04.htm 在函数体中定义全局变量 • sample05.htm 使用没有定义的变量 • sample06.htm 重复定义变量 • sample07.htm 引用未赋值的变量 • sample08.htm 变量的优先级 • sample09.htm 随处定义的变量 • sample10.htm 随处定义的变量 • sample11.htm 嵌套函数中变量的有效范围 • sample12.htm 变量没有语句块的限制 • sample13.htm 常量的使用 第6章(\代码\第06章) • sample01.htm 先使用后递增 • sample02.htm 先递增后使用 • sample03.htm 先使用后递减 • sample04.htm 先递减后使用 • sample05.htm 字符串运算符 • sample06.htm 逻辑与运算符 • sample07.htm 逗号运算符 • sample08.htm 使用delete运算符删除变量 • sample09.htm 使用delete运算符删除对象属性 • sample10.htm 删除对象 • sample11.htm 使用delete运算符删除数组元素 • sample12.htm in运算符在对象中的使用 • sample13.htm in运算符在数组中的使用 • sample14.htm instanceof运算符 • sample15.htm new运算符 • sample16.htm this运算符 • sample17.htm this运算符 • sample18.htm void运算符 第7章(\代码\第07章) • sample01.htm 单支选择的if语句 • sample02.htm if…else语句 • sample03.htm if…else if语句 • sample04.htm if…else if…else语句 • sample05.htm if语句的嵌套 • sample06.htm if语句的嵌套(多次嵌套) • sample07.htm switch语句 • sample08.htm switch语句(省略default语句) • sample09.htm switch语句(不能省略的break语句) • sample10.htm for语句 • sample11.htm 逗号运算符与for语句的结合使用 • sample12.htm while语句 • sample13.htm do…while语句 • sample14.htm do…while语句与while语句的区别 • sample15.htm 遍历对象属性和数组元素 • sample16.htm 使用for each…in语句遍历对象属性和数组元素 • sample17.htm 对象的引用 • sample18.htm with语句 • sample19.htm with语句的等价代码 • sample20.htm label语句 • sample21.htm break语句 • sample22.htm 在嵌套的循环语句中使用break语句 • sample23.htm label语句与break语句相结合 • sample24.htm continue语句 • sample25.htm label语句与continue语句相结合 • sample26.htm 抛出异常 • sample27.htm 捕捉异常(捕捉使用throw语句抛出的异常) • sample28.htm 捕捉异常(捕捉JavaScript产生的异常) • sample29.htm 抛出不同的异常 • sample30.htm 抛出不同的异常(多catch语句块) • sample31.htm finally语句 • sample32.htm 空语句 • sample33.htm return语句 第8章(\代码\第08章) • sample01.htm 使用对象直接量创建自定义对象 • sample02.htm 使用对象直接量创建有方法的自定义对象 • sample03.htm 使用自定义构造函数创建对象 • sample04.htm 使用带参数的构造函数创建对象 • sample05.htm 创建对象时传递不完整的参数 • sample06.htm 使用有缺省值的构造函数创建对象 • sample07.htm 使用带方法的构造函数创建对象 • sample08.htm 使用带方法的构造函数创建对象 • sample09.htm 遍历对象属性 • sample10.htm 遍历对象属性并获得属性值 • sample11.htm 遍历对象属性和方法 • sample12.htm 遍历对象属性和方法时进行判断 • sample13.htm 遍历对象属性值 • sample14.htm 索引对象属性 • sample15.htm 添加对象属性 • sample16.htm 删除对象属性 • sample17.htm 删除对象属性 • sample18.htm 将对象赋值给对象属性 • sample19.htm 将对象赋值给对象属性 • sample20.htm 添加方法 • sample21.htm 删除方法 • sample22.htm 引用原型对象 • sample23.htm 继承属性 • sample24.htm 设置继承的属性值 • sample25.htm 通过原型对象修改对象属性 • sample26.htm 通过原型对象添加对象属性 • sample27.htm 本地属性与继承属性 • sample28.htm 灵活定义属性值的方式 • sample29.htm 在构造函数中使用全局变量 • sample30.htm 在继承中使用全局变量 • sample31.htm 在继承中使用全局变量(一种解决办法) 第9章(\代码\第09章) • sample01.htm 布尔对象与布尔值 • sample02.htm 布尔值隐式转换为布尔对象 • sample03.htm 布尔值与布尔对象的区别 • sample04.htm 复制一个布尔对象 • sample05.htm 将日期对象的日期部分和时间部分转换成字符串 • sample06.htm 将日期部分转换为字符串 • sample07.htm 将时间部分转换为字符串 • sample08.htm 将时间部分转换为字符串 • sample09.htm 获取日期对象中日期部分 • sample10.htm 获取日期对象中时间部分 • sample11.htm 以毫秒表示法设置和返回日期对象的毫秒表示法 • sample12.htm 获得当前时间的毫秒表示 • sample13.htm 获得指定时间的毫秒表示 • sample14.htm 日期之差 • sample15.htm 求圆的面积 • sample16.htm 数字对象与数字 • sample17.htm 字符串长度 • sample18.htm 创建字符串 • sample19.htm 字符串与Unicode编码 • sample20.htm 返回字符串中的一个字符 • sample21.htm 通过字符串的起始位置和结束位置来获得子字符串 • sample22.htm slice()方法的使用 • sample23.htm substr()方法的使用 • sample24.htm 查找子字符串在字符串中的位置 • sample25.htm 统计一个字符串在另一个字符串中出现的次数 • sample26.htm 使用正则表达式搜索子字符串 • sample27.htm 替换使用字符串查找到的子字符串 • sample28.htm 扩展字符串的匹配方式 • sample29.htm 使用正则表达式匹配要替换的子字符串 • sample30.htm 更多的替换字符串 • sample31.htm 将字符串分割成数组 • sample32.htm 转换大小写 • sample33.htm 与HTML相关的方法 • sample34.htm 字符串比较 • sample35.htm 修改字符串中的某一个字符 • sample36.htm 创建Object对象 • sample37.htm 返回对象的构造函数 • sample38.htm 判断对象的类型 • sample39.htm 执行字符串中的JavaScript代码 • sample40.htm 判断对象属性是否为自有属性 • sample41.htm 判断一个对象是否是另一个对象的原型对象 • sample42.htm 判断对象的属性是否可以被枚举 • sample43.htm 监视属性值的变化情况 第10章(\代码\第10章) • sample01.htm 直接调用函数 • sample02.htm 将函数返回值赋值给对象属性 • sample03.htm 将函数的返回值作为数据在表达式中进行运算 • sample04.htm 直接将函数的返回值输出 • sample05.htm 通过事件调用函数 • sample06.htm 递归调用函数 • sample07.htm 递归调用函数(使用临时的函数名) • sample08.htm 传递参数的方法 • sample09.htm 传递参数个数多于函数定义的参数个数 • sample10.htm 传递参数个数少于函数定义的参数个数 • sample11.htm 传递参数个数少于函数定义的参数个数(使用默认值) • sample12.htm Arguments对象的使用方法 • sample13.htm Arguments对象的使用方法 • sample14.htm 实际送的参数个数和参数值 • sample15.htm 定义不确定参数个数的函数 • sample16.htm 使用callee属性递归调用函数 • sample17.htm 判断参数个数是否正确 • sample18.htm 引用原型对象 • sample19.htm 查看构造函数名 • sample20.htm 判断函数调用情况 • sample21.htm 使用apply()方法将函数作为对象的方法调用 • sample22.htm 使用call()方法将函数作为对象的方法调用 • sample23.htm 函数的自定义属性 • sample24.htm 置换图片 • sample25.htm 检测一个值是否是非数字 • sample26.htm 转换成整数 • sample27.htm 转换成整数(使用不同进制) • sample28.htm 字符串编码与解码 • sample29.htm URI编码与解码 • sample30.htm URI组件编码与解码 第11章(\代码\第11章) • sample01.htm 创建空数组 • sample02.htm 创建数组的同时为数组元素赋值 • sample03.htm 创建指定长度的数组 • sample04.htm 将字符串分割成数组 • sample05.htm 数组元素的值 • sample06.htm 输出数组的所有元素 • sample07.htm 输出数组的所有元素(使用for循环) • sample08.htm 输出数组的所有元素(使用for each循环) • sample09.htm 数组长度 • sample10.htm 添加数组元素 • sample11.htm 通过为数组元素赋值的方法添加数组长度 • sample12.htm 删除数组元素的值 • sample13.htm 通过改变数组长度来添加和删除数组元素 • sample14.htm 创建二维数组 • sample15.htm 将数组转换成字符串 • sample16.htm 将数组转换成本地字符串 • sample17.htm 通过连接符将数组元素连接成字符串 • sample18.htm 将元素添加在数组尾部 • sample19.htm 截取数组中的一部分 • sample20.htm 从前向后查找元素在数组中的位置 • sample21.htm 查找值为5的元素 • sample22.htm 从后向前查找元素在数组中的位置 • sample23.htm 将数组中的元素颠倒排序 • sample24.htm 删除数组尾部元素 • sample25.htm 删除数组头部元素 • sample26.htm 在数组头部或尾部添加元素 • sample27.htm 在数组的任何位置添加数组元素 • sample28.htm 在数组的任何位置删除数组元素 • sample29.htm 替换数组中的元素 • sample30.htm 数组元素的排序 • sample31.htm 数组元素的排序(使用函数比较) • sample32.htm 颠倒数组中元素的次序 • sample33.htm 返回数组中大于50的元素(使用循环) • sample34.htm 返回数组中大于50的元素 • sample35.htm 查找数组中的元素 • sample36.htm 输出数组中的元素 • sample37.htm 判断数组中的元素是否都大于50 • sample38.htm 判断数组中的元素是否至少有一个大于50 • sample39.htm 返回数组中所有元素的平方值 • sample40.htm 返回数组中元素之和 • sample41.htm 返回数组中元素之和(加上初始值) • sample42.htm 返回数组中最大的元素 • sample43.htm 将二维数组转换成一维数组 • sample44.htm 返回数组中元素之和 • sample45.htm 两种不同的匹配方式 • sample46.htm 两种不同的匹配方式(使用g参数) • sample47.htm 返回用于创建数组的字符串 • sample48.htm 返回数组第1个元素出现的位置 第12章(\代码\第12章) • sample01.htm 客户端对象层次 • sample02.htm 通过name属性值引用对象 • sample03.htm 通过数组下标引用对象 • sample04.htm 在HTML标签中设置事件驱动 • sample05.htm 在JavaScript代码中设置事件驱动 • sample06.htm 调用内置对象的方法 • sample07.htm 直接调用JavaScript代码 • sample08.htm 调用用户函数 • sample09.htm 在超链接中使用事件(使用click事件) • sample10.htm 在超链接中使用事件(click事件的处理代码为跳转网页的语句) • sample11.htm 在超链接中使用事件(将click事件处理语句写在href属性值中) • sample12.htm 事件的返回值 • sample13.htm this运算符与参数传递 • sample14.htm 鼠标移动事件 • sample15.htm 鼠标点击事件 • sample16.htm 键盘事件 • sample17.htm 限制文本框中输入的字数 • sample18.htm 加载事件与卸载事件 • sample19.htm 得到焦点与失去焦点事件 • sample20.htm 提交事件与重置事件 • sample21.htm 选择事件与改变事件 第13章(\代码\第13章) • sample01.htm 警告框 • sample02.htm 确认框 • sample03.htm 提示框 • sample04.htm 状态栏的默认信息 • sample05.htm 状态栏的瞬间信息 • sample06.htm 打开一个空白窗口 • sample07.htm 打开一个有内容的窗口 • sample08.htm 在命名窗口中打开文档 • sample09.htm 设置新开窗口的特征 • sample10.htm 不显示新开窗口的浏览历史 • sample11.htm 窗口名称 • sample12.htm 关闭当前窗口 • sample13.htm 在打开的窗口中关闭窗口 • sample14.htm 关闭其他窗口 • sample15.htm 判断窗口是否已经关闭 • sample16.htm 对其他窗口的引用 • sample17.htm 窗口得到焦点 • sample18.htm 移动窗口 • sample19.htm 调整窗口大小 • sample20.htm 滚动文档 • sample21.htm 在状态栏显示时间 • sample22.htm 跑马灯 • sample23.htm 延时注册 • sample24.htm 计数器 • sample25.htm 框架页 • sample26.htm 内置框架 • sample27.htm 框架数量 • sample28.htm 对框架页的引用 • sample29.htm 通过框架名对框架页的引用 • sample30.htm 复杂的框架页 • sample31.htm 在框架中对其他窗口的引用 • sample32.htm 操作新开窗口中的数据 第14章(\代码\第14章) • sample01.htm 在网页上输出文字 • sample02.htm write()和wirteln()的区别 • sample03.htm 输出文字时的注意事项 • sample04.htm 在内置框架中输入文字 • sample05.htm 在内置框架中输入文字(document.open()方法的使用) • sample06.htm 测试代码 • sample07.htm 测试代码(注销document.close()语句) • sample08.htm 输出文档 • sample09.htm 不覆盖当前浏览历史记录 • sample10.htm 覆盖当前浏览历史记录 • sample11.htm 超链接颜色 • sample12.htm 网页的前景色和背景色 • sample13.htm 最后修改时间与文档URL • sample14.htm 跑马灯 • sample15.htm referrer属性的使用 • sample16.htm 文档所在域 • sample17.htm 图片信息 • sample18.htm 置换图片 • sample19.htm 置换图片(使用this引用) • sample20.htm 随机图片 • sample21.htm 随机图片(与load事件结合) • sample22.htm 提示图片不存在 • sample23.htm 查看超链接的各部分 • sample24.htm 随机广告 • sample25.htm Anchor对象和Link对象的区别 第15章(\代码\第15章) • sample01.htm Form对象的属性 • sample02.htm 验证表单数据 • sample03.htm 确认提交和重置数据 • sample04.htm 将表单提交到不同的URL • sample05.htm 限制文本框中的输入字数 • sample06.htm 自动选择文本框中的文字 • sample07.htm 自动定位在第一个文本框 • sample08.htm 只允许提交一次 • sample09.htm 改变按钮上的文字 • sample10.htm 获取单选框与复选框的值 • sample11.htm 限制复选框的被选择数量 • sample12.htm 全选或取消全选 • sample13.htm 使用下拉列表框提交表单 • sample14.htm 添加下拉列表框中的选项 • sample15.htm defaultSelected和selected的区别 • sample16.htm 选课 • sample17.htm 二级联动菜单 • sample18.htm 预览图片 • sample19.htm 下拉列表框中的选项排序 • sample20.htm 统计表单控件元素 第16章(\代码\第16章) • sample01.htm Screen对象的属性 • sample02.htm 满屏显示网页 • sample03.htm 判断浏览器是否支持Java • sample04.htm 浏览器的基本属性 • sample05.htm 显示浏览器的默认主页 • sample06.htm 查看浏览器支持的MIME类型 • sample07.htm 显示Flash • sample08.htm 跳转 • sample09.htm 加载和刷新文档 • sample10.htm 通过修改当前文档的URL来加载新文档 第17章(\代码\第17章) • sample01.htm 创建与读取Cookie • sample02.htm 读取Cookie • sample03.htm 精确读取Cookie值 • sample04.htm 精确读取Cookie值(使用数组) • sample05.htm 设置Cookie的有效期 • sample07.htm Cookie的域 • sample08.htm Cookie的安全性 • sample09.htm 为Cookie编码 • readCookie.htm 读取Cookie • cookie\sample06.htm Cookie的路径 第18章(\代码\第18章) • sample01.htm DOM • sample02.htm 节点的访问方法 • sample03.htm Node对象的常量 • sample04.htm Document接口的属性 • sample05.htm 访问文档中的特殊节点 • sample06.htm 查看某个元素出现的次数 • sample07.htm 查看特定节点是否存在 • sample08.htm 查看指定id值的节点下的子节点 • sample09.htm 节点的名称 • sample10.htm 获得一个节点下的所有子节点 • sample11.htm 子节点与兄弟节点 • sample12.htm 节点的值 • sample13.htm 插入一个节点 • sample14.htm 插入一个节点(添加一个Text节点) • sample15.htm 插入一个节点(删除原节点) • sample16.htm 复制节点 • sample17.htm 在一个节点前插入节点 • sample18.htm 删除节点 • sample19.htm 删除节点(使用删除了的节点) • sample20.htm 获取节点名称 • sample21.htm 获得节点的属性值 • sample22.htm 添加属性与删除属性 • sample23.htm 查看Element节点下的所有属性 • sample24.htm 获得节点的属性值 • sample25.htm 添加属性与删除属性 • sample26.htm 改变文字 • sample27.htm 移动文字 第19章(\代码\第19章) • sample01.htm 使用正则表达式替换字符串 • sample02.htm 简单地匹配字符串 • sample03.htm 匹配字符串和子字符串 • sample04.htm 引用匹配成功的字符串 • sample05.htm 全局匹配 • sample06.htm 测试匹配是否成功 • sample07.htm RegExp的静态属性 • sample08.htm 验证邮政编码 • sample09.htm 验证身份证号码 • sample10.htm 验证电话号码 • sample11.htm 验证URL • sample12.htm 验证Email • sample13.htm 使用正则表达式和DOM结合 第20章(\代码\第20章) • sample01.htm 创建一个XMLHttpRequest对象 • sample02.htm 用户注册 第21章(\代码\第21章) • sample01.htm 使用JavaScript实现二级联动菜单 • sample02.htm 将下拉列表框内置于Iframe中 • sample03.htm 在Iframe中获取服务器端数据 • sample04.htm 使用Ajax从服务器端获取数据 • sample05.htm 使用get方式提交数据 • sample06.htm 使用post方式提交数据 • sample07.htm 在Ajax中使用post方式提交数据 • sample08.htm 在服务器端获得HTTP请求头 • sample09.htm 在客户端获得HTTP响应头 • sample10.htm 获取文件信息 • sample11.htm 获取服务器时间 • sample12.htm 砍掉Ajax的缓存 • sample13.htm 异步方式显示文档信息 • sample14.htm 在Ajax中使用同步处理 • sample15.htm 在Ajax中使用同步处理(改良后) • sample16.htm 网页的编码 • sample17.htm 网页的编码 • sample18.htm 网页的编码 • sample19.htm 读取不同编码的文本文件 • sample20.htm 获取动态网页程序返回的内容 第22章(\代码\第22章) • sample01.xml 完整的XML文件代码 • sample02.xml 无效的XML文件 • sample03.xml 空标签 • sample04.xml 无效的XML文件 • sample05.xml 区分大小写 • sample06.xml XML的属性值 • sample07.xml 转义字符 • sample08.xml 注释 • sample09.xml CDATA标签 • sample10.htm 在IE浏览器中解析XML文件 • sample11.htm 在其他浏览器中解析XML文件 • sample12.htm 跨浏览器解析XML文件 • sample13.htm 在IE浏览器中解析XML字符串 • sample14.htm 在其他浏览器中解析XML字符串 • sample15.htm 跨浏览器解析XML字符串 • sample16.htm 创建解析XML文件的函数 • sample17.htm 创建解析XML字符串的函数 • sample18.htm 输出XML文档的信息 • sample19.htm 访问根节点 • sample20.htm 访问根节点下的所有子节点 • sample21.htm 定位到节点 • sample22.htm 输出节点与子孙节点的值 • sample23.htm 通过循环输出所有子节点信息 • sample24.htm 返回节点的属性值 • sample25.htm 访问属性节点 • sample26.htm 获得元素节点的所有属性节点 • sample27.htm 获得元素节点的所有属性节点(跨浏览器) • sample28.htm 通过标签名查找节点 • sample29.htm 通过标签ID值查找节点 • sample30.htm 修改节点的值 • sample31.htm 删除节点 • sample32.htm 创建与添加节点 • sample33.htm 将节点插入在指定节点之前 • sample34.htm 在文本节点和注释节点中添加数据 • sample35.htm 替换节点 • sample36.htm 替换节点值 • sample37.htm 删除节点值 • sample38.htm 复制节点 • sample39.htm 异步获取XML文件 • sample40.htm 处理从服务器上获取的XML文档 • sample41.htm 获取服务器中返回的XML文档 第23章(\代码\第23章) • sample01.htm 内联样式 • sample02.htm 内部样式 • sample03.htm 外部样式 • sample04.htm 注释 • sample05.htm 类选择符 • sample06.htm ID选择符 • sample07.htm 伪类 • sample08.htm 样式继承 • sample09.htm 样式层叠 • sample10.htm 样式冲突 • sample11.htm 使用CSS设计网页 • sample12.htm HTML、XML与CSS的结合使用 • sample13.htm HTML、XML与CSS的结合使用(改良后) • sample14.htm 修改文字大小 • sample15.htm 下拉菜单
DWR.xml配置文件说明书 1、 建立dwr.xml 配置文件 任何一个dwr.xml的文件都需要包含DWR DOCTYPE的声明行,格式如下: 整个配置文件的大体结构如下: ... 有几个术语有必要理解,参数叫做converted,远程Bean叫做created.如果远程Bean A有个方法A.blah(B),那么你需要为A建立一个created,为B建立一个converted. 配置文件init部分声明那些用于建立远程bean和在方法调用中转换bean的类.这部分是可选择性配置的,多数情况下可以不必使用它,如果你想定义一个新的creator或者converter那么就必须在部分中声明,but do double check on the ones that are currently available first. 在init部分的作用是告诉DWR一些类实例和关于这些类怎样运行的信息.实际上并不会使用.这有点向java中的import语句,多数类在使用之前需要引入,但引入了类并不意味着这些在使用,每个creator和converter需要有个id属性来允许以后进行引用. 配置文件的allow部分定义哪些类可以建立和转换,每个被准许的类都可以有一个'create'或者'convert'配置行.下面列出的类的转换在默认情况下不需要进一步的设置. 1、所有基本类型,boolean,int,double等等 2、基本类型的对象形式实现的类,Boolean,Integer等等 3、java.lang.String 4、java.util.date 和三个SQL形式的派生类 5、以上所有类型的数组形式 6、以上所有类型的集合,List,Set,Map(有些局限性) However nothing is added to the list of classes that can be created (i.e. put up for remoting) without you declaring it. 2、 The Converters DWR已经默认定义和初始化了常用的Converter,他们分别如下: 这里仅仅是定义了Converter并且简单的放在元素之内,任何的元素内容都有两个必须定义的属性.一个是对converter定义的引用和converter能够转换的类. 例如最简单的converter是null converter,它作用是把null和void值转换成javascript的null和undefined值.它是所有converter中最简单的,就象调用java的静态方法一样,所以并不需要创建对象. 默认的时候DWR将java void值转换成javascript的null值就是这样设置. 有时java.lang.Void也需要进行这样的转换,所以设置也是相似的.从java中传递null值到javascript是没有任何危险性的,所以DWR将这个作为默认的converter,所以你自己不用再把这个converter添加到配置文件的部分中去. 基本类型的converter转换int,boolean,double等.当然还包括对应的对象形式Integerv,Boolean等等.DWR中在allow预定义了16个配置项目分别用于所有基本类型的转换.就象这样. String类型和Date同样预先定义了Converter,这些converter都没有办法进行改变的,所有的String,Date和数值类型都统一采用默认的converter. 2.1 Array Converters Array的配置项目没有上面介绍的那么直观,默认情况下DWR装载所有的基本类型和可装载的对象,这些包括String,Date等先前介绍的类型.java高级程序员可能会理解为什么match的这行有点奇怪. *符号在上面没有提到,其实这是个可以表示任何字符的通配符号.这些数组可装载的的类型和其他可装载的类型是一样的. 2.2 Bean Converters 一种不能采用默认方式定义的converter就是Bean Converter,这个是将POJO对象转换成javascript相关的数组,反向也一样.基于安全因素的考虑这种类型的converter不能采用默认的方式实现. 假设有个bean并且通过语句设置成远程可用,有种类型的参数他本身是一个带有setter的java bean,但setter会产生严重的隐患.攻击者可能促使这隐患的发生.通过下面的语句就可以设置但个类的bean converter 要想允许转换指定包或子包下所有类的转换可以按照下面的设置 很明显,可以采用下面的方式来转换所有的java bean 2.3 Restricting Property Conversion(指定属性转换) 将象用exclude和incluce来通知DWR隔离creator的方法一样,converter也有一个类似的配置方法.因为指定属性转换只有针对bean才有效(基本类型的转换没有必要指定属性),这个功能只能应用与特定的converter即BeanConverter和从次类派生的所有类.相关配置语法如下 这样就可以限定DWR不能调用Fred对象的getProperty1()和getProperty2()方法,通常这被成为拒绝访问方式,当然你也可以采用下面的方式配置可以访问的方法(授权访问方式) 较好的安全控制大部分都是采用授权访问方式. 2.4 Collection Converters DWR最后两个默认的converter是Maps和Collections 通常converter是采用递归方法转换集合中的所有对象. 这里有两个地方需要注意: 仅仅通过反射方法没有办法知道集合元素中的类型,所以上面的两个converter能将任何集合转换成相对javascript而言有意义的对象.然而没有办法将不同的集合类类型分别采用不同的转换方法.因为没有办法完全自动进行转换,我们可以应用dwr.xml文件的special signatures syntax配置部分设置类型的转换处理过程. 2.5 DOM Objects DWR 自动将DOM、DOM4J、JDOM和XOM转换成DOM树,前面这几种类型都仅仅返回Document,Element,Node.DWR会自动将这些转换成浏览器DOM对象.通常在启动JDOM Converter时会有一个提示信息,除非你想采用JDOMconverter否则可以忽略. INFO: Missing classdef for converter 'jdom'. Failed to load uk.ltd.getahead.dwr.convert.JDOMConverter. Cause: org/jdom/Document 因为DWR没有办法知道你是否采用jdom converter,所以提示信息是info级别.如果你想采用jdom converter,你必须很清楚地知道jdom converter是否可以被加载.这就是DWR保留上面的提示信息的原因. 3 The Creators DWR共有三种Creator,最简单的”new”是调用bean的默认构造函数创建实例.”scripted”允许采用其他脚本语言创建实例.如BeanShell.在远程bean的默认构造函数不能进行进一步配置的情况下这种类型的creator比较有用.”Spring”类型允许你通过spring创建实例. 下面是关于creator的参考资料和配置参数说明. Creator Parameter User new class 类的全名称(包括包路径) scripted language BSF框架支持的脚本语言名称(BSF为apache项目) scripted script 返回远程对象的脚本,脚本可以指定一些属性,多数情况下一般只设置param节点配置.属性很少设置. spring Location* 任何以location开头的参数,每个参数都是指定一个spring的配置文件,在参数没有设置的情况下DWR会去读取spring的全局的配置文件. spring beanName 从配置文件中读取的bean的名称 “scope参数允许你配置creator的生命周期,共有以下几个选项:application,session,request,page.这些参数对于用过jsp或servlet的开发人员并不陌生. 3.1 Uing static methods 如果你想远程调用一个creator的静态方法,并且creator是new类型.因为调用远程bean的方法前DWR不会检测将要执行的方法是不是静态方法,如果是静态方法那么creator就不用创建.这种机制可以适用任何类型的creator,但new类型的creator是最简单配置的. 3.2 Security Creator可以配置类的成员函数的访问权限.creator有授权访问(指明可以被访问的方法)和拒绝访问(指明不允许访问的方法)两种配置方式. 如果要设置除了setWibble方法之外的所有方法都不可访问可以采用下面的设置. 如果采用j2ee访问角色控制的模式 3.3 The 'spring' Creator 3.4 The 'new' Creator DWR已经默认定义了new creator. DWR已经将这配置到了内置的dwr.xml文件中,并不需要进行额外的配置. Creator通过调用类的默认的构造方法创建实例.应用new creator有以下几个优点:  安全性 生命周期比较短的creator可以得到更好的安全性,通过不同的应用情况设置适合的生命周期.  低内存开销 在访问量比较大的情况下,可以不用担心发生内存泄露的情况. 配置一个creator的创建和远程方法调用设置: ... 上面的配置信息表示将java.util.date提供给客户端调用,并且引用名称是Blash.当你在客户端调用Blash.toString(reply)时,后台将采用java.util.date的默认构造方法创建一个实例.然后调用实例的tostring方法.客户端的javascript将返回给reply对象(此时reply是java.util.date的字符串形式) 3.5 The 'scripted' Creator DWR 已经默认配置了scripted creator配置, 这种类型的creator采用BSF执行脚本语言并返回bean.例如 ... import org.apache.commons.validator.EmailValidator; return EmailValidator.getInstance(); ... 4 Signatures in dwr.xml Signatures部分用于配置Collections中装载对象元素的类型.举个例子来说:下面的java代码没有办法对List集合中的对象进行转换. public class Check { public void setLotteryResults(List nos) { ... } } Singatures配置允许我们对DWR要操作的对象类型进行配置.对于了解JDK5泛型编程的开发人员来说下面的格式是很容易理解的. <![CDATA[ import java.util.List; import com.example.Check; Check.setLotteryResults(List nos); ]]> DWR有个专门用于解析上面配置语句的解析器,虽然上面的是JDK5中才有的特性,因为有解析器的原因这也可以应用与JDK5之前的版本. 解析规则是不可见的,但有两种例外情况. 一种情况是因为DWR1.0的解析器中有个Bug,在有些场合会无法处理返回值的类型.所以应该要避免这种情况的发生. 一种情况是因为解析器是一个语法宽松的解析器,他不象编译器一样对语法有非常严格的要求,所有有时可能一些重要的语句没有配置而无法事先发现. <![CDATA[ import java.util.List; Check.setLotteryResults(List); ]]> DWR的将来版本可能会采用符合java官方规范的解析器,这样可以避免许多出错的情况. Signature部分只用于泛型参数到基本类型参数的转换,对于其他的类型DWR采用反射机制或运行时类型来确定.在没有泛型参数的情况下可以不配置Signature. public void method(String p); public void method(String[] p); 下面的就需要配置,因为反射机制无法完成次类功能. public void method(List p); public void method(Map p); 下面可以不用配置,DWR可以自动完成转换. public void method(List p); public void method(Map p); 下面可以不用设置,DWR可以采用运行时转换. public List method(String p); 有一个值得注意的地方是在javascript中所有对象的keys都是一个字符串,你也可以把其他对象作为keys.他们在使用之前都会转换成字符串形式.DWR1.x将采用这个特性来转换成String.以后对象的转换将会在服务器端完成. 5 Scripting Introduction DWR生成的javascript代码和java代码很相似并通过dwr.xml配置输出.相比普通java异步调用之下,通过ajax生成远程接口和java 代码的最大挑战是AJAX异步功能. DWR通过引入一个回调函数,当数据从服务返回数据是调用这个函数。有两种推荐的方法使用回调函数。一在参数列表加入回调功能。二增加调用元数据对象调用。 也可以将回调的功能放在参数列表的前头,但是不建议使用这样的用法,因为在处理自动HTTP对象时候会出现问题。这些方法一般会保持向后兼容。 5.1 Simple Callback Functions 假设有个下面的java方法。 public class Remote { public String getData(int index) { ... } } 在javascript中就可以以下面的方式引用。 ... function handleGetData(str) { alert(str); } Remote.getData(42, handleGetData); “42”只是一个给getdata方法的参数。当然你可以采用下面的写法。 Remote.getData(42, function(str) { alert(str); }); 5.2 Call Meta-Data Objects 另一种使用回调功能的方法是指定一个回调功能选项或其他可选项。上面的例子就变成下面的形式。 Remote.getData(42, { callback:function(str) { alert(str); } }); 这个方法具有以下几个优点:可以依照你的编码习惯来编写程序,更重要的是允许你增加额外的调用选项。 5.3 Timeouts and Handling Errors 除了使用回调功能你还可以指定超时时限和错误处理方法。例如: Remote.getData(42, { callback:function(str) { alert(str); }, timout:5000, errorHandler:function(message) { alert("Oops: " + message); } }); 5.4 Finding the callback method 下面有几个实例来说明回调功能各个参数选项的配置,因为javascript是不支持函数重载的。 Remote.method({ timeout:3 }, { errorHandler:somefunc }); 上面的两个参数一个是bean的参数一个是回调元数据对象。但是没有方法去区别这两种参数选项。在抛开特定的浏览器环境,我们假设null==undefined,所以具有以下规则: 一、 如果一个函数的每个调用都是回调函数,那么他就没有调用元数据对象,所有的参数都是普通java参数。 二、 如果一个最后一个参数具有一个回调功能,那么这个参数就是调用元数据对象。其余的就是普通java参数。 三、 如果第一个参数为null,我们就认为没有回调功能。其余的就是普通java参数。此外还要检查最后一个参数是否为null,如果是则会给予提示信息。 四、 如果最后一个参数为null,则没有回调功能。 五、 还有一个不是很好的约定格式,要表示错误信息。 6 Engin.js文件 这个文件是DWR的引擎文件,他承担着把后台自动生成的javascript接口与前台调用之间的衔接责任。所以任何使用DWR的地方都需要这个文件。 每个使用DWR的页面都必须引入这个文件: 6.1 Call Batching 应用批量功能可以一次性调用多个远程bean方法,因为他是将多个调用做为一次请求,这就减少了与服务器的交互。可以减少许多的开销。 一个批量方法调用以DWREngine.beginBatch()开始WREngine.endBatch()结束。当DWREngine.endBatch()被调用时就说明开始调用批量方法,DWR就将这些方法打包在一起作为一次请求发送给服务器。 DWR会确保所有的方法都回被调用,所以使用批量功能是要注意是否提交了批量调用,如果没有提交批量调用那么这些需要调用的方法将永远排在调用队列中直到提交批量调用。 注意:批量调用方法会有一些缺点,比如他不能在那些已经帮定在一起的方法调用顺序不能保证同步。 例如所有的调用元数据对象的接管函数,超时设定,错误处理等的调用都是在批量的级别上,而不是在调用的级别上。如果一个批量调用含有两个不同超时时间设定的方法,那么除了最后一个之外的所有其他方法的超时设定都被忽略。 6.2 Call Ordering 因为AJAX是个普通的异步远程方法调用模式,所以远程调用的返回结果的顺序可能和你发送请求的顺序不一致。DWREngine.setOrdered(boolean)方法允许你设置远程调用返回结果的顺序和你发送调用请求的顺序保持一致。DWR是通过一个远程方法调用已经结束后在发送下一个调用请求来实现这个功能的。 一般情况我们并不需要返回结果顺序和发送请求顺序保持一致。DWR默认是不保持一致的。 提示:因为保持上面的顺序会对应用程序的性能和响应时间,如果其中的一个消息发生丢失那么浏览器可能会有意想不到以外情况发生。在使用这个功能的时候必须认真考虑是否真的有必要使用。通常比较好的方法是使用异步模式调用。 6.3 Handling Errors and Warnings 对于一些服务器端发生的错误或警告情况DWR都回调用默认的错误和警告方法并且传递一个相关信息,通常这些发生的错误和异常对于用户来说是不可见的。 下面这个方法主要用于以消息框的方式或者在状态栏里显示一个错误或警告的消息。 要改变错误的处理方法可以使用这个方法:DWREngine.setErrorHandler(function), 改变警告的处理方法可以使用这个方法:DWREngine.setWarningHandler(function). 6.4 Remoting Hooks 参考 DWREngine.setPreHook(function) and DWREngine.setPostHook(function). 如果你想在执行远程方法调用之前或之后进行一些处理的话,你可以使用上面的两个方法。上面参数中设置的目标方法必须是没有参数的。如果你想限制特定的组件在一次方法调用没有结束之前不允许再次调用,那么使用上面的方法将很有用。 Post 执行Hooks通常是设置pre-hooks,一般用来撤消先前的操作。关于Hooks的例子可以参照;DWRUtil.useLoadingMessage() 函数。 6.5 Remoting Options(远程调用设置) 关于DWR处理远程调用有若干个设置选项,Method和Verbs对于用户来说是透明的,但对于不同的浏览器可能会有影响。通常DWR会选择正确的方法处理,如果想饶过某些浏览器产生的影响这些参数设置将非常有用。 DWREngine.setMethod(newmethod) 设置Method的实际执行方法,但被设置的方法不能确保被调用。只是DWR首先会尝试调用这个方法。newmethod 必须是DWREngine.XMLHttpRequest 或着 DWREngine.IFrame. DWREngine.setVerb(verb) 允许设置iframe 和 XMLHttpRequest提交数据时的方式,必须是POST或者GET,如果浏览器不支持POST形式,DWR会自动切换到GET方式
1.本书1~16章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:Microsoft Visual Studio 2005 数据库:SQL Server 2005 Web服务器:IIS 5.1及以上版本 2.本书17~27章所附代码的运行环境 数据库采用MySQL 4.0及以上版本 服务器采用Tomcat 5.0 及以上版本 开发工具采用Eclipse 3.1以上版本 3.本书所附光盘范例 第1章(/C01/) JsWeb 统的JavaScript模式实现刷新 IframeWeb 基于框架的不刷新模式 AjaxWeb 基于Ajax的Web 2.0模式的刷新模式 AsyncAjaxSample Ajax异步调用的完整示例 第2章(/C02/) 2.1.htm 3段JS使用形式 2.2.htm 不同浏览器使用“<noscript></noscript>” 2.3.htm 调用单独的JS文件 2.3.js 一个单独的JS测试文件 2.4.htm 完成层的换肤功能 2.5.htm 用于调试JS程序的测试代码 第3章(/C03/) 3.1.htm 判断浏览器类型的例子 3.2.htm 演示undefinded如何与null进行比较 3.3.htm 演示同名局部变量和全局变量的调用情况 3.4htm 引用数值型数据的例子 3.5.htm 数组使用的小例子 3.6.htm 一个字符串型转换为逻辑型数据的例子 3.7.htm 使用toLowerCase()方法进行转换的例子 3.8.htm 通过字符串类型来调用toLowerCase()方法 3.9.htm 对数字进行了复制、传递和比较 3.10.htm 复制、传递和比较一个对象 3.11.htm 对字符串进行比较 第4章(/C04/) 4.1.htm 简单表达式的例子 4.2.htm 两个字符串进行加操作的实例 4.3.htm 减号的取反功能 4.4.htm 变量赋值的例子 4.5.htm 把表达式赋值给一个变量的方法 4.6.htm 演示了两个符号的区别 4.7.htm “!==”和“===”的演示 4.8.htm 逗号表达式的连接应用 4.9.htm 对表达式进行“Void”运算 4.10.htm typeof运算符的使用 4.11.htm 创建和删除对象的例子 4.12.htm 用delete移除了myArry的第二个元素 4.13.htm 用“()”改变运算优先级的例子 4.14.htm 一个运算符结合性的例子 第5章(/C05/) 5.1.htm 一个最简单的条件语句 5.2.htm 检查变量x是否赋初值 5.3.htm if..else的使用情况 5.4.htm 一个用else进行更多选择的例子 5.5.htm 一个if语句嵌套的例子 5.6.htm 嵌套语句的另一种应用 5.7.htm 一个switch语句的应用 5.8.htm 利用while循环显示了一个6行的表格 5.9.htm while语句和do-while语句的循环实例 5.10.htm 显示了一个简易的九九乘法表 5.11.htm 用无限循环结构对上面乘法表的改写 5.12.htm 一个显示15以内奇数的程序 5.13.htm 一个函数定义的简单示例 5.14.htm 利用一个函数来显示对登录用户的问候 5.15.htm 定义了一个求阶乘的函数 5.16.htm JavaScript实现阶乘函数 5.17.htm 全局变量和局部变量的区别 5.18.htm 变量实例 5.19.htm 在函数内部使用arguments 5.20.htm 创建并使用动态函数的例子 5.21.htm URI编码处理函数的例子 5.22.htm 数值处理函数的例子 5.23.htm 一个isNaN方法应用的例子 第6章(/C06/) 6.1.htm 简单对象的使用 6.2.htm 如何使用构造函数为对象实例增加属性和方法 6.3.htm 在网页上显示中文形式的日期 6.4.htm 将一个小数四舍五入到指定位数 6.5.htm 以从大到小冒泡排序法为例 6.6.htm 使用Navigator的属性进行浏览器检测 6.7.htm 列出了一些可能的浏览器类型 6.8.htm Screen对象的使用 6.9.htm 用来检测浏览器窗口的实际大小 6.10.htm 可以设置文字大小随窗口大小而改变 6.11.htm 客户端性能检测 6.12.htm 个浏览器按键模拟的示例 第7章(/C07/) 7.1.htm 演示了编码和译码使用的方法 7.2.htm 演示了exec方法的用法 7.3.htm 对RegExp对象的综合举例 7.4.htm 演示了字符匹配的使用情况 7.5.htm 正则匹配举例 7.6.htm 用 ^ 匹配目标字符串的开始位置 7.7.htm 用 $ 匹配目标字符串的结尾位置 7.8.htm 用 \b 匹配一个字边界 第8章(/C08/) 8.1.htm XHTML中的事件绑定 8.2.htm 一个表单按钮的click处理器 8.3.htm 测试事件处理器的作用域 8.4.htm 绑定方法的使用 8.5.htm 使用一段文本来接收按键点击 8.6.htm 绑定处理器至对象 8.7.htm 网页中禁止鼠标右键的操作 第9章(/C09/) 9.1.htm 实现了在网页上显示当前时间的功能 9.2.htm 一个显示当前日期和星期的完整示例 9.3.htm 同时显示日期、时间和星期 9.4.htm 一个分时段问候的例子 9.5.htm 实现了显示不同地区的时间代码 9.6.htm 实现悬浮时钟效果的完整代码 9.7.htm 计算器的完整程序 9.8.htm 可以进行四则混合运算的计算器 9.9.htm 打字效果 9.10.htm 实现图片的随机选择 9.11.htm 一个基本下拉菜单 9.12.htm 下拉菜单 9.13.htm 实现渐显效果的下拉菜单的完整代码 9.14.htm 模拟系统菜单 9.15.htm 图片显示窗口的完整代码 9.16.htm 远程控制窗口 9.17.htm 实现菜单滑动效果的完整代码 9.18.htm 左键弹出式菜单效果的完整代码 9.19.htm 实现浮动菜单效果的完整代码 9.20.htm 实现树型导航菜单的完整代码 第10章(/C10/) ReturnText Ajax返回字符串数据 ReturnXML Ajax读取XML类型数据 PostUser Ajax提交数据更新服务器内容 xmlhttpWeather 获取天气网站的内容 第11章(/C11/) 11.1.htm 采用标准的DOM方法创建一个表格并将其插入到页面中 11.2.htm 添加单元格 11.3.htm 删除表格的第一行和第一列 11.4.htm 实现单元格行顺序的改变 dynamicTable 完整的Ajax调用DOM的实例 第12章(/C12/) 12.1.htm 一个在元素内定义CSS的范例 12.2.htm 一个在Head元素内定义CSS的范例 12.3.htm 引用CSS文件的页面 12.4.htm 通过下拉列表框来改变<div>容器的背景色 12.5.htm 实演示如何创建CSS文件 12.6.htm 演示一个在网页中应用投影的范例 12.7.htm 使用Ajax动态改变局部元素样式 CSSmenu 使用Ajax+CSS实现动态菜单效果 第13章(/C13/) 13.1.xml 一个简单的xml文件 13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml 一个雇员列表xml文件 13.2.xsl 一个XSL样式表的例子 13.3.htm Internet Explorer 浏览器中XML的应用 13.4.htm 直接对XML文档进行添加、删除和显示数据的操作 13.5.js Mozilla 浏览器中xml的应用 13.5.xml 简单的xml文件 13.6.htm 格式化输出xml文件 13.7.htm 一个添加/删除记录的例子 第14章(/C14/) MenuSample 级联菜单实例 PageSample 实现Ajax翻页效果 数据库备份 本章实例所需要的数据库 第15章(/C15/) AjaxCallerSchedul 使用AjaxCaller实现简单的定时任务 RicoColor 使用Open Rico实现动态调色板 RicoDrag 使用Open Rico实现可拖拽的层 WebSitetestdojo 使用dojo组件实现卷帘效果的div隐藏 第16章(/C16/) 留言板源代码 所有留言板实例的源代码 数据库备份 留言板数据所需要的数据库 第17章(/ch17) 程序描述:本章介绍开发AJAX的开源框架GWT(Google Web Toolkit) 。最典型的Google Maps和Gmail等Google服务也正是基于此框架开发的。读者将能够快速掌握GWT的各种开发所涉及到的内容。 /firstgwt/FirstGWT.html 第一个GWT示例 /calculator/TexCalculator.html 个税计算器 第18章(/ch18) 程序描述:本章将介绍 GWT应用中高级应用的部分,包括各中组件和布局、如何发送XMLHttpRequest请求,以及如何解决浏览器历史记录问题等等,同时读者还将详细的了解RPC应用的开发过程。 /xmlsample/AjaxSample.html 读取XML文件 /history/HistoryExample.html 保存历史记录 /rpc/RPCExample.html RPC调用 第19章(/ch19) 程序描述:本章模仿Google ig,使用Ajax技术实现一个个性化主页系统。通过拖拽方式设置主页,当完成拖拽窗口时,自动保存布局,使用户可以随时根据喜好来设置布局。 /login.jsp 登录页面 /homepage.jsp 自定义主页 /all.css CSS样式表文件 /js JavaScript脚本文件 /graphics 系统使用的图片文件夹 第20章(/ch20) 程序描述:本章使用Prototype封装的Ajax对象实现上文件时显示进度条的功能。当上文件时,客户端同时显示文件上的进度,从而及时了解文件送情况。 /test.html 上文件 /periodcal.jsp 上文件后台处理页面 / prototype.js prototype框架类库文件 第21章(/ch21) 程序描述:本章将实现通过滑块来显示分页数据的功能。统的分页方式,多数是通过单击按钮的方式来显示分页的。利用Ajax可以通过使用滑块的滑动来选择所显示的分页,这种拖拽的方式有很好的用户体验。 /test.html 滑动显示分页页面 /js JavaScript脚本文件 /img 系统使用的图片文件夹 第22章(/ch22) 程序描述:本章将利用开源框架Prototype,讲述如何在网页中实现Windows关机效果,使读者对Prototype框架有进一步的认识。 /lightbox.html 仿Window关机效果 /lightbox.js JavaScript脚本文件 第23章(/ch23) 程序描述:本章将使用Ajax技术实现动态获取数据的树状菜单。当展开菜单时,自动向服务器发送请求,查询该菜单下的子菜单,并在客户端显示子菜单,而无需刷新整个页面。 /simpleTree.jsp 简单树 /staticTree.jsp 静态树 /dynamicTree.jsp 动态树 /css/tree.css CSS样式表文件 /js/all.js JavaScript脚本文件 /images 图片文件 第24章(/ch24) 程序描述:本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时,自动保存到数据库。打开阅读RSS时,自动获取最新的RSS内容,而无需刷新页面。 /RSSReader.jsp RSS阅读器 /rss.js JavaScript脚本文件 第25章(/ch25) 程序描述:本章将仿照Google Suggest,使用Ajax技术实现动态获取搜索提示的功能。当输入搜索关键字时,自动向服务器发送请求,查询相关的关键字,并及时提示用户可输入的关键字。 /suggest.html 搜索提示 /ajax_search.js JavaScript脚本文件 第26章(/ch26) 程序描述:本章将使用Ajax技术实现无刷新即可浏览图片的相册。浏览图片时,自动向服务器发送请求,查询该类别下的照片,并显示到客户端。用户也可以根据喜好随时改变相册的风格。浏览相册的整个过程无需刷新页面。 / show.jsp 图片浏览 /all.js JavaScript脚本文件 /new.css CSS样式表文件 /styles.css CSS样式表文件 /images 图片文件 第27章(/ch27) 程序描述:本章将使用Ajax技术实现聊天室程序。使用Ajax来动态获取聊天记录,可以避免因屏幕不断刷新而出现的闪动现象。另外,使用Ajax可以减少服务器端的负荷,对这种客户端与服务器端通信量极大的程序是非常有意义的。对用户来讲,有很好地用户体验。 /welcome.jsp 聊天室欢迎页面 /room.jsp 聊天室页面 /ajax_chat.js JavaScript脚本文件 /styles.css CSS样式表文件
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果没有指定context参数,$()将在当前的 HTML 文档中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。 参考 Selectors 获取更多用于 expression 参数的 CSS 语法的信息。 -------------------------------------------------------------------------------- This function accepts a string containing a CSS selector which is then used to match a set of elements. The core functionality of jQuery centers around this function. Everything in jQuery is based upon this, or uses this in some way. The most basic use of this function is to pass in an expression (usually consisting of CSS), which then finds all matching elements. By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document. If you do specify a context, such as a DOM element or jQuery object, the expression will be matched against the contents of that context. See Selectors for the allowed CSS syntax for expressions. 返回值 jQuery 参数 expression (String) : 用来查找的字符串 context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。 示例 找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。 HTML 代码: <p>one</p> <div><p>two</p></div> <p>three</p> jQuery 代码: $("div > p"); 结果: [ <p>two</p> ] -------------------------------------------------------------------------------- 在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 jQuery 代码: $("input:radio", document.forms[0]); -------------------------------------------------------------------------------- 在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。 jQuery 代码: $("div", xml.responseXML); jQuery(html)jQuery(html) 根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。 你可以传递一个手写的 HTML 字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制,可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址),还有反斜杠。当你创建单个元素时,请使用闭合标签或 XHTML 格式。例如,创建一个 span ,可以用 $("<span/>") 或 $("<span></span>") ,但不推荐 $("<span>") -------------------------------------------------------------------------------- Create DOM elements on-the-fly from the provided String of raw HTML. You can pass in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $("<span/>") or $("<span></span>") instead of without the closing slash/tag. 返回值 jQuery 参数 html (String) : 用于动态创建DOM元素的HTML标记字符串 示例 动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性设置为给定的标记字符串,来实现标记到 DOM 元素转换的。所以,这个函数既有灵活性,也有局限性。 jQuery 代码: $("<div><p>Hello</p></div>").appendTo("body"); -------------------------------------------------------------------------------- 创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。 jQuery 代码: // 在 IE 中无效: $("<input>").attr("type", "checkbox"); // 在 IE 中有效: $("<input type='checkbox'>"); jQuery(elements)jQuery(elements) 将一个或多个DOM元素转化为jQuery对象。 这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。 -------------------------------------------------------------------------------- Wrap jQuery functionality around a single or multiple DOM Element(s). This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements). 返回值 jQuery 参数 elements (Element, Array<Element>) : 用于封装成jQuery对象的DOM元素 示例 设置页面背景色。 jQuery 代码: $(document.body).css( "background", "black" ); -------------------------------------------------------------------------------- 隐藏一个表单中所有元素。 jQuery 代码: $(myForm.elements).hide() jQuery(callback)jQuery(callback) $(document).ready()的简写。 允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多。 你可以在一个页面中使用任意多个$(document).ready事件。 参考 ready(Function) 获取更多 ready 事件的信息。 -------------------------------------------------------------------------------- A shorthand for $(document).ready(). Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it. You can have as many $(document).ready events on your page as you like. See ready(Function) for details about the ready event. 返回值 jQuery 参数 callback (Function) : 当DOM加载完成后要执行的函数 示例 当DOM加载完成后,执行其中的函数。 jQuery 代码: $(function(){ // Document is ready }); -------------------------------------------------------------------------------- Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias. jQuery 代码: jQuery(function($) { // Your code using failsafe $ alias here... }); jQuery 对象访问 each(callback)each(callback) 以每一个匹配的元素作为上下文来执行一个函数。 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。 而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。 -------------------------------------------------------------------------------- Execute a function within the context of every matched element. This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element. Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index). Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop). 返回值 jQuery 参数 callback (Function) : 对于每个匹配的元素所要执行的函数 示例 迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: <img/><img/> jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果: [ <img src="test0.jpg" />, <img src="test1.jpg" /> ] -------------------------------------------------------------------------------- 如果你想得到 jQuery对象,可以使用 $(this) 函数。 jQuery 代码: $("img").each(function(){ $(this).toggleClass("example"); }); -------------------------------------------------------------------------------- 你可以使用 'return' 来提前跳出 each() 循环。 HTML 代码: <button>Change colors</button> <span></span> <div></div> <div></div> <div></div> <div></div> <div id="stop">Stop here</div> <div></div> <div></div> <div></div> jQuery 代码: $("button").click(function () { $("div").each(function (index, domEle) { // domEle == this $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } }); });size()size() jQuery 对象中元素的个数。 这个函数的返回值与 jQuery 对象的'length' 属性一致。 -------------------------------------------------------------------------------- The number of elements in the jQuery object. This returns the same number as the 'length' property of the jQuery object. 返回值 Number 示例 计算文档中所有图片数量 HTML 代码: <img src="test1.jpg"/> <img src="test2.jpg"/> jQuery 代码: $("img").size(); 结果: 2 lengthlength jQuery 对象中元素的个数。 当前匹配的元素个数。 size 将返回相同的值。 -------------------------------------------------------------------------------- The number of elements in the jQuery object. The number of elements currently matched. The size function will return the same value. 返回值 Number 示例 计算文档中所有图片数量 HTML 代码: <img src="test1.jpg"/> <img src="test2.jpg"/> jQuery 代码: $("img").length; 结果: 2 get()get() 取得所有匹配的 DOM 元素集合。 这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。 如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。 -------------------------------------------------------------------------------- Access all matched DOM elements. This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions. 返回值 Array<Element> 示例 选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。 HTML 代码: <img src="test1.jpg"/> <img src="test2.jpg"/> jQuery 代码: $("img").get().reverse(); 结果: [ <img src="test2.jpg"/> <img src="test1.jpg"/> ] get(index)get(index) 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。 这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。 -------------------------------------------------------------------------------- Access a single matched DOM element at a specified index in the matched set. This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery object itself like $(this)[0]. 返回值 Element 参数 index (Number) :取得第 index 个位置上的元素 示例 HTML 代码: <img src="test1.jpg"/> <img src="test2.jpg"/> jQuery 代码: $("img").get(0); 结果: [ <img src="test1.jpg"/> ] index(subject)index(subject) 搜索与参数表示的对象匹配的元素,并返回相应元素的索引值值。 如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。 -------------------------------------------------------------------------------- Searches every matched element for the object and returns the index of the element, if found, starting with zero. Returns -1 if the object wasn't found. 返回值 Number 参数 subject (Element) : 要搜索的对象 示例 返回ID值为foobar的元素的索引值值。 HTML 代码: <div id="foobar"><b></b><span id="foo"></span></div> jQuery 代码: $("*").index($('#foobar')[0]) 结果: 5 插件机制 jQuery.fn.extend(object)jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。 查看这里Plugins/Authoring可以获取更多信息。 -------------------------------------------------------------------------------- Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin). Can be used to add functions into the to add plugin methods (plugins). 返回值 jQuery 参数 object (Object) :用来扩充 jQuery 对象。 示例 增加两个插件方法。 jQuery 代码: jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); 结果: $("input[@type=checkbox]").check(); $("input[@type=radio]").uncheck(); jQuery.extend(object)jQuery.extend(object) 扩展jQuery对象本身。 用来在jQuery命名空间上增加新函数。 查看 'jQuery.fn.extend' 获取更多添加插件的信息。 -------------------------------------------------------------------------------- Extends the jQuery object itself. Can be used to add functions into the jQuery namespace. See 'jQuery.fn.extend' for more information on using this method to add Plugins. 返回值 jQuery 参数 object (Object) : 用以扩展 jQuery 对象 示例 在jQuery命名空间上增加两个函数。 jQuery 代码: jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); 结果: jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5 多库共存 jQuery.noConflict()jQuery.noConflict() 运行这个函数将变量$的控制权让渡给第一个实现它的那个库。 这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。 -------------------------------------------------------------------------------- Run this function to give control of the $ variable back to whichever library first implemented it. This helps to make sure that jQuery doesn't conflict with the $ object of other libraries. By using this function, you will only be able to access jQuery using the 'jQuery' variable. For example, where you used to do $("div p"), you now must do jQuery("div p"). 返回值 jQuery 示例 将$引用的对象映射回原始的对象。 jQuery 代码: jQuery.noConflict(); // 使用 jQuery jQuery("div p").hide(); // 使用其他库的 $() $("content").style.display = 'none'; -------------------------------------------------------------------------------- 恢复使用别名$,然后创建并执行一个函数,在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中,原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。 jQuery 代码: jQuery.noConflict(); (function($) { $(function() { // 使用 $ 作为 jQuery 别名的代码 }); })(jQuery); // 其他用 $ 作为别名的库的代码 -------------------------------------------------------------------------------- 创建一个新的别名用以在接下来的库中使用jQuery对象。 jQuery 代码: var j = jQuery.noConflict(); // 基于 jQuery 的代码 j("div p").hide(); // 基于其他库的 $() 代码 $("content").style.display = 'none'; jQuery.noConflict(extreme)jQuery.noConflict(extreme) 将$和jQuery的控制权都交还给原来的库。用之前请考虑清楚! 这是相对于简单的 noConflict 方法更极端的版本,因为这将完全重新定义jQuery。这通常用于一种极端的情况,比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。 -------------------------------------------------------------------------------- Revert control of both the $ and jQuery variables to their original owners. Use with discretion. This is a more-extreme version of the simple noConflict method, as this one will completely undo what jQuery has introduced. This is to be used in an extreme case where you'd like to embed jQuery into a high-conflict environment. NOTE: It's very likely that plugins won't work after this particular method has been called. 返回值 jQuery 参数 extreme (Boolean) : 入 true 来允许彻底将jQuery变量还原 示例 完全将 jQuery 移到一个新的命名空间。 jQuery 代码: var dom = {}; dom.query = jQuery.noConflict(true); 结果: // 新 jQuery 的代码 dom.query("div p").hide(); // 另一个库 $() 的代码 $("content").style.display = 'none'; // 另一个版本 jQuery 的代码 jQuery("div > p").hide(); 选择器基本 #id#id 根据给定的ID匹配一个元素。 -------------------------------------------------------------------------------- Matches a single element with the given id attribute. 返回值 Element 参数 id (String) : 用于搜索的,通过元素的 id 属性中给定的值 示例 查找 ID 为"myDiv"的元素。 HTML 代码: <div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div> jQuery 代码: $("#myDiv"); 结果: [ <div id="myDiv">id="myDiv"</div> ] elementelement 根据给定的元素名匹配所有元素 -------------------------------------------------------------------------------- Matches all elements with the given name. 返回值 Array<Element> 参数 element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。 示例 查找一个 DIV 元素。 HTML 代码: <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> jQuery 代码: $("div"); 结果: [ <div>DIV1</div>, <div>DIV2</div> ] .class.class 根据给定的类匹配元素。 -------------------------------------------------------------------------------- Matches all elements with the given class. 返回值 Array<Element> 参数 class (String) : 一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。 示例 查找所有类是 "myClass" 的元素. HTML 代码: <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> jQuery 代码: $(".myClass"); 结果: [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ] ** 匹配所有元素 多用于结合上下文来搜索。 -------------------------------------------------------------------------------- Matches all elements. Most useful when combined with a context to search in. 返回值 Array<Element> 示例 找到每一个元素 HTML 代码: <div>DIV</div> <span>SPAN</span> <p>P</p> jQuery 代码: $("*") 结果: [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ] selector1,selector2,selectorNselector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。 你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。 -------------------------------------------------------------------------------- Matches the combined results of all the specified selectors. You can specify any number of selectors to combine into a single result. 返回值 Array<Element> 参数 selector1 (Selector) : 一个有效的选择器 selector2 (Selector) : 另一个有效的选择器 selectorN (Selector) : (可选) 任意多个有效选择器 示例 找到匹配任意一个类的元素。 HTML 代码: <div>div</div> <p class="myClass">p class="myClass"</p> <span>span</span> <p class="notMyClass">p class="notMyClass"</p> jQuery 代码: $("div,span,p.myClass") 结果: [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ] 层级 ancestor descendantancestor descendant 在给定的祖先元素下匹配所有的后代元素 -------------------------------------------------------------------------------- Matches all descendant elements specified by descendant of elements specified by ancestor. 返回值 Array<Element> 参数 ancestor (Selector) : 任何有效选择器 descendant (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的后代元素 示例 找到表单中所有的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form input") 结果: [ <input name="name" />, <input name="newsletter" /> ] parent > childparent > child 在给定的父元素下匹配所有的子元素 -------------------------------------------------------------------------------- Matches all child elements specified by child of elements specified by parent. 返回值 Array<Element> 参数 parent (Selector) : 任何有效选择器 child (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的子元素 示例 匹配表单中所有的子级input元素。 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form > input") 结果: [ <input name="name" /> ] prev + nextprev + next 匹配所有紧接在 prev 元素后的 next 元素 -------------------------------------------------------------------------------- Matches all next elements specified by next that are next to elements specified by prev. 返回值 Array<Element> 参数 prev (Selector) : 任何有效选择器 next (Selector) :一个有效选择器并且紧接着第一个选择器 示例 匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("label + input") 结果: [ <input name="name" />, <input name="newsletter" /> ] prev ~ siblingsprev ~ siblings 匹配 prev 元素之后的所有 siblings 元素 -------------------------------------------------------------------------------- Matches all sibling elements after the "prev" element that match the filtering "siblings" selector. 返回值 Array<Element> 参数 prev (Selector) : 任何有效选择器 siblings (Selector) : 一个选择器,并且它作为第一个选择器的同辈 示例 找到所有与表单同辈的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form ~ input") 结果: [ <input name="none" /> ] 简单 :first:first 匹配找到的第一个元素 -------------------------------------------------------------------------------- Matches the first selected element. 返回值 Element 示例 查找表格的第一行 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:first") 结果: [ <tr><td>Header 1</td></tr> ] :last:last 匹配找到的最后一个元素 -------------------------------------------------------------------------------- Matches the last selected element. 返回值 Element 示例 查找表格的最后一行 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:last") 结果: [ <tr><td>Value 2</td></tr> ] :not(selector):not(selector) 去除所有与给定选择器匹配的元素 -------------------------------------------------------------------------------- Removes all elements matching the given selector. 返回值 Array<Element> 参数 selector (Selector) : 用于筛选的选择器 示例 查找所有未选中的 input 元素 HTML 代码: <input name="apple" /> <input name="flower" checked="checked" /> jQuery 代码: $("input:not(:checked)") 结果: [ <input name="apple" /> ] :even:even 匹配所有索引值为偶数的元素,从 0 开始计数 -------------------------------------------------------------------------------- Matches even elements, zero-indexed. 返回值 Array<Element> 示例 查找表格的1、3、5...行(即索引值0、2、4...) HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:even") 结果: [ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ] :odd:odd 匹配所有索引值为奇数的元素,从 0 开始计数 -------------------------------------------------------------------------------- Matches odd elements, zero-indexed. 返回值 Array<Element> 示例 查找表格的2、4、6行(即索引值1、3、5...) HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:odd") 结果: [ <tr><td>Value 1</td></tr> ] :eq(index):eq(index) 匹配一个给定索引值的元素 -------------------------------------------------------------------------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 示例 查找第二行 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:eq(1)") 结果: [ <tr><td>Value 1</td></tr> ] :gt(index):gt(index) 匹配所有大于给定索引值的元素 -------------------------------------------------------------------------------- Matches all elements with an index above the given one. 返回值 Array<Element> 参数 index (Number) : 从 0 开始计数 示例 查找第二第三行,即索引值是1和2,也就是比0大 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:gt(0)") 结果: [ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ] :lt(index):lt(index) 匹配所有小于给定索引值的元素 -------------------------------------------------------------------------------- Matches all elements with an index below the given one. 返回值 Array<Element> 参数 index (Number) : 从 0 开始计数 示例 查找第一第二行,即索引值是0和1,也就是比2小 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:lt(2)") 结果: [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ] :header:header 匹配如 h1, h2, h3之类的标题元素 -------------------------------------------------------------------------------- Matches all elements that are headers, like h1, h2, h3 and so on. 返回值 Array<Element> 示例 给页面内所有标题加上背景色 HTML 代码: <h1>Header 1</h1> <p>Contents 1</p> <h2>Header 2</h2> <p>Contents 2</p> jQuery 代码: $(":header").css("background", "#EEE"); 结果: [ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ] :animated:animated 匹配所有没有在执行动画效果中的元素 -------------------------------------------------------------------------------- Matches all elements that are currently being animated. 返回值 Array<Element> 示例 只有对不在执行动画效果的元素执行一个动画特效 HTML 代码: <button id="run">Run</button><div></div> jQuery 代码: $("#run").click(function(){ $("div:not(:animated)").animate({ left: "+20" }, 1000); }); 内容 :contains(text):contains(text) 匹配包含给定文本的元素 -------------------------------------------------------------------------------- Matches elements which contain the given text. 返回值 Array<Element> 参数 text (String) : 一个用以查找的字符串 示例 查找所有包含 "John" 的 div 元素 HTML 代码: <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn jQuery 代码: $("div:contains('John')") 结果: [ <div>John Resig</div>, <div>Malcom John Sinclair</div> ] :empty:empty 匹配所有不包含子元素或者文本的空元素 -------------------------------------------------------------------------------- Matches all elements that are empty, be it elements or text. 返回值 Array<Element> 示例 查找所有不包含子元素或者文本的空元素 HTML 代码: <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> jQuery 代码: $("td:empty") 结果: [ <td></td>, <td></td> ] :has(selector):has(selector) 匹配含有选择器所匹配的元素的元素 -------------------------------------------------------------------------------- Matches elements which contain at least one element that matches the specified selector. 返回值 Array<Element> 参数 selector (Selector) : 一个用于筛选的选择器 示例 给所有包含 p 元素的 div 元素添加一个 text 类 HTML 代码: <div><p>Hello</p></div> <div>Hello again!</div> jQuery 代码: $("div:has(p)").addClass("test"); 结果: [ <div class="test"><p>Hello</p></div> ] :parent:parent 匹配含有子元素或者文本的元素 -------------------------------------------------------------------------------- Matches all elements that are parents - they have child elements, including text. 返回值 Array<Element> 示例 查找所有含有子元素或者文本的 td 元素 HTML 代码: <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> jQuery 代码: $("td:parent") 结果: [ <td>Value 1</td>, <td>Value 1</td> ] 可见性 :hidden:hidden 匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到 -------------------------------------------------------------------------------- Matches all elements that are hidden, or input elements of type "hidden". 返回值 Array<Element> 示例 查找所有不可见的 tr 元素 HTML 代码: <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:hidden") 结果: [ <tr style="display:none"><td>Value 1</td></tr> ] :visible:visible 匹配所有的可见元素 -------------------------------------------------------------------------------- Matches all elements that are visible. 返回值 Array<Element> 示例 查找所有可见的 tr 元素 HTML 代码: <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:visible") 结果: [ <tr><td>Value 2</td></tr> ] 属性 [attribute][attribute] 匹配包含给定属性的元素 -------------------------------------------------------------------------------- Matches elements that have the specified attribute. 返回值 Array<Element> 参数 attribute (String) : 属性名 示例 查找所有含有 id 属性的 div 元素 HTML 代码: <div> <p>Hello!</p> </div> <div id="test2"></div> jQuery 代码: $("div[id]") 结果: [ <div id="test2"></div> ] [attribute=value][attribute=value] 匹配给定的属性是某个特定值的元素 -------------------------------------------------------------------------------- Matches elements that have the specified attribute with a certain value. 返回值 Array<Element> 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 属性是 newsletter 的 input 元素 HTML 代码: '<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> jQuery 代码: $("input[name='newsletter']").attr("checked", true); 结果: [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ] [attribute!=value][attribute!=value] 匹配给定的属性是不包含某个特定值的元素 -------------------------------------------------------------------------------- Matches elements that don't have the specified attribute with a certain value. 返回值 Array<Element> 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 属性不是 newsletter 的 input 元素 HTML 代码: '<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> jQuery 代码: $("input[name!='newsletter']").attr("checked", true); 结果: [ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ] [attribute^=value][attribute^=value] 匹配给定的属性是以某些值开始的元素 -------------------------------------------------------------------------------- Matches elements that have the specified attribute and it starts with a certain value. 返回值 Array<Element> 参数 attribute (String) : 属性名 value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 以 'news' 开始的 input 元素 HTML 代码: <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> jQuery 代码: $("input[name^='news']") 结果: [ <input name="newsletter" />, <input name="newsboy" /> ] [attribute$=value][attribute$=value] 匹配给定的属性是以某些值结尾的元素 -------------------------------------------------------------------------------- Matches elements that have the specified attribute and it ends with a certain value. 返回值 Array<Element> 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 以 'letter' 结尾的 input 元素 HTML 代码: <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> jQuery 代码: $("input[name$='letter']") 结果: [ <input name="newsletter" />, <input name="jobletter" /> ] [attribute*=value][attribute*=value] 匹配给定的属性是以包含某些值的元素 -------------------------------------------------------------------------------- Matches elements that have the specified attribute and it contains a certain value. 返回值 Array<Element> 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 包含 'man' 的 input 元素 HTML 代码: <input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> jQuery 代码: $("input[name*='man']") 结果: [ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ] [selector1][selector2][selectorN][selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用。 -------------------------------------------------------------------------------- Matches elements that have the specified attribute and it contains a certain value. 返回值 Array<Element> 参数 selector1 (Selector) : 属性选择器 selector2 (Selector) : 另一个属性选择器,用以进一步缩小范围 selectorN (Selector) : 任意多个属性选择器 示例 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的 HTML 代码: <input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /> jQuery 代码: $("input[id][name$='man']") 结果: [ <input id="letterman" name="new-letterman" /> ] 子元素 :nth-child(index/even/odd/equation):nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的! 可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2) -------------------------------------------------------------------------------- Matches the nth-child of its parent. While ':eq(index)' matches only a single element, this matches more then one: One for each parent. The specified index is one-indexed, in contrast to :eq() which starst at zero. 返回值 Array<Element> 参数 index (Number) : 要匹配元素的序号,从1开始 示例 在每个 ul 查找第 2 个li HTML 代码: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> jQuery 代码: $("ul li:nth-child(2)") 结果: [ <li>Karl</li>, <li>Tane</li> ] :first-child:first-child 匹配第一个子元素 ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 -------------------------------------------------------------------------------- Matches the first child of its parent. While ':first' matches only a single element, this matches more then one: One for each parent. 返回值 Array<Element> 示例 在每个 ul 中查找第一个 li HTML 代码: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> jQuery 代码: $("ul li:first-child") 结果: [ <li>John</li>, <li>Glen</li> ] :last-child:last-child 匹配最后一个子元素 ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 -------------------------------------------------------------------------------- Matches the last child of its parent. While ':last' matches only a single element, this matches more then one: One for each parent. 返回值 Array<Element> 示例 在每个 ul 中查找最后一个 li HTML 代码: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> jQuery 代码: $("ul li:last-child") 结果: [ <li>Brandon</li>, <li>Ralph</li> ] :only-child:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配 如果父元素中含有其他元素,那将不会被匹配。 -------------------------------------------------------------------------------- Matches the only child of its parent. If the parent has other child elements, nothing is matched. 返回值 Array<Element> 示例 在 ul 中查找是唯一子元素的 li HTML 代码: <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> jQuery 代码: $("ul li:only-child") 结果: [ <li>Glen</li> ] 表单 :input:input 匹配所有 input, textarea, select 和 button 元素 -------------------------------------------------------------------------------- Matches all input, textarea, select and button elements. 返回值 Array<Element> 示例 查找所有的input元素 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":input") 结果: [ <input type="text" />, <input type="checkbox" />, <input type="radio" />, <input type="image" />, <input type="file" />, <input type="submit" />, <input type="reset" />, <input type="password" />, <input type="button" /> ] :text:text 匹配所有的单行文本框 -------------------------------------------------------------------------------- Matches all input elements of type text. 返回值 Array<Element> 示例 查找所有文本框 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":text") 结果: [ <input type="text" /> ] :password:password 匹配所有密码框 -------------------------------------------------------------------------------- Matches all input elements of type password. 返回值 Array<Element> 示例 查找所有密码框 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":password") 结果: [ <input type="password" /> ] :radio:radio 匹配所有单选按钮 -------------------------------------------------------------------------------- Matches all input elements of type radio. 返回值 Array<Element> 示例 查找所有单选按钮 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":radio") 结果: [ <input type="radio" /> ] :checkbox:checkbox 匹配所有复选框 -------------------------------------------------------------------------------- Matches all input elements of type checkbox. 返回值 Array<Element> 示例 查找所有复选框 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":checkbox") 结果: [ <input type="checkbox" /> ] :submit:submit 匹配所有提交按钮 -------------------------------------------------------------------------------- Matches all input elements of type submit. 返回值 Array<Element> 示例 查找所有提交按钮 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":submit") 结果: [ <input type="submit" /> ] :image:image 匹配所有图像域 -------------------------------------------------------------------------------- Matches all input elements of type image. 返回值 Array<Element> 示例 匹配所有图像域 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":image") 结果: [ <input type="image" /> ] :reset:reset 匹配所有重置按钮 -------------------------------------------------------------------------------- Matches all input elements of type reset. 返回值 Array<Element> 示例 查找所有重置按钮 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":reset") 结果: [ <input type="reset" /> ] :button:button 匹配所有按钮 -------------------------------------------------------------------------------- Matches all input elements of type button. 返回值 Array<Element> 示例 查找所有按钮. HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":button") 结果: [ <input type="button" />,<button></button> ] :file:file 匹配所有文件域 -------------------------------------------------------------------------------- Matches all input elements of type file. 返回值 Array<Element> 示例 查找所有文件域 HTML 代码: <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> jQuery 代码: $(":file") 结果: [ <input type="file" /> ] :hidden:hidden 匹配所有不可见元素,或者type为hidden的元素 -------------------------------------------------------------------------------- Matches all elements that are hidden, or input elements of type "hidden". 返回值 Array<Element> 示例 查找隐藏的 tr HTML 代码: <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:hidden") 结果: [ <tr style="display:none"><td>Value 1</td></tr> ] -------------------------------------------------------------------------------- 匹配type为hidden的元素 HTML 代码: <form> <input type="text" name="email" /> <input type="hidden" name="id" /> </form> jQuery 代码: $("input:hidden") 结果: [ <input type="hidden" name="id" /> ] 表单对象属性 :enabled:enabled 匹配所有可用元素 -------------------------------------------------------------------------------- Matches all elements that are enabled. 返回值 Array<Element> 示例 查找所有可用的input元素 HTML 代码: <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> jQuery 代码: $("input:enabled") 结果: [ <input name="id" /> ] :disabled:disabled 匹配所有不可用元素 -------------------------------------------------------------------------------- Matches all elements that are disabled. 返回值 Array<Element> 示例 查找所有不可用的input元素 HTML 代码: <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> jQuery 代码: $("input:disabled") 结果: [ <input name="email" disabled="disabled" /> ] :checked:checked 匹配所有选中的复选框元素 -------------------------------------------------------------------------------- Matches all elements that are checked. 返回值 Array<Element> 示例 查找所有选中的复选框元素 HTML 代码: <form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> </form> jQuery 代码: $("input:checked") 结果: [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ] :selected:selected 匹配所有选中的选项元素 -------------------------------------------------------------------------------- Matches all elements that are selected. 返回值 Array<Element> 示例 查找所有选中的选项元素 HTML 代码: <select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option> </select> jQuery 代码: $("select option:selected") 结果: [ <option value="2" selected="selected">Gardens</option> ] -------------------------------------------------------------------------------- Finds all option elements that are selected. HTML 代码: <select multiple="multiple"> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3" selected="selected">Trees</option> </select> jQuery 代码: $("select option:selected") 结果: [ <option value="2" selected="selected">Gardens</option>, <option value="3" selected="selected">Trees</option> ] 属性属性 attr(name)attr(name) 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。 -------------------------------------------------------------------------------- Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned. 返回值 Object 参数 name (String) : 属性名称 示例 返回文档中第一个图像的src属性值。 HTML 代码: <img src="test.jpg"/> jQuery 代码: $("img").attr("src"); 结果: test.jpg attr(properties)attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性。 这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ). -------------------------------------------------------------------------------- Set a key/value object as properties to all matched elements. This serves as the best way to set a large number of properties on all matched elements. Note that you must use 'className' as key if you want to set the class-Attribute. Or use .addClass( class ) or .removeClass( class ). 返回值 jQuery 参数 properties (Map) : 作为属性的“名/值对”对象 示例 为所有图像设置src和alt属性。 HTML 代码: <img/> jQuery 代码: $("img").attr({ src: "test.jpg", alt: "Test Image" }); 结果: [ <img src= "test.jpg" alt:="Test Image" /> ] -------------------------------------------------------------------------------- attr(key,value)attr(key,value) 为所有匹配的元素设置一个属性值。 -------------------------------------------------------------------------------- Set a single property to a value, on all matched elements. 返回值 jQuery 参数 key (String) : 属性名称 value (Object) : 属性值 示例 为所有图像设置src属性。 HTML 代码: <img/> <img/> jQuery 代码: $("img").attr("src","test.jpg"); 结果: [ <img src= "test.jpg" /> , <img src= "test.jpg" /> ] attr(key,fn)attr(key,fn) 为所有匹配的元素设置一个计算的属性值。 不提供值,而是提供一个函数,由这个函数计算的值作为属性值。 -------------------------------------------------------------------------------- Set a single property to a computed value, on all matched elements. Instead of supplying a string value as described 'above', a function is provided that computes the value. 返回值 jQuery 参数 key (String) : 属性名称 fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值 示例 把src属性的值设置为title属性的值。 HTML 代码: <img src="test.jpg"/> jQuery 代码: $("img").attr("title", function() { return this.src }); 结果: <img src="test.jpg" title="test.jpg" /> removeAttr(name)removeAttr(name) 从每一个匹配的元素中删除一个属性 -------------------------------------------------------------------------------- Remove an attribute from each of the matched elements. 返回值 jQuery 参数 name (String) : 要删除的属性名 示例 将文档中图像的src属性删除 HTML 代码: <img src="test.jpg"/> jQuery 代码: $("img").removeAttr("src"); 结果: [ <img /> ] 类 addClass(class)addClass(class) 为每个匹配的元素添加指定的类名。 -------------------------------------------------------------------------------- Adds the specified class(es) to each of the set of matched elements. 返回值 jQuery 参数 class (String) : 一个或多个要添加到元素中的CSS类名,请用空格分开 示例 为匹配的元素加上 'selected' 类 HTML 代码: <p>Hello</p> jQuery 代码: $("p").addClass("selected"); 结果: [ <p class="selected">Hello</p> ] -------------------------------------------------------------------------------- 为匹配的元素加上 selected highlight 类 HTML 代码: <p>Hello</p> jQuery 代码: $("p").addClass("selected highlight"); 结果: [ <p class="selected highlight">Hello</p> ] removeClass(class)removeClass(class) 从所有匹配的元素中删除全部或者指定的类。 -------------------------------------------------------------------------------- Removes all or the specified class(es) from the set of matched elements. 返回值 jQuery 参数 class (String) : (可选) 一个或多个要删除的CSS类名,请用空格分开 示例 从匹配的元素中删除 'selected' 类 HTML 代码: <p class="selected first">Hello</p> jQuery 代码: $("p").removeClass("selected"); 结果: [ <p>Hello</p> ] -------------------------------------------------------------------------------- 删除匹配元素的所有类 HTML 代码: <p class="selected first">Hello</p> jQuery 代码: $("p").removeClass(); 结果: [ <p>Hello</p> ] toggleClass(class)toggleClass(class) 如果存在(不存在)就删除(添加)一个类。 -------------------------------------------------------------------------------- Adds the specified class if it is not present, removes the specified class if it is present. 返回值 jQuery 参数 class (String) :CSS类名 示例 为匹配的元素切换 'selected' 类 HTML 代码: <p>Hello</p><p class="selected">Hello Again</p> jQuery 代码: $("p").toggleClass("selected"); 结果: [ <p class="selected">Hello</p>, <p>Hello Again</p> ] Html代码 html()html() 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 -------------------------------------------------------------------------------- Get the html contents of the first matched element. This property is not available on XML documents (although it will work for XHTML documents). 返回值 String 示例 HTML 代码: <div><p>Hello</p></div> jQuery 代码: $("div").html(); 结果: Hello html(val)html(val) 设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 -------------------------------------------------------------------------------- Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents). 返回值 jQuery 参数 val (String) : 用于设定HTML内容的值 示例 HTML 代码: <div></div> jQuery 代码: $("div").html("<p>Hello Again</p>"); 结果: [ <div><p>Hello Again</p></div> ] 文本 text()text() 取得所有匹配元素的内容。 结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。 -------------------------------------------------------------------------------- Get the text contents of all matched elements. The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents. 返回值 String 示例 HTML 代码: <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p> jQuery 代码: $("p").text(); 结果: Test Paragraph.Paraparagraph text(val)text(val) 设置所有匹配元素的文本内容 与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体). -------------------------------------------------------------------------------- Set the text contents of all matched elements. Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities). 返回值 jQuery 参数 val (String) : 用于设置元素内容的文本 示例 HTML 代码: <p>Test Paragraph.</p> jQuery 代码: $("p").text("<b>Some</b> new text."); 结果: [ <p><b>Some</b> new text.</p> ] 值 val()val() 获得第一个匹配元素的当前值。 在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。 -------------------------------------------------------------------------------- Get the content of the value attribute of the first matched element. In jQuery 1.2, a value is now returned for all elements, including selects. For multiple selects an array of values is returned. 返回值 String,Array 示例 获得单个select的值和多选select的值。 HTML 代码: <p></p><br/> <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> jQuery 代码: $("p").append( "<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", ") ); 结果: [ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>] -------------------------------------------------------------------------------- 获取文本框中的值 HTML 代码: <input type="text" value="some text"/> jQuery 代码: $("input").val(); 结果: some text val(val)val(val) 设置每一个匹配元素的值。 在 jQuery 1.2, 这也可以为select元件赋值 -------------------------------------------------------------------------------- Set the value attribute of every matched element. In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options. 返回值 jQuery 参数 val (String) : 要设置的值。 示例 设定文本框的值 HTML 代码: <input type="text"/> jQuery 代码: $("input").val("hello world!"); val(val)val(val) check,select,radio等都能使用为之赋值 返回值 jQuery 参数 val (Array<String>) : 用于 check/select 的值 示例 设定一个select和一个多选的select的值 HTML 代码: <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" value="check1"/> check1 <input type="checkbox" value="check2"/> check2 <input type="radio" value="radio1"/> radio1 <input type="radio" value="radio2"/> radio2 jQuery 代码: $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]); 筛选过滤 eq(index)eq(index) 获取第N个元素 这个元素的位置是从0算起。 -------------------------------------------------------------------------------- Reduce the set of matched elements to a single element. The position of the element in the set of matched elements starts at 0 and goes to length - 1. 返回值 jQuery 参数 index (Integer) :元素在jQuery对象中的索引 示例 获取匹配的第二个元素 HTML 代码: <p> This is just a test.</p> <p> So is this</p> jQuery 代码: $("p").eq(1) 结果: [ <p> So is this</p> ] hasClass(class)hasClass(class) 检查当前的元素是否含有某个特定的类,如果有,则返回true。 这其实就是 is("." + class)。 -------------------------------------------------------------------------------- Checks the current selection against a class and returns true, if at least one element of the selection has the given class. This is an alternative to is("." + class). 返回值 Boolean 参数 class (String) : 用于匹配的类名 示例 给包含有某个类的元素进行一个动画。 HTML 代码: <div class="protected"></div><div></div> jQuery 代码: $("div").click(function(){ if ( $(this).hasClass("protected") ) $(this) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: 0 }); }); filter(expr)filter(expr) 筛选出与指定表达式匹配的元素集合。 这个方法用于缩小匹配的范围。用逗号分隔多个表达式 -------------------------------------------------------------------------------- Removes all elements from the set of matched elements that do not match the specified expression(s). This method is used to narrow down the results of a search. Provide a comma-separated list of expressions to apply multiple filters at once. 返回值 jQuery 参数 expr (Expression) : 表达式 示例 保留带有select类的元素 HTML 代码: <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p> jQuery 代码: $("p").filter(".selected") 结果: [ <p class="selected">And Again</p> ] -------------------------------------------------------------------------------- 保留第一个以及带有select类的元素 HTML 代码: <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p> jQuery 代码: $("p").filter(".selected, :first") 结果: [ <p>Hello</p>, <p class="selected">And Again</p> ] filter(fn)filter(fn) 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除,否则就会保留。 -------------------------------------------------------------------------------- Removes all elements from the set of matched elements that does not match the specified function. The function is called with a context equal to the current element (just like '$.each'). If the function returns false, then the element is removed - anything else and the element is kept. 返回值 jQuery 参数 fn (Function) : 传递进filter的函数 示例 保留子元素中不含有ol的元素。 HTML 代码: <p><ol><li>Hello</li></ol></p><p>How are you?</p> jQuery 代码: $("p").filter(function(index) { return $("ol", this).length == 0; }); 结果: [ <p>How are you?</p> ] is(expr)is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。 如果没有元素符合,或者表达式无效,都返回'false'. 'filter' 内部实际也是在调用这个函数,所以,filter()函数原有的规则在这里也适用。 -------------------------------------------------------------------------------- Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression. If no element fits, or the expression is not valid, then the response will be 'false'. 'filter' is used internally, therefore all rules that apply there apply here, as well. 返回值 Boolean 参数 expr (String) :用于筛选的表达式 示例 由于input元素的父元素是一个表单元素,所以返回true。 HTML 代码: <form><input type="checkbox" /></form> jQuery 代码: $("input[type='checkbox']").parent().is("form") 结果: true map(callback)map(callback) 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。 -------------------------------------------------------------------------------- Translate a set of elements into another set of values (which may, or may not, be elements). You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations. This is provided as a convenience method for using '$.map()'. 返回值 jQuery 参数 callback (Function) : 给每个元素执行的函数 示例 把form中的每

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值