jQuery

jQuery

曾经听说一个充满负能量的定律:这个世界的进步是懒惰造成的.其实这种说法太悲观了,像一个厌世者对这个世界进行了一个潦草的定义.乐观一点的说法就是:世界的进步是对效率的无限追求造成的.

作为一个程序猿,你的客户随时有可能要求你给他设计一款既功能强大但是又简便操作的功具,所以造就了程序猿强大的逻辑思维能力,以及对事物的认知能力.

jQuery就是这样一个JS库,功能强大,所以现在想要成为一个合格的前端工程师就必须要学习这一门技能,它能大大节约你的开发时间.

jQuery学起来并不难,但是笔者很悲催,因为我学了一点DOM,导致我在写程序的时候总是会将DOM操作和jQuery弄混,所以在此写一篇个人总结,希望为后来人清除一点学习道路上的阻碍.

JS中很多零散的方法在jQuery中都再次进行的重新定义,不必写的那么多了.但是jQuery有一个前提条件请牢牢记住:jQuery选择器自带forEach;

DOM操作和jQuery操作一定要区分开:

DOM对象:每个HTML标签在浏览器中都对应一个DOM对象

jQuery对象:$()函数的返回值是一个jQuery对象-----类数组对象,封装所有选定的DOM对象.

1)如何将DOM对象封装为jQuery对象:

$(DOMobj)

2)如何将jQuery对象转化为DOM对象:

$(“div”)[0]

基本语法:$(...).API()

一眼看到,这选择器一定要复习一下:

1)基本选择器:

#id、.class、element、*

2)层级选择器:

parent child  后代选择器

parent > child 自带选择器

parent + nextOne 下一个兄弟选择器

parent ~ nextAll 后续所有兄弟选择器

3)过滤选择器----基本过滤

:first

:last

:odd  奇数个

:even 偶数个

:eq(i) 第i个

:lt(i)  小于i个

:gt(i)  大于i个

4)过滤选择器----内容过滤

:contains(内容)包含指定内容

:empty        不包含任何内容

:has(s)        有符合特定选择器的

:parent        有内容的

5)过滤选择器-----属性过滤

[name]          具有指定属性

[name=value]     具有指定属性和值

[name!=value]    具有指定属性,不能有指定值

[name^=value]    具有指定属性,以指定值开头

[name$=value]    具有指定属性,以指定值结尾

[name*=value]    具有指定属性,值包含指定内容

6)过滤选择器------可见性过滤

:hidden   ------------->   display:none  +  type=’hidden’

:visible

7)子元素选择器

:first-child     第一个子元素

:last-child     最后一个子元素

:nth-child(n)    第n个子元素   (n是从1开始数的)

:only-child     唯一子元素

8)表单元素选择器

:text        

:password

:radio

:checkbox

:submit

:reset

:button

:file

:hidden

:image

:input

9)表单元素状态选择器

:enabled      选中所有启用的元素

:disabled      选中表单中带disabled属性的元素

:checked      选中已经选中的 input

:selected      选中已经有selected的option

 

常用选择器也就这些了,接下来就是常用jQuery操作了

1)操作元素的属性:

a) jq.attr(name,value)    ----->e.setAttribute(name,value);

b) jq.attr(name)         ------>e.getAttribute(name);

c) jq.removeAttr(name)   ------>e.getAttribute(name);

2)操作元素的值

a) jq.val(“xx”);           ------->input.value=’xx’;

b) jq.val();              -------->var v=input.value;

3)操作元素的内容

a) jq.html(‘xx’);          -------->e.innerHTML=’xx’;

b) var h=jq.html();        -------->var h =e.innerHTML;

c) jq.text(“xx”);          -------->e.innerText/textContent=’xx’

d) var t=jq.text();         -------->var t=e.innerText/textContent;

4)遍历元素

a) jq.parent()            --------->e.parentNode

b) jq.children([i])         ---------->直接找子元素

c) jq.find(i)              ---------->找所有的后代元素(直接+间接)

d) jq.next()              ---------->下个兄弟元素

e) jq.nextAll()            ---------->后面所有的兄弟

f) jq.prev()              ---------->上一个兄弟

g) jq.prevAll()            ---------->上面所有的兄弟

h) jq.siblings()            ---------->所有兄弟元素

5)操作元素的样式

a) jq.css(name)           ---------->获取样式的值

b) jq.css(name,value)      ---------->设置样式的值

c) jq.css({name:value,name:value})

d) jq.addClass(className)  ---------->为选定元素添加一个class

e) jq.removeClass(className)-------->为选定元素删除一个class

f) jq.has(className)       --------->判断选定元素是否有指定class

g) jq.toggleClass(className) ---------->切换class

6)添加元素

a) jq.append(child);      ----->追加到最后

b) jq.prepend(child);     ------>追加到最开始

c) $(content).appendTo(selector); ----将content插入到selector里面---->破坏性操作(.end()后面操作的是最后一次破坏性操作的元素的上一元素)

d) $(content).prependTo(selector); ----将content插入到selector里面

e) after() insertAfter()    与上面雷同,上面是在选择器内部插入,这个是选择器后面插入

f) before() insertBefore()

 

7)删除元素

a) jq.remove();删除除了本身以外的所有,连同绑定函数等

b) jq.empty();所有子节点清空

8)替换元素

a) newChild.replaceAll(oldChild)

b) oldChild.replaceWith(newChild)

9)事件处理

a) bind/unbind  绑定/解绑事件

b) one 一次性触发事件

c) click... bind()的简化

d) delegate 子元素委托父元素代为处理事件

e) live 已废除

f) on 可以实现bind/delegate所有功能

$.each和each区别

$.each()是全局函数 可以遍历任意集合

each()是jQuery对象函数  只能遍历当前jQuery封装的对象