苦逼啊，在学校学主攻的是java，应聘的也是Android，但是现在被分配到了web前端，又得从新学习了，包括实习，来公司已经快大半年了，以前没有写过博客，看着别人那些博客大神好牛逼的样子，我也来分享一下自己的学习的经验，以前我从没做过前端，刚来的时候看到代码，这是神马鬼？后来花了两个礼拜硬学了css、css3，javasript和jquery和html5就开始解bug,然而功夫不负有心人，现在已经能够独立完成整个项目了，嗯哼！当了这么多年的菜鸟，是时候站出来了。
还是先介绍一下jquery吧，毕竟比起js来说，他的api算是简单的了，即使不会js，只要学会jquery，也基本能够写一些前端的代码了。要想驱动事件，首先得得到事件源，所以还是先介绍一下怎样过滤元素吧。
1、Jquery 选择器
jquery 是目前比较流行的js插件，支持css3标准中的大部分内容，同时还定义了一些很有用的伪类。在解释简单的选择器之前我们先了解一下简单选择器的语法。
（1）简单选择器
- #id 匹配属性为id的元素
- .class 匹配class属性的元素
- [attr] 匹配拥有attr属性的元素
- [attr=val] 匹配属性attr的值为val的元素
- [attr!=val] 匹配没有attr属性或者attr属性的值不等于val的所有元素
- [attr^=val] 匹配attr属性值以val开头的元素
- [attr$=val] 匹配attr属性值以val结尾的元素
- [attr*=val] 匹配attr属性值含有val的元素
- [attr~=val] 匹配attr属性值由空格分隔的多个词组成，且有一个词为val的元素
- [attr|=val] 匹配attr属性值以val开头且没有其他字符，或其他字符是以连字符开头的元素
- :animated 匹配正在动画中的元素，该动画必须是用jquery产生的
- :button 匹配<button>或<input type="button"> 的元素
- :checkbox 匹配<input type="checkbox">，使用时强烈建议使用标签前缀，如input:checkbox，该过滤器效率更高
- :checked 匹配选中的input元素，常用用radio或checkbox
- :contains(text) 匹配含有文本text的元素，因为有圆括号确定了文本范围，无需添加引号，该文本由textContent或innerText确定的，不带标签和注释
- :disabled 匹配禁用的元素
- :empty 匹配没有子节点，没有文本内容的元素
- :enabled 匹配没有禁用的元素
- :eq(n) 匹配基于文档顺序，序号从0开始的列表中的第n个元素
- :even 匹配列表中偶数序号的元素,因为下标以0开始，所以实际上是第1个，第3个等等
- :file 匹配<input type="file">元素
- :first 匹配列表中的第一个元素。和“:eq(0)”相同
- :first-child 匹配的元素是其父节点的第一个子元素
- :gt(n) 匹配基于文档顺序，从0开始的选中列表中序号大于n的元素
- :has(sel) 匹配的元素拥有子孙元素，且子孙元素符合选择器sel，这有点难懂，如<div><p>hello world</p></div>可以用 $("div:has(p)")
- :header 匹配所有头元素<h1>-<h6>
- :hidden 匹配所有在屏幕上不可见的元素，offsetWidth和offestHeight为0
- :image 匹配<input type="image">的元素，注意不会匹配<img>
- :input 匹配用户输入元素<input>、<textarea>、<select>和<button>
- :last 匹配选中列表中的最后一个元素
- :last-child 匹配父元素的最后一个子元素
- :lt(n) 匹配基于文档顺序、序号从0开始的选中列表中序号小于n的元素
- :not(sel) 匹配的元素不包含符合选择器sel的子孙元素
- :nth(n) 与“:eq(n)”相同
- :nth-child(n) 匹配父节点的第n个子元素，序号从1开始，n可以是数值也可以是单词“even”、“odd”或计算公式，如3n+1
- :odd 匹配列表中的奇数序号的元素，从0开始
- :only-child 匹配那些事父节点唯一子元素的节点元素
- :parent 匹配是父节点的元素，和“:empty”相反
- :password 匹配<input type="password">
- :radio 匹配<input type="radio">
- :reset 匹配<input type="reset">或<button type="reset">
- :selected 匹配选中的<option>元素，使用”:checked“来选取选中的复选框和单选框
- :submit 匹配<input type="text".>元素
- :visible 匹配所有可见的元素，和":hidden"相反，笔者常用.is(":visible")来判断某个模块是否可见，然后终止循环取数据，但是好像在IE8上没用，这时只有结合css的display来判断
（2）组合选择器
Jquery的组合选择器和css3是一样的，组合选择器从左至右处理
- A B 从选择器A的子孙元素中选取选择器B
- A > B 从选择器A的子元素中，选取匹配元素B的文档元素
- A + B 从匹配选择器A的元素中选择下一个紧邻的兄弟元素，且匹配选择器B，
- A ~ B 从匹配选择器A的元素后面的兄弟元素中，选取匹配选择器B的文档元素
（3）选择器组
听起来牛逼，其实就是用”，“分隔的选择器或组合选择器，如$("#page1,#page2,#page3")、$("div,p,section")
2、选取方法
除了$()函数支持的选择器语法，jquery还定义了一些选取方法
- first()、last()、eq()
var element = $("div");
element.first();
element.last();
element.eq(1);
element.eq(-2) //倒数第二个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$('div')[1].html("hello world!");
</script>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
2.slice()
JQuery的slice()方法和Array.slice()方法类似，接受开始序号和结束序号（负号从结尾处计算，不包括结束序号）
$("div").slice(1,4);
$("div").slice(-3) //选取最后3个元素
filter()函数主要过滤元素，可以传递选择器、另一个JQuery对象以及判断函数给filter()。
- 传递选择器给filter()，它会返回仅包含匹配元素的JQuery对象
- 传递另一个JQuery对象给它，它会返回一个新的JQuery对象，该对象包含这个两个对象的交集，也可以传递元素数组甚至单一元素给filter().
- 传递判断函数给filter(),会为每一个匹配元素调用该函数，返回一个仅包含判断函数为true的元素，函数的参数是元素序号
$("div").filter(".content");
$("div").filter($(".content1"));
$("div").filter(function(index){ return index%3 == 0});
在JQuery1.4中，提取元素的另一种方式是has()，指包含某些选择器节点的父元素
add()方法会扩充选区，而不是进行过滤或提取
$("p").has("a[href='jew.php']");
$("div").add(p);
$("div").add($("p"));
var paras = document.getElementsByTagName("p");
$("div").add(paras);//传入类数组对象
说白了filter()、add()、not()分别在各自的元素上执行交集、并集和差集
4.find()、children()、contents()
- 最通用的方法find()，该方法在当前元素的子孙元素中寻找匹配选择器的元素，返回一个新的JQuery对象来代表所匹配的子孙元素集，注意这些元素不会并入已存在的选中元素集中，和filter()不同，filter()不会选中新元素，只是会缩减元素。
- children()返回每一个选中元素的直接子元素
- contents()返回每一个元素的所有子节点，包括文本节点，如果包含<ifame>元素，还会返回<iframe>的文档对象，注意contents()不可接受选择器字符串参数，因为它返回的节点不完全是元素，而选择器仅仅用来描述元素节点。
- next()和prev()返回下一个和上一个兄弟元素
- nextAll()和prevAll()返回每一个选中元素的后面和前面的所有兄弟元素
- siblings()返回选中元素的所有兄弟元素
- 从JQuery1.4开始，nextUtil()、prevUtils()会寻找后面或前面的所有兄弟元素，直到找到某个匹配的兄弟元素为止。
- parent()方法返回每一个匹配元素的父节点，parents()返回所有祖先节点。
- parentsUtils()返回每一个选中元素的祖先元素，直到遇到指定选择器的祖先元素。
- closest()也是比较常用的返回祖先元素的方法，不过是返回最近的匹配选择器的祖先节点。
在JQuery的链式调用中，后面返回的元素集已经不是开始调用时的元素集了，如果想为之前的元素集设置状态，可以调用end()方法弹出栈，调用一次end()只会弹出一次栈，因此，多个链式调用可能返回时要调用多个end();
$("div").find("p").addClass("hightlight").end().css("widthd","300px");//end()返回到div集var sel = $("div");
sel.pushStack(document.getElementsByTagName("p"));
sel.end();andSelf()返回一个新的对象，包含当前所选中元素，加上之前的所有选中元素（会去除重复的）
$("div").find("p").andSelf().
addClass("hightlight").
end().end().
css("width","200px");大概就这么多了，如果有不完善的以后补充吧。
扫一扫
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
