苦逼啊,在学校学主攻的是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) //倒数第二个
注意:
这些方法返回的是JQuery对象中的一个,这和常见的数组序号是不一样的,笔者就吃过这样的亏,如下面的例子:
<!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>
浏览器会报错,html()方法未定义,说明数组返回的不是JQuery对象
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");
大概就这么多了,如果有不完善的以后补充吧。