ZUI易入门前端 四、jQuery

由于直接使用dom进行编程很麻烦，API复杂，而且还要考虑浏览器兼容性更各种问题，所以现在诞生了很多框架，老的比如extjs、jquery等，新的有Vue、Angular、React等。Dom需要学，但是还要学习一些的，一来明白底层原理，而来偶尔还会直接操作Dom。

jQuery是风靡了很多年的框架，最近几年有比它更牛逼框架的出现，所以慢慢开始下滑，但是还是要了解一些，因为有一些公司或者老项目还在用jQuery，还要了解一些。本章内容将会做jQuery常用内容的讲解。

jQuery下载地址 http://jquery.com/一定要把jquery.js的引用代码放到用到jquery代码之前。否则会报错："Uncaught ReferenceError: $ is not defined"

（一）体验一下jQuery的方便

使用DOM给所有div添加一个input

      

             

             

             

             

      

      

             

             

             

      

使用jQuery给所有div添加一个input

      

             

             

             

             

             

      

      

             

             

             

      

（二）$对象

$不是什么特殊关键字，因为JavaScript中的标识符是可以包含$的，$是jquery定义的一个函数。这个函数根据传入的数据类型不同，有三个主要用途：

1. 传入function，代表在页面加载完毕后执行function，类似于dom中的window.onload（有细微差别，不用研究）。所以一般把代码写到$(function(){});中
2. 传入选择器，用于根据选择器获取对象，类似于dom中的querySelectorAll()，但是返回的是jquery对象。选择器语法和CSS的语法基本通用，除了新增了一个特殊的“伪类选择器”。还可以$( selector , parent )，在parent这个节点下使用selector选择器。
3. 传入dom对象，用于把dom对象转换为jQuery对象

 

jQuery对象是一个类似于数组的对象，它有链式编程、隐式迭代等特性。

（三）隐式迭代

$("div").append("")中的$("div")代表根据标签选择器div获取所有div，因为返回的是jquery对象，代表的是满足条件的多个元素，append就是在每个元素上都调用append方法，把""添加为子节点。这种行为就叫做“隐式迭代”，省的写for循环的麻烦。

jquery提供了很多类似append这样的函数，这些方法大部分都是支持隐式迭代的。

（四）常用函数

这些方法有一部分会根据参数参数的个数、类型不同而有不同的行为，比如val()就是获取input的value，注意不要丢了()写成val，而val("hello")就是把所有input的value设置为"hello"，css("color")是获取color样式的值，css("color","red")则是设置color样式的值为red。对于这些返回值有特殊含义的函数，一般就会返回第一个元素的值，而不是返回每个元素的值。

函数列表：

1. prop(attrName)  获取第一个元素的该属性的值；prop(attrName,value)   设置所有元素的该属性的值。还有一个淘汰的类似效果的attr函数。
2. val()获取第一个元素的value属性的值；val(string)设置所有元素的value属性的值
3. html()   获取第一个元素的innerHtml（包括子元素和文本内容）；html(string)       设置所有元素的HTML内容，也就是innerHTML；
4. empty()把一个元素的所有子元素都删除，和html("")的效果一样。
5. text()   获取第一个元素的innerText（包括子元素和文本内容）；text(string)       设置所有元素的文本内容，也就是innerText；
6. append(content)     插入子节点
7. remove()    删除元素自己
8. parent()      获得元素的父元素
9. siblings()     获得兄弟元素
10. css(propName) 获取第一个元素的该样式属性的值；css(propName, value) 设置所有元素的该样式属性的值。
11. addClass(class) 给元素添加类样式
12. removeClass(class) 给元素删除类样式
13. toggleClass(class)  切换类样式（如果存在就删除，如果不存在就添加）
14. hide()隐藏，show()显示，toggle()切换（当前是隐藏就显示，当前是显示就隐藏）
15. each(function)遍历每个元素，回调函数里的this就是当前遍历的dom对象

 

       例子：

      

             

             

                     

             

             

      

      

             

aaaa

             

bbb

             

hello

rupeng.com

             

                    

                    

             

             

                     足球

                     篮球

             

             

                     北京

                     上海

                     广州

             

                         

      

 

（五）jQuery事件处理

jQuery提供了一系列如click()、focus()、mouseover()等函数，给元素注册对应的事件处理函数。这些函数的名字基本上和dom中的事件的名字一样。

如$("div").click( function(){  alter('xx') });  这句代码给所有div元素的点击事件注册了处理函数

特别的，jQuery提供了ready()函数来代替window的load加载事件，ready()可以在文档的DOM结构加载完成后就触发，而不必等到页面的图片等资源也加载完成。

特别的，这些函数都可以多次注册回调。

      

             

             

                     

             

             

      

      

             

aaa

             

bbb

             

ccc

                           

      

用click()这种方式注册的监听对于新元素是不起作用，如果想监听新增加的元素，那么要用on函数：on(事件类型,选择器,function)，例子

      

             

             

                     

             

             

      

      

             

aaa

             

bbb

             

ccc

              添加Div"/>

      

 

（六）Dom对象与JQuery对象

因为jQuery的隐式迭代特性，使用jQuery注册的事件处理函数中的this实际上是DOM对象，因此this可以调用DOM  API，也可以使用$(this)把Dom对象转换为jQuery对象计行操作。

      

             

             

                     

             

             

      

      

             

aaaa

             

bbb

             

hello

             

                    

                    

             

             

                     足球

                     篮球

             

             

                     北京

                     上海

                     广州

             

                           

      

 

（七）链式编程

jQuery如果函数返回是jquery是可以实现“链式编程”效果的，这样可以简化代码。

如果函数的返回值不再是返回jquery对象，那么就“断链”了。比如val()是获取input的值，返回值是字符串，就不能再继续链式编程下去了。

      

             

             

                     

             

             

      

      

             

aaa

             

bbb

             

ccc

             

             

      

（八）练习案例

1.登陆检查

 

      

             

             

             

                           

      

      

              用户名：

              密码：

              登录"id="btnLogin"/>

      

2.注册按钮倒计时

 

      

             

             

             

             

      

      

              同意以上协议(5)"disabled/>

      

3.动态加载表格

 

      

             

             

             

             

      

      

             

                    

                           

                    

                    

                           

                    

             

id	姓名	年龄

      

4.全选、全不选、反选

 

      

             

             

             

             

      

      

             

                    

• 百度

                    

• 百度

                    

• 腾讯

                    

• 阿里

                    

• 头条

             

              全选"/>

              全不选"/>

              反选"/>

      

5.切换区域的显示

 

      

             

             

             

             

             

      

      

             

VIP会员

             

                    

卡号：

                    

密码：