jQuery 的强大功能无需多言, 其中学习的内容自然也是较多, 查询 API 是必经之路的, 总结复习也是必不可少的, 此笔记多数案例也是来自 API 文档.
导入 js 文件
使用任意 js 框架, 导入相关 js 文件都是第一步. 鉴于 jQuery 2.x 版本对低端 IE 浏览器 (IE8 及以下) 的支持问题, 实际开发中, 为了全兼容一般使用 1.x 的版本. 我使用的是 jQuery1.8.3 .
下载地址: https://jquery.com/download/
js 文件一般都有普通版和压缩版, 两者功能完全一样, 压缩版只是去掉了多余的空格, 在实际开发中使用, 用以减小文件大小. 但对于阅读来说极度不友好, 所以学习阶段建议使用普通版.
- <head>
- <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
- </head>
jQuery 核心函数
ready(fn) 返回值 jQuery
此方法是事件模块中最重要的一个函数, 表示 DOM 载入就绪时执行其中的函数, 相当于原生 js 中的 window.onload.
- jQuery(document).ready(function(){
- // 文档就绪后要执行的操作
- });
在 js 文件中有如下声明:
- // Expose jQuery to the global object
- window.jQuery = window.$ = jQuery;
所以需要使用 jQuery 的地方, 可以用 "$" 代替. 当然, 上述代码一般都会使用其简写方式:
- $(function(){
- // 要执行的操作
- });
和原生 js 中的 onload 不同的是, 使用 jQuery 能多次绑定就绪事件, 例如:
- onload = function(){
- alert("a");
- };
- onload = function(){
- alert("b");
- };
以上代码只能执行最后一次绑定中的方法, 即弹出 "b"; 而使用 jquery 之后:
- $(function(){
- alert("a");
- });
- $(function(){
- alert("b");
- });
以上两个方法会按绑定的顺序全部执行, 即先弹出 "a", 在弹出 "b". 不过需要这种操作的情况可能并不多见.
注: 两者其实还有一个区别, 即执行时机的区别. window.onload 必须等待页面中所有内容加载完毕 (包括图片等) 才会执行绑定的函数, 而 ready(fn) 在网页中所有的 DOM 结构绘制完毕后就执行, 可能此时 DOM 元素关联的东西并没有加载完.
jQuery 对象与 dom 对象转换
要想使用 jQuery 中的方法, 只能用 jQuery 对象调用. 切记不能用 DOM 对象调用 jQuery 方法, 也不能用 jQuery 对象操作 DOM 对象属性.
DOM 转 jQuery: 将 dom 对象用 $()包裹即可, 例如:
var $jquery1 = $(document.getElementById("#d1"));
注: 习惯上, 对 jQuery 对象的命名以 "$" 开头, 这是为了容易区分两种对象, 并没有特殊的含义.
jQuery 转 DOM:
var dom 对象 = $jquery 对象. get(0); 或者 var dom 对象 = $jquery 对象[0];
- var div1 = $jquery1.get(0);
- // 或者
- var div1 = $jquery1[0];
jQuery(html,[ownerDocument]) 返回值 jQuery
将一个 dom 对象包装成 jQuery 对象, 第二个参数可选, 用来设置 dom 对象的属性
- $("<div>", {
- "class": "test",
- text: "Click me!",
- click: function(){
- $(this).toggleClass("test");
- }
- }).appendTo("body");
jQuery([selector,[context]]) 返回值 jQuery
这应该是 jQuery 中最常用的方法了, jQuery 的核心功能都是通过这个函数来完成的. 第一个参数通常是 CSS 选择器, 第二个参数可选, 表示查找的 dom 集.
jQuery 提供的选择器
jquery 提供的选择器大致分九种, 查询 API 是很好的学习途径, 这里仅作简单描述.
基本选择器:(没什么好说的)返回值 id 选择器是 Array<Element>; 其余是 Array<Element(s)>; 最常用的是 id 选择器.
#id 通过 id 匹配元素
element 通过元素名匹配
.class 通过给定的类匹配
* 匹配所有元素
selector1,selector2,selectorN 多个选择器组合使用, 用 "," 隔开
层级选择器
ancestor descendant 后代选择器: 在给定祖先元素元素下匹配所有后代元素(包括直接子元素和间接子元素)
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> child 子元素选择器: 在给定的父元素下匹配所有的子元素(只有直接子元素)
仍是上面的 html 代码, 使用:
$("form> input")
结果:
[ <input name="name" /> ]
prev + next 直接兄弟元素选择器: 匹配所有紧接在 prev 元素后的 next 元素(必须紧接在后面才可以)
html 代码: 同上
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
prev ~ siblings 兄弟元素选择器: 匹配所有和 prev 元素同辈的元素.
html 代码: 同上
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]
如上, 是 jQuery 提供的基本选择器和层级选择器, 然后是一些过滤选择器(也称过滤器), 是在基本选择器和层级选择器获取到一批元素后, 进行过滤操作. 过滤器通常以 ":" 开头, 属性过滤选择器除外.
由于过滤器较多, 这里就不一一总结, 还是那句话, 多查 API 是最好的方法. 以下是一些具体需求的实现, 主要是介绍一些方法.
jQuery 对象访问常用方法:
需求: 以下代码中 input 元素的个数 (size() 方法)
- <form>
- <label>Name:</label>
- <input name="name" />
- <fieldset>
- <label>Newsletter:</label>
- <input name="newsletter" />
- </fieldset>
- </form>
- <input name="none" />
jQuery 代码:
var size = $("input").size();
结果是: 3 size()方法: 当前匹配的元素个数.
需求: 上面代码中 name 属性为 "name" 的 input 元素是第几个 input(index()方法)
jQuery 代码:
var index = $("input[name='name']").index("input"));
结果是: 0 index([selector|element]); 方法: 搜索匹配的元素, 返回当前元素的索引值, 从 0 开始, 如果找不到, 返回 -1.
如果参数是一个选择器: 返回的是这个对象在选择器匹配集合中的索引位置. 比如上述代码返回的就是 name 属性为 "name" 的 input 在后一个选择器 (所有 input) 中的索引位置.
jquery 代码:
var index = $("form *").index($("input"));
结果是: 1 如果参数是一个或一组 jQuery 对象, 返回的是这个对象或这组对象中的第一个元素在原集合中的索引位置. 比如上述代码返回的是所有 input 元素集合中第一个元素在前一个选择器匹配的元素集合 (form 中的所有元素) 中的索引位置.
jQuery 代码:
var index = $("input").index(document.getElementsByName("none")[0]);
结果是: 2 参数同样可以是一个 dom 对象. 返回值和传入一个 jQuery 对象一样. 比如上述代码, 返回 name 属性为 "none" 的第一个元素在所有 input 元素集合中的索引位置.
jQuery 代码:
var index = $("input[name='name']").index();
结果是: 1 如果不传值, 返回这个对象相对于同辈元素的位置.. 比如上述代码 name 属性为 "name" 的 input 元素在同辈元素中的索引位置.
需求: 获取所有 input 元素的 name 属性(each(callback))
HTML 代码:
- <form>
- <label>Name:</label>
- <input name="name" />
- <fieldset>
- <label>Newsletter:</label>
- <input name="newsletter" />
- </fieldset>
- </form>
- <input name="none" />
jQuery 代码:
- $("input").each(function(){
- alert(this.name);
- });
each(callback) 函数, 用于遍历匹配元素集合, 以每一个匹配元素作为上下文来执行一个函数. 函数中可以使用 this 关键字指代当前 dom 元素. 如果需要使用 jQuery 对象, 可以使用 $(this) 调用相应方法.
需求: 获取第二个 input 元素的 name 属性(get(index))
HTML 代码:
- <form>
- <label>Name:</label>
- <input name="name" />
- <fieldset>
- <label>Newsletter:</label>
- <input name="newsletter" />
- </fieldset>
- </form>
- <input name="none" />
jQuery 代码:
var name = $("input").get(1).name;
这个方法之前也用过, 就是 jQuery 对象转 dom 对象时, jQuery 对象. get(0). 与 jQuery 对象 [0] 等价.
属性方法:
属性
- attr(name|pro|key,val|fn)
- removeAttr(name)
- prop(n|p|k,v|f)
- removeProp(name)
CSS 类
- addClass(class|fn)
- removeClass([class|fn])
- toggleClass(class|fn[,sw])
HTML 代码 / 文本 / 值
- html([val|fn])
- text([val|fn])
- val([val|fn|arr])
对于此类方法, 一般记住一点即可: 如果属性值是可选参数, 通常传属性值代表设置属性, 不传代表获取属性.
CSS 方法:
- CSS
- css(name|pro|[,val|fn])
位置
- offset([coordinates])
- position()
- scrollTop([val])
- scrollLeft([val])
尺寸
- heigh([val|fn])
- width([val|fn])
- innerHeight()
- innerWidth()
- outerHeight([soptions])
- outerWidth([options])
和属性方法使用基本类似.
说了一堆废话, 还有文档处理, 事件, ajax 等使用注意, 有空再总结. 作为第一篇博客, 特此纪念.
2018-06-29 00:24:34
jQuery 学习笔记(一)
来源: http://www.bubuko.com/infodetail-2663514.html