今天分享一点JQ的笔记。
1、 选择器 如： $(":first"); [(":过滤条件")] <==> $("*:first");
1> $("#id");
2> $(".class");
3> $("标签名");
4> $("*");
5> $("div,span,p, .class,#div"); --将每一个选择器匹配到的元素合并后一起返回。
6> $("#div span"); -- 匹配后代的第一个元素
7> $("parent > child"); -- 匹配子代的第一个元素
8> $("prev + next"); -- 匹配后面紧跟着的第一个元素
9> $("#div ~ span"); -- 匹配后面所有元素
通过一些特殊条件过滤元素
10> $("span:first"); -- 获得匹配的第一个元素
11> $("span:last"); -- 匹配最后的一个元素
12> $("span:not");
13> $("input:not(:checked)"); --匹配没有选中的input
14> $("span:even"); -- 匹配所有索引值为偶数的元素，从0 [0为偶数] 开始
15> $("span:odd"); -- 匹配所有索引值为奇数的元素，从0开始[即1，3，5]
16> $("span:eq(index)"); -- 根据索引值来匹配元素，索引从0开始找
17> $("span:gt(index)"); -- 匹配大于索引值的元素
18> $("span:lt(index)"); -- 匹配小于索引值的元素
19> $("span:lang(language)"); -- (1.9+)匹配带有指定语言[以属性的形式出现在标签中]的所有元素[会匹配lang="en" 和 lang="en-us"]
20> $(":header"); -- 匹配h1-h6的标签
21> $(":animated"); -- 匹配所有正在执行动画效果的元素
22> $(":focus"); -- (1.6+)匹配当前获得焦点的元素
23> $(":root"); -- (1.9+)选择该文档的根元素
24> $(":target"); -- (1.9+)***不懂****
25> $(":contains(text)"); -- 匹配包含给定文本的元素
26> $(":parent"); -- 匹配所有包含子元素或者文本的元素
27> $(":empty"); -- 匹配所有不包含子元素或者文本的空元素
28> $(":has(标签)"); -- 匹配含有选择器所匹配的元素的元素
29> $(":hidden"); -- 匹配所有不可见元素，或者type为hidden的元素
30> $(":visible"); -- 匹配所有的可见元素
通过属性过滤元素
31> $("span[attribute]"); -- 匹配包含[在标签中使用了此属性]此属性的元素
32> $("span[attribute = 'value']"); -- 匹配包含属性是指定的值的元素
33> $("span[attribute != 'value']"); -- 匹配不包含属性是指定的值的元素
34> $("span[attribute ^= 'value']"); -- 匹配属性的值以value开头的元素
35> $("span[attribute $= 'value']"); -- 匹配属性的值以value结尾的元素
36> $("span[attribute *= 'value']"); -- 匹配属性的值包含value的元素
37> $("span[attr1 = 'val1'] [attr2 = 'val2'] [attr3 = 'val3']"); --匹配满足多个筛选条件的元素(复合属性选择器)
38> $(":first-child"); -- 匹配给定选择器的第一个子元素
39> $(":last-child"); -- 匹配给定选择器的最后一个子元素
40> $("span:first-of-type"); -- (1.9+)匹配给定的选择器[span]的父级中的第一个选择器[span]类型的元素[选择器好像必须是标签形式]
41> $("span:last-of-type"); -- 最后一个元素[其他同上]
42> $("ul li:nth-child(n)"); -- (正序)匹配ul下的li的第n[n从1开始，index从0开始]个子元素
43> $("ul li:nth-last-child(n)"); -- (倒序)其他同上
44> $("span:nth-of-type(n)"); --选择同属于一个父元素之下，并且标签名相同的子元素中的第n个
45> $("ul li:only-child"); -- 如果此元素在父元素下是唯一一个元素，此元素就会被匹配
46> $("span:only-of-type"); --选择所有没有兄弟元素，且具有相同的元素名称的元素。如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配
匹配表单元素
47> $(":input"); -- 匹配所有input标签
48> $(":text"); -- 匹配所有文本框(不包括文本域)
49> $(":password"); -- 匹配所有密码框
50> $(":radio"); -- 匹配所有单选按钮
51> $(":checkbox"); -- 匹配所有复选框
52> $(":submit"); -- 匹配所有提交按钮(很多浏览器，button元素默认的type即为submit)
53> $(":image"); -- 匹配所有的图像域(input中属性为image)
54> $(":reset"); -- 匹配重置按钮
55> $(":button"); -- 匹配所有按钮
56> $(":file"); -- 匹配所有文件域
57> $(":enabled"); -- 匹配所有可用元素(好像针对input元素，未被禁用的)
58> $(":disabled"); -- 匹配所有不可用的元素(文本框不可输入)
59> $(":checked"); -- 匹配所有选中的元素(radio、checkbox、select都行)
60> $(":selected"); -- 匹配所有选中的option元素
61> $.escapeSelector("selector"); --这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，
这个方法基本上与CSS中CSS.escape()方法类似，
唯一的区别是jquery中的这个方法支持所有浏览器。
2、Ajax
3、属性
1> $("span").attr(name | name, value | key, f(index,value));
-- 获得属性值[name] | 修改属性值或设置属性及属性值 | 找到属性名，执行函数，函数参数(索引,原先属性值)
2> $("span").removeAttr(name);
-- 删除所匹配对象的指定属性
3> $("span").prop();
-- 不懂
4> $("span").removeProp();
-- 不懂
5> $("span").addClass(class .. | f(index, class));
-- 参数为多个class时，给对象添加class，参数为f时，执行函数，参数为：对象索引，对象类名
6> $("span").removeClass(class | f(index, class));
7> $("span").toggleClass(class | class, switch | f());
8> $("span").html(val | f(index, html));
-- 无参，用于获取，有参，用于修改或设置
9> $("span").text(val | f(index, text));
-- 不能解析html标签，其他同上
4、CSS
1> $("span").css(name, value);
3> $("span").offset({top, left} | f(index, oldValue));
-- 无参，用于获取相对于浏览器视口的相对位置 | 有参，用于设置 | 回调函数
4> $("span").position();
-- 获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。
5> $("span").scrollTop(val);
-- 无参用于获取，有参用于设置
6> $("span").scrollLeft(val);
7> $("span").height(val);
8> $("span").width(val);
9> $("span").innerWidth();
-- 匹配元素内部区域宽度（包括补白、不包括边框）可见和隐藏元素均有效
10> $("span").innerHeight();
11> $("span").outerWidth([boolean]);
-- 匹配元素内部区域宽度（默认包括补白、包括边框，boolean默认为false，为true时，计算边距在内）可见和隐藏元素均有效
12> $("span").outerHeight([boolean]);
每天都会学一点，为未来打一下基础。