logo资料库

jquery 学习笔记.doc

第1页 / 共3页
第2页 / 共3页
第3页 / 共3页
资料共3页,全文预览结束
JQuery Tutorial: start jquery
JQuery Tutorial: start jquery 1 选择器: 如果得到的结果是多个元素, 就是一个数组. 1.1 元素选择器: $(“a”), 选择所有的, 1.2 id 选择器: $(“#a”), 选择 id 是 a 的元素 1.3 类选择器: $(“.a”), 选择样式 class 是 a 的元素 1.4 all: $(“*”), 选择所有的元素 1.5 多选择器共同使用$(“a, #b, p.c”); 选择, id 为 b 的元素, 和

元素 class 是 c 的元素. 1.6 在回调函数内部可以使用$(this)得到当前绑定事件的对象. 1.7 如果一个选择器得到了一个集合, 可以使用> 获取下级元素, 例如$(“div > a”)可以获 取 div 中的所有 a 标签的集合. 1.8 支持 xpath 的选择方式, 例如$(“#i a”)就是查找 id 是 i 的标签元素下的所有标 签 1.9 类选择器中使用[]方式指定具体有哪个属性, 值为什么的该标签才被选择, 例如$(“div a[name*=t]”)选择的结果就是所有的 div 标签中的 a 标签, 有 name 属性且值以 t 开头的 标签. 如果只需要有该属性而不论值, 只需要指定属性名即可 1.10 $(“label + input”) 返回所有紧跟在 label 的 input 元素集合 1.11 $(“$label ~ input”) 返回所有和 label 同辈的 input 元素集合 2 属性: 2.1 类 2.1.1 addClass(“classname”), 为元素添加一个 css 样式, 也就是一个 class 2.1.2 removeClass(“classname”), 删除匹配元素的中一个 css 样式, 如果不指定, 删除所 有匹配元素的所有 css 2.1.3 toggleClass(“classname”), 如果元素存在该样式则删除, 如果不存在, 就添加. 2.2 Html 代码 2.2.1 html(), 获取对象的 innerHTML 2.2.2 html(string), 设置对象的 innerHTML 2.3 文本 2.3.1 text(): 取得所有匹配元素的内容 2.3.2 text(value): 为所有匹配元素设置文本内容 3 筛选 3.1 查找 3.1.1 find: $(“div”).find(“a”) 查找所有的 div 标签中的 a 标签子元素. 查找后代元素 3.1.2 next(“筛选表达式”): 返回元素集合的第一个元素紧邻的下一个同辈元素 3.1.3 enxtAll(“筛选表达式”): 返回元素集合的第一个元素紧邻的后面所有元素. 3.1.4 children(‘筛选表达式’): 返回元素集合中每一个元素的所有的子元素的集合....只 考虑子元素, 不考虑孙子以及更远的后代. 3.1.5 parent(‘筛选表达式’): 返回元素集合中每个元素的父元素, 可以使用表达式筛选 3.1.6 parents(‘是选表达式’): 返回元素集合中所有元素的继承树中的所有祖先元素, 可 以使用表达式筛选 3.2 过滤
3.2.1 not(string | DOMElement | Array), 从元素集合中删除与指定表达式 $(“div”).not(“:has(a)”), 查找到所有的 div, 并把 div 中包含 a 标签的元素 匹配的元素. 删除. 多个表达式用逗号分隔. 3.2.2 filter(string | DOMElement | Array), 从元素集合中利用指定的表达 式检索匹配的元素, 得到的结果是和表达式匹配的. .. . .多个表达式用逗号分割 3.2.3 is(“筛选表达式”): 检查当前元素集合, 如果其中至少有一个元素符合该表达式, 就返回 true, 如果没有元素符合该表达式, 或者表达式无效都返回 false......filter 的内 部也是调用了这个函数. 3.3 串联 3.3.1 end(), 回到最近一个破坏性操作之前, 例如$(“div”).find(“a”)选择了 div 的所有子 辈 a 标签元素, 但是使用$(“div”).find(“a”).end()得到的却是$(“div”)..............破坏性操 作包 括: add, addSelf, children, filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, siblings, slice 以及 Manipulation 的 clone 4 工具 4.1 数组和对象操作 4.1.1 jQuery.each(obj, callback): 遍 历 对 象 或 数 组 的 方 法, 可 以 遍 历 任 何 对 象. 例 如 $.each([0, 1, 2, 3, 4, 5], function(i,n) { alert(i);}).... 回调函数有两个参数, 在遍历数组 时, 第一个得到下标, 第二个得到内容.......在遍历对象时..第一个得到属性名, 第二个 得到值. 5 CSS 5.1 css(用这个方法设置的 css 样式, 除非重名, 不会冲掉之前的样式.) 5.1.1 css(name), 获得元素集合中第一个元素的 css 样式名为 name 的值 5.1.2 css({key: value, ...}): 为元素集合设置样式, 样式为参数中指定的 Map 5.1.3 css(name, value): 为元素集合设置一个样式. 5.2 位置 5.2.1 offset(), 返回元素集合的第一个元素的 left 和 top 位置...返回值是一个对象, 可以 使用$(“p”).offset().left, $(“p”).offset().top 分别获得具体的值. 5.3 宽高 5.3.1 height(): 获取第一个匹配元素的高度值, 单位是 px 5.3.2 height(value): 为元素集合中所有元素设置高度是 value 5.3.3 width(), width(value): 用法同上 6 效果: 6.1 基本: 6.1.1 hide() 隐藏显示的元素, 如果该元素已经隐藏, 那么无改变 6.1.2 hide(speed, callbakc), 隐藏显示的元素, 如果该元素已经隐藏, 无改变, 隐藏是缓 慢的, 可以指定速度, 还有一个回调函数, 在隐藏过程完成之后, 调用该函数. 6.1.3 show() 显示隐藏的匹配元素 6.1.4 show(speed, callback) 以指定时间完成显示....显示完成后调用 callback 6.1.5 toggle() 切换显示或隐藏 6.1.6 toggle(speed, callback) 动画版的切换显示隐藏 6.2 滑动 6.2.1 slideDown(speed, callback): 通过高度变化动态显示所有匹配元素 6.2.2 slideUp(speec, callback): 通过高度变化动态隐藏所有匹配元素 6.2.3 slideToggle(speed, callback): 通过高度变化动态改变所有匹配元素的隐藏或显示
属性. 6.3 淡入淡出 6.3.1 fadeIn(speed, callback): 通过不透明度的变化实现所有匹配元素的淡入效果 6.3.2 fadeOut(speed, callback): 通过不透明度的变化实现所有匹配元素的淡出效果 6.3.3 fadeTo(speed, opacity, callback): 调整所有匹配元素的不透明度 6.4 自定义 6.4.1 animate(params, options) 自定义一个对象的属性终态的集合...和一个操作定义对 象.... 6.4.1.1 params...属性的终态样式集合...{key/value} 6.4.1.2 options: 动画的选项 6.4.1.2.1 duration: 动画时长: slow, normal(默认), fast, 数字表示毫秒数 6.4.1.2.2 easing: 要使用的擦除效果...linear, swing(默认), 需要插件支持 6.4.1.2.3 complete(function): 动画完成之后的回调函数 6.4.1.2.4 step(callback) 6.4.1.2.5 queue(boolean): 设定为 false 将使该动画不进入动画队列 6.4.2 animate(params[, duration[, easing[, callback]]]): 自定义动画 6.4.2.1 params: 属性的终态的样式集合 6.4.2.2 duration: 动画时长 6.4.2.3 easing: 要使用的擦除效果 6.4.2.4 callback: 动画完成时的回调函数 7 文档处理 7.1 内部插入 7.1.1 append(content), 向每个匹配的元素内部追加内容..... 7.1.2 appendTo(content), 向 content 后追加匹配的元素集合 7.1.3 prepend(content), 向每个匹配元素内部的前面追加内容 7.1.4 prependTo(content), 向 content 内部内容前面追加元素集合 8 Ajax 8.1 Ajax 请求 8.1.1 $jQuery.post(url, data, callback): 一个简单的 POST 请求功能以取代复杂的$.ajax. 请 求 成 功 时 调 用 回 调 函 数 , 但 是 , 没 有 出 错 处 理 能 力 ..... 返 回 的 是 XMLHttpRequest..........回调函数中得到的参数是服务端写回的数据. 8.1.2 $jQuery.get(url, data, callback): 同$.post, 只是数据发送方式不同. 8.1.3 load(url, data, callback): 载入远程 HTML 文件代码并插入到 DOM 中....默认使用 GET 方式, 有附加参数传递(data 不为空)时, 使用 POST 方式发送, JQUERY1.2 中 可以指定选择符...来筛选载入的 HTML 文档.....DOM 中仅将筛选出的 HTML 代码插 入. 例如: $(“#links”).load(“url #some > selector”, {key: value}, function(){}) 9 其他 9.1 $(“a”).click(function() {}); 9.2 $(function() {}); 是$(document).ready(function() {})的简写方式. 9.3 javascript 提供的 join(分割字符)可以把数组转换成用分割字符串分割元素形成的字符 串. 9.4 javascript 中事件 event 的方法 preventDefault()使得当前的事件立即终止, 如果该事件 可以终止的话.
分享到:
收藏