JQuery是JS的一个类库,是大型开发必备人工具之一。在前端开发过程中,我们可以通过它简化JS的复杂操作、可以不用需要关心兼容性、同时它提供了大量实用的方法。但是需要记住的是,JQ中的思想还是基于原生JS的,它只是一个辅助工具,需要我们正确对待。在我看来,JQ其实可以分为两大内容,一个是选择器,一个是其封装好的方法。下面内容就是简要介绍一下,在实际开发项目中可能会用到的选择器和方法。
一、选择器
选择器其实和CSS3的差不多。主要有:
1、 基本选择器
主要有通过id名查询的id选择器(如:$("#myELement"))、类选择器(如:$(".myClass"))、标签选择器(如:$("div") )以及通用选择器(如:$("*") 选择文档中的所有的元素)。
2、 层次选择器
常见有后代选择器($("form input") 选择所有的form元素中的input元素)、子选择器($("#main > *") 选择id值为main的所有的子元素)、相邻兄弟选择器($("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素)、同胞选择器(如:返回id为prev的标签元素的所有的属于同一个父元素的div标签)
3、 过滤选择器:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、 子元素过滤选择器 、表单对象属性过滤选择器
3—1、简单过滤选择器
可能会用到的有(以tr、div等标签为例):
$("tr:first") 选择所有tr元素的第一个
$("tr:last") 选择所有tr元素的最后一个
$("input:not(:checked) + span") 过滤掉:checked的选择器的所有的input元素
$("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:lt(4)") 选择td元素中序号小于4的所有的td元素
$(":header") 选择h1、h2、h3之类的
$("div:animated") 选择正在执行动画效果的元素
3—2 内容过滤选择器
$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
3—3 可视化过滤选择器
$(" $("div:hidden") 选择所有的被hidden的div元素
$(" $("div:visible") 选择所有的可视化的div元素
r re 3—4 属性过滤选择器
$("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
3—1 子元素过滤选择器
查找ul中第2个li $("ul li:nth-child(2)")
查找ul中处于奇数位的li(下标从1开始) $("ul li:nth-child(odd)")
查找ul中1、4、7、10.....位置的li $("ul li:nth-child(3n + 1)")
$("div span:first-child") 返回所有的div元素的第一个子节点的数组
$("div span:last-child") 返回所有的div元素的最后一个节点的数组
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组
4、表单选择器
$(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(": $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
4—1 表单元素过滤选择器
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
二、JQ中的常用方法
1、用于页面元素操作的方法(即:创建节点、插入节点、复制节点、替换节点、包裹节点、遍历节点操作)
1-1 新建DOM节点($li1=$("<li></li>"))
1-2 增--添加DOM节点 (如:append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。)
1-3 删除DOM节点操作(remove():法删除所有匹配的元素、empty():清空节点,它能清空元素中的所有子节点)
1-4 修改DOM节点操作(clone():复制匹配的节点、$(element).repalcewith():用某节点替换匹配的节点、$(element).repalceAll():替换所有节点、$(element).wrap()、$(element).wrapAll()、$(element).wrapInner():包裹节点)
2 元素属性操作、获取和设置元素、元素样式操作
2-1 属性操作attr()和removeAttr()
attr()方法能够获取元素属性,也能能够设置元素属性。方法如下,当attr(para1)方法有个参数时候用于获得当前元素的para1的属性值,当attr(para1,attrValue)有两个参数时候设置当前元素的属性名为para1的属性值为attrValue
2-2 样式操作addClass()、removeClass()、toggleClass()和hasClass()
添加样式addClass()方法、移除样式removeClass()方法、切换样式toggleClass()方法,使用该方法切换目标元素的样式、alert($("p").hasClass("ul"));打印出p元素是否有ul样式。
2-3 设置和获取HTML【html()】,文本【text()】和值【val()】
html()方法获得或设置某个元素的html元素。该方法可以用于XHTML文档,不能用于XML文档。
text()方法获得或设置某个元素的文本值。该方法对html和XML文档都适用。
2-4 遍历节点操作children()、next()、prev()、siblings()和closest()
children()方法用于取得匹配元素的子元素集合,只匹配子元素不考虑任何后代元素
$("p").next().html();该示例获得p元素的下一个兄弟节点的html内容。
prev()方法用于匹配元素的上一个兄弟节点,方法如下:$(selector).prev();
$("p").slibings();示例获得p元素的所有兄弟节点元素
closest()方法()用来取得最近的匹配元素,首先检查当前元素是否匹配如果匹配则直接返回,否则继续向上查找父元素中符合条件的元素返回,如果没有匹配的元素则返回空JQuery对象。
2-5 CSS-Dom操作css()、offset()、position()、scrollTop()和scrollLeft()
css()方法用于获取、设置元素的一个或多个属性。方法如下:$(selector).css();
offset()方法用于获取元素相对当前窗体的偏移量,其返回对象包括两个属性:top和left。
position()方法用于获取元素于最近的个position样式属性设置为relative或者absolute的祖先节点的相对偏移量。方法如下:$(selector).position();
scrollTop()和scrollLeft()方法用于获取元素的滚动条距顶端的距离和距左侧的距离。
3 width() innerWidth() outerWidth()获取元素的宽度
以下字母分别代表w:width、p:padding、b:border、m:margin
width()--->w
innerWidth()---->w、p
outerWidth()------>w、p、b
outerWidth(true)------>w、p、b、m
4 on() 和 off()
分别对元素进行消息的绑定和解绑。
6 用于控制动画的函数
第一组:show(),hide()。宽高透明度一起变
第二组:fadeIn(),fadeOut(),fadeTo()。用于控制透明度
第三组:sladeUp(),slideDown()。用于控制高度
最后为animate();是以上三组函数的结合。
当然JQ中的方法不止以上所提到的这些,但是这些都是比较常用的方法。总之,JQ的学习主要是方法的查询和使用。