jQuery复习
1 jQuery简介
l 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript库封装了不少预约义的对象和实用函数。能帮助使用者创建有高难度交互的页面, 而且兼容各大浏览器javascript
l 当前流行的 JavaScript 库有css
l jQuery是继prototype以后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE。优点以下:html
l 轻量级(压缩后只有几十k)java
l 强大的选择器jquery
l 出色的 DOM 操做的封装数组
l 可靠的事件处理机制浏览器
l 完善的 Ajaxapp
l 出色的浏览器兼容性框架
l 链式操做方式dom
l 文档说明很全.
l 可扩展插件
2. jQuery快速入门
2.1. 将jQuery的库文件加入应用
l 在开发测试时, 用的是未压缩的版本: jquery-1.7.2.js
l 在上线项目中, 会使用压缩后的版本: jquery-1.7.2.min.js
2.2. 在页面中导入并使用
| <!-- 导入jQuery库--> <script type="text/javascript" src="script/jquery-1.7.2.js"/> <script type="text/javascript"> //调用jQuery库定义的函数 $(function(){ $("button").click(function(){ alert("----"); }); }); </script> |
3. Jquery语法详解
3.1. jQuery源码初分析
| (function(window) { var jQuery = function(selector, context) { return new jQuery.fn.init(selector, context, rootjQuery); };
window.jQuery = window.$ = jQuery; })(window); |
说明:
l 自执行函数
l 给window添加了两个等同的函数: jQuery()/$()
l 执行$()后,返回的是一个jQuery库包装的对象, 通常称之为:jQuery对象
3.2. 核心
1). jQuery核心函数: $()
l jQuery库中为window对象定义了一个$函数(方法)
l $函数会根据参数数据类型的不一样作不一样的工做, 返回一个jQuery封装的伪数组的对象
1.1). $(callback)
l 传入一个function参数, 做为回调函数
l 在DOM文档载入完成后, 回调函数自动执行
l 这个函数的做用如同$(document).ready(callback)同样
l 它与window.onload是有区别的
1.2). $(selector)
l 接收一个CSS选择器格式的字符串参数
l 根据此字符串在document中去匹配一组元素, 并封装成jQuery对象返回
1.3). $(domEle)
l 接收一个DOM对象类型的参数
l 返回包含这个dom对象的jQuery对象
l jQuery对象只能调用jQuery封装的方法
l DOM对象只能调用DOM中所定义的方法
1.4). $(htmlString)
l 接收一个标签字符串参数
l 建立对应的标签对象, 并包装成jQuery对象
l 如: $("<div><p>Hello</p></div>")
2). jQuery对象访问
2.1). each(callback)
l callback函数: function (index, domEle)
l 遍历jQuery对象中包含的全部DOM对象, 每拿到一个dom对象都会调用指定的回调函数, 并将下标和dom对象传入
2.2). size() / length
l 获得jQuery对象中包含的全部DOM对象的个数
2.3). [index] / get(index)
l 根据下标获得jQuery对象中所包含的某个dom对象
l 经常使用此方法来将jQuery对象转为DOM对象
l 约定：若是获取的是jQuery对象,那么要在变量前面加上$.
| var nameELe = document.getElementById("name") var $nameEle = $("name"); |
3.3. 选择器(同css)
l jQuery最牛的地方就是其强大的选择器, 使用其选择器基本能够快速轻松的找到页面的任意节点
l jquery的选择器分类
n 基本选择器
n 层次选择器
n 过滤选择器
u 基本
u 内容
u 可见
u 属性
u 子元素
u 表单
u 表单属性
1). 基本选择器
l 基本选择器是jquery中最简单，也是最经常使用的选择器
l 它经过标签名,id属性,class属性来查找匹配的DOM元素
1.1) id选择器
l 用法: $(‘#id’)
l 返回值：根据id属性匹配一个标签, 封装成jQuery对象
1.2) 标签选择器
l 用法: $(‘tagName’)
l 返回值：根据标签名匹配的一个或多个标签, 封装成jQuery对象
1.3) class选择器
l 用法: $(‘.class’)
l 返回值：根据class属性值匹配一个或多个标签, 封装成jQuery对象
1.4) *选择器
l 用法: $(*)
l 返回值: 匹配全部标签, 封装成jQuery对象
1.5) selector1,selector2,…
l 用法: $(”div,span,.myClass”)
l 返回值: 全部匹配选择器的标签, 封装成jQuery对象
2). 层次选择器
l 若是想经过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则须要经过层次选择器。
2.1). ancestor descendant
l 用法: $(”form input”)
l 说明: 在给定的祖先元素下匹配全部后代元素
2.2) parent > child
l 用法: $(”form > input”)
l 说明: 在指定父元素下匹配全部子元素.注意:要区分好后代元素与子元素
2.3) prev + next
l 用法: $(”label + input”)
l 说明: 匹配全部紧接在prev元素后的next元素
2.4) prev ~ siblings
l 用法: $(”form ~ input”)
l 说明: 匹配prev元素以后的全部 siblings元素, 不包含该元素在内,而且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
3). 基本过滤选择器
l 过滤选择器主要是经过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头
l 按照不一样的过滤规则, 过滤选择器能够分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤, 表单过滤和表单属性过滤选择器.
3.1). :first
l 用法: $(”tr:first”) ;
l 说明: 匹配找到的第一个元素
3.2). :last
l 用法: $(”tr:last”)
l 说明: 匹配找到的最后一个元素.与 :first 相对应
3.3). :not(selector)
l 用法: $(”input:not(:checked)”)
l 说明: 去除全部与给定选择器匹配的元素.有点相似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
3.4). :even
l 用法: $(”tr:even”)
l 说明: 匹配全部索引值为偶数的元素，从0开始计数.js的数组都是从0开始计数的.
3.5). : odd
l 用法: $(”tr:odd”)
l 说明: 匹配全部索引值为奇数的元素,和:even对应,从 0 开始计数.
3.6). :eq(index)
l 用法: $(”tr:eq(0)”)
l 说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
3.7). :gt(index)
l 用法: $(”tr:gt(0)”)
l 说明: 匹配全部大于给定索引值的元素.
3.8). :lt(index)
l 用法: $(”tr:lt(2)”)
l 说明: 匹配全部小于给定索引值的元素.
4). 内容过滤选择器
l 内容过滤选择器的过滤规则主要体如今它所包含的子元素和文本内容上
4.1). :contains(text)
l 用法: $(”div:contains(’John’)”)
l 说明: 匹配包含给定文本的元素.这个选择器比较有用，当咱们要选择的不是dom标签元素时,它就派上了用场了,它的做用是查找被标签”围”起来的文本内容是否符合指定的内容的.
4.2). :empty
l 用法: $(”td:empty”)
l 说明: 匹配全部不包含子元素或者文本的空元素
4.3). :has(selector)
l 用法: $(”div:has(p)”).addClass(”test”)
l 说明: 匹配含有选择器所匹配的元素的元素.这个解释须要好好琢磨,可是一旦看了使用的例子就彻底清楚了:给全部包含p元素的div标签加上class=”test”.
4.4). :parent
l 用法: $(”td:parent”)
l 说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感受与上面讲的”:empty”造成反义词.
5). 可见过滤选择器
l 根据元素的可见和不可见状态来选择相应的元素
5.1). :hidden
l 用法: $(”tr:hidden”)
l 说明: 匹配全部的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.一样,要在脑海中完全分清楚冒号”:”, 点号”.”和逗号”,”的区别.
5.2). :visible
l 用法: $(”tr:visible”)
l 说明: 匹配全部的可见元素.
6). 属性过滤选择器
l 属性过滤选择器的过滤规则是经过元素的属性来获取相应的元素
6.1). [attribute]
l 用法: $(”div[id]“)
l 说明: 匹配包含给定属性的元素. 例子中是选取了全部带id属性的div标签.
6.2). [attribute=value]
l 用法: $(”input[name='newsletter']“).attr(”checked”, true)
l 说明: 匹配给定的属性是某个特定值的元素.例子中选取了全部name属性是newsletter的 input 元素.
6.3). [attribute!=value]
l 用法: $(”input[name!='newsletter']“).attr(”checked”, true)。
l 说明：匹配全部不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).以前看到的 :not 派上了用场.
6.4). [attribute^=value]
l 用法: $(”input[name^=‘news’]“)
l 说明: 匹配给定的属性是以某些值开始的元素.,咱们又见到了这几个相似于正则匹配的符号.如今想忘都忘不掉了吧?!
6.5). [attribute$=value]
l 用法: $(”input[name$=‘letter’]“)
l 说明: 匹配给定的属性是以某些值结尾的元素.
6.6). [attribute*=value]
l 用法: $(”input[name*=‘man’]“)
l 说明: 匹配给定的属性是以包含某些值的元素.
7). 子元素过滤选择器
7.1). :nth-child(index/even/odd/equation)
l 用法: $(”ul li:nth-child(2)”)
l 说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和以前说的基础过滤(Basic Filters)中的 eq() 有些相似,不一样的地方就是前者是从0开始,后者是从1开始.
7.2). :first-child
l 用法: $(”ul li:first-child”)
l 说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每一个父元素匹配一个子元素.这里须要特别点的记忆下区别.
7.3). :last-child
l 用法: $(”ul li:last-child”)
l 说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每一个父 元素匹配一个子元素.
7.4). : only-child
l 用法: $(”ul li:only-child”)
l 说明: 若是某个元素是父元素中惟一的子元素,那将会被匹配.若是父元素中含有其余元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
8). 表单选择器
9.1). :input
l 用法: $(”:input”)
l 说明:匹配全部 text, textarea, select 和 button 元素
9.2). :text
l 用法: $(”:text”)
l 说明: 匹配全部的单行文本框.
9.3). :password
l 用法: $(”:password”)
l 说明: 匹配全部密码框.
9.4). :radio
l 用法: $(”:radio”)
l 说明: 匹配全部单选按钮.
9.5). :checkbox
l 用法: $(”:checkbox”)
l 说明: 匹配全部复选框
9.6). :submit
l 用法: $(”:submit”)
l 说明: 匹配全部提交按钮
9.7). :image
l 用法: $(”:image”)
l 说明: 匹配全部图像域.
9.8). :reset
l 用法: $(”:reset”)
l 说明: 匹配全部重置按钮.
9.9). :button
l 用法: $(”:button”)
l 说明: 匹配全部按钮.这个包括直接写的元素button.
9.10). :file
l 用法: $(”:file”)
l 说明: 匹配全部文件域.
9.11). :hidden
l 用法: $(”input:hidden”)
l 说明: 匹配全部不可见元素，或者type为hidden的元素.这个选择器就不只限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
9). 表单对象属性过滤选择器
l 此选择器主要对所选择的表单元素进行过滤
8.1). :enabled
l 用法: $(”input:enabled”)
l 说明: 匹配全部可用元素.意思是查找全部input中不带有disabled=”disabled”的input.不为disabled,固然就为enabled啦.
8.1). :disabled
l 用法: $(”input:disabled”)
l 说明: 匹配全部不可用元素.与上面的那个是相对应的.
8.1). :checked
l 用法: $(”input:checked”)
l 说明: 匹配全部选中的被选中元素(复选框、单选框等，不包括select中的option).这话提及来有些绕口.
8.1). :selected
l 用法: $(”select option:selected”)
l 说明: 匹配全部选中的option元素.
3.4. 文档处理(CRUD)
1). 内部插入节点
1.1). append(content)
l 向每一个匹配的元素的内部的结尾处追加内容
1.2). appendTo(content)
l 把全部匹配的元素追加到另外一个指定的元素元素集合中
1.3). prepend(content)
l 向每一个匹配的元素的内部的开始处插入内容
1.4). prependTo(content)
l 将每一个匹配的元素插入到指定的元素内部的开始处
2). 外部插入节点
2.1). after(content) :
l 在每一个匹配的元素以后插入内容
2.2). before(content)
l 在每一个匹配的元素以前插入内容
2.3). insertAfter(content)
l 把全部匹配的元素插入到另外一个、指定的元素元素集合的后面
2.4). insertBefore(content)
l 把全部匹配的元素插入到另外一个、指定的元素元素集合的前面
3).查找节点
3.1). 使用jQuery选择器查询
l $(selector)
l 获得一个包含全部匹配的dom节点对象的jQuery对象
3.2). 查询jQuery对象内部数据
l $object.find(selector)
l 在Jquery对象中根据selector查找其中匹配的后代节点
3.3). 遍历jQuery对象包含的数据
l $(selector1).each(function(index, itemDom){ })
l 遍历jQuery对象所包含的全部节点, 每取一个dom节点对象都去调用设置的回调函数, 并将取出的节点在数组中的下标和节点对象传入函数
4).建立节点
l $(htmlString).
l 动态建立的新元素节点不会被自动添加到文档中, 须要使用其余方法将其插入到文档中;
l 当建立单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如建立一个<p>元素, 可使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)
l 建立文本节点就是在建立元素节点时直接把文本内容写出来; 建立属性节点也是在建立元素节点时一块儿建立
5). 删除节点
5.1). empty():
l 删除匹配的元素集合中全部的子节点(不包括自己)。
5.2). remove():
l 删除匹配的元素及其子元素(包括自己)
6). 属性操做
6.1). attr(name [,value])
l 根据属性名获取属性值或者设置一个属性
6.2). removeAttr(name)
l 根据属性名删除对应的属性
7). HTML代码/值
7.1). html([val])
l 获得元素的内容或者设置元素的内容
7.2). val([value])
l 得到匹配元素的当前值或者设置其值
8) CSS
8.1). addClass(className)
l 添加class属性
8.2). removeClass()
l 移除class属性
8.3). css(name, [value])
l 查看某个样式属性, 或设置某个样式属性
3.5. 事件
1) 经常使用的事件
1.1). ready(fn)
l 当DOM载入就绪能够查询及操纵时绑定一个要执行的函数
l 它与window.onload是有区别的
1.2). click([fn])
l 触发每个匹配元素的click事件
1.3). blur([fn])
l 触发每个匹配元素的blur事件
1.4). change([fn])
l 触发每个匹配元素的change事件
2) 绑定与解绑事件
2.1). bind(type, fn)
l 为每一个匹配元素的特定事件绑定事件处理函数。
2.2). unbind(type)
l bind()的反向操做，从每个匹配的元素中删除绑定的事件
3) 事件切换
3.1). hover(over,out)
l 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
4) 事件冒泡
l 描述: 事件会按照 DOM 层次结构像水泡同样不断向上只止顶端
l 解决: 在事件处理函数中返回 false, 会对事件中止冒泡
3.6. 效果
1) 基本
1.1) show()
l 显示当前标签
1.2) hide()
l 隐藏当前标签
1.3) toggle()
l 切换当前标签的可见性
2) 滑动
2.1). slideDown()
l 这个动画效果只调整元素的高度，可使匹配的元素以“滑动”的方式显示出来
2.2). slideUp()
l 这个动画效果只调整元素的高度，可使匹配的元素以“滑动”的方式隐藏起来
2.3). slideToggle()
l 经过高度变化来切换全部匹配元素的可见性
3) 淡入淡出
3.1). fadeIn()
l 经过不透明度的变化来实现全部匹配元素的淡入效果
3.2). fadeOut()
l 经过不透明度的变化来实现全部匹配元素的淡出效果
3.3). fadeToggle()
l 经过不透明度的变化来开关全部匹配元素的淡入和淡出效果
3.7. 处理XML文件
1) 加载XML文件
l 可使用$函数中定义的get()函数或post()函数加载本地或远程的xml文件, 获得文件中包含的dom数据
l get(path, fn, dataType) post(path, fn, dataType)
l 例子:
| $.get( "cities.xml", function(dom){ //dom为cities.xml包含的文档对象 }, "xml" ); |
2) 操做XML数据
4. 练习
4.1. 练习1: 爱好选择
4.2. 练习2: 分类动态展现
4.3. 练习3: 动态查看图片
4.4. 练习4: 员工管理
4.5. 练习5: 二级联动
- 1. jQuery 复习
- 2. JQuery复习
- 3. JQuery复习之JQuery简介
- 4. jQuery---内容复习
- 5. jQuery---第一部分复习
- 6. jquery复习日记（1）
- 7. jquery 复习笔记-属性
- 8. jquery 复习笔记-事件
- 9. jQuery复习整理(2)
- 10. java学习之路——JQuery复习
- 更多相关文章...
- • ionic 复选框 - ionic 教程
- • XSD 复合元素 - XML Schema 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • Kotlin学习（二）基本类型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. jQuery 复习
- 2. JQuery复习
- 3. JQuery复习之JQuery简介
- 4. jQuery---内容复习
- 5. jQuery---第一部分复习
- 6. jquery复习日记（1）
- 7. jquery 复习笔记-属性
- 8. jquery 复习笔记-事件
- 9. jQuery复习整理(2)
- 10. java学习之路——JQuery复习