本文详细介绍了jQuery和zepto的基础知识，包括两者的关系、使用步骤、对象转换、选择器、DOM操作、事件处理、动画效果以及移动端zepto的特点和与jQuery的区别。通过实例解析了jQuery中的常用方法，如DOM操作、事件绑定与解绑，同时也探讨了zepto在移动端的优势和特有的事件处理。
概念
$() 等价于 jQuery()
JavaScript(ECMA/DOM/BOM) -> 在实际开发中，使用比较麻烦,浏览器的兼容问题
- JavaScript类库(JS库)
- 目的 - 就是为了简化JavaScript的开发
- 实现 - 使用JavaScript中的函数和对象进行封装
* 我们只需要掌握如何使用，而不需要了解如何实现
* 目前版本
-1.x版本 - 几乎兼容所有浏览器
-2.x版本 - 不再兼容IE所有浏览器
-3.x版本 - 不再兼容IE8之前的版本
* 四个模块
* jQuery - 针对PC端浏览器
* jQuery UI - 针对样式
* jQuery Mobile - 针对移动端浏览器
* Qunit - 针对前端测试
- jQuery对象
-jQuery对象与DOM对象
* DOM对象 - 通过DOM提供的属性或方法获取的页面元素
* jQuery对象 - 通过对DOM对象的封装产生的对象
* jQuery的底层还是DOM内容
* 注意 - 在实际开发中，DOM和jQuery可能混合使用
jQuery的编程步骤
1，首先在<head>标签中引入jQuery文件，使其先于<body>标签加载
- 在逻辑代码实现之前引入即可
2，通过jQuery的选择器获取指定元素
3，通过jQuery提供的属性或方法完成需求
- 用法：
* 使用选择器，获取HTML页面中的指定标签
* 返回值：为一个jQuery对象
- 例如：
var$username=$username(‘选择器’)；
- 工厂函数 - $()或jQuery()
- 用法：作为jQuery的入口
- 作用：1，传递jQuery的选择器定位页面的元素
2，将DOM对象转换为jQuery对象
DOM对象和jQuery对象之间的转换
- DOM对象：通过DOM操作获取页面的元素
jQuery对象：封装DOM对象产生的对象（底层还是DOM对象）
- 将DOM对象转换为jQuery对象
通过jQuery的工厂函数 - $(DOM对象) -> 将其转化为jQuery对象】
- 将jQuery对象转换为DOM对象
1,jQuery对象是类数组对象，通过索引值来转换 $username[0];
2,jQUERY提供了get(index)，也是索引值来转换 $username.get(0);
* 获取input中的内容，DOM使用 元素.value
jQuery使用 $元素.val()，若里面没有写代码，表明是调用val()值；若里面写有代码，表示往里面写入属性值
jQuery具有完善的处理机制
- 使用DOM来获取页面元素失败时，会报错
- 使用jQuery来获取页面元素失败时，并不是报错而是返回 undefined 。因为jQuery底层将错误做了预处理。
好处：拥有相对完善的处理机制
坏处：很难判断错误的位置和原因
基本选择器
- Query与CSS的选择器的区别
-jQuery的选择器用法是源于CSS选择器的用法
- jQuery的选择器扩展了CSS的选择器
- 分别 - 九大选择器
* 基本选择器
* 层级选择器
* 过滤选择器 - 前缀 : + 选择器
* 基本过滤选择器
* 内容过滤选择器
* 可见性过滤选择器
* 属性过滤选择器（使用中括号）
* 子元素过滤选择器
* 表单对象属性过滤选择器
* 表单选择器
- 改变背景颜色，可以通过CSS操作实现
* 使用 css(‘样式名,‘样式值’)；
- 匹配多个元素时，不需要循环操作 -因为jQuery底层做了预处理
- $(‘#one + div’); + 在这里的意思是：查找id为one的下一个div兄弟元素
$(‘#one ~ div’); ~ 在这里的意思是：查找id为one后面的所有兄弟元素
* 基本过滤选择器
：not(选择器) ：odd ：even
：gt(num) ：lt(num) :header :animated
* 内容选择器
：contains(内容) ：empty :has(选择器) :parent
* 可见性选择器
:visible :hidden
* 属性过滤器
元素[含有的属性] 元素[属性名=属性值] （相等的属性值 ！=）
元素[^= ]以什么开始 元素[ $= ]以什么结束 元素[ *= ][]含有
* 子元素过滤选择器（父元素的第几个子元素）
nth-child(index) 这里面的index是从 1 开始的
- $(‘div :nth-child(num)’) – 获取div父元素的第num个子元素
$(‘div:nth-child(num)’) - 获取第二个div子元素
元素:first-child 父元素的第一个子元素
元素：last-child 父元素的最后一个子元素
元素：only-child 只有一个子元素
-attr（属性，属性值）；
-siblings()其他的兄弟元素
* 循环遍历
方法一：$( ).each( function(index,domEle){ })
* 只能使用jQuery对象来调用
- 参数 - 回调函数
-index - 表示循环遍历的索引值
-domEle - (DOM对象)表示循环遍历过程中得到的每个元素
* text() –只能在jQuery情况下调用，表示取得所有匹配元素包含的文本内容
$(domEle).text() 将domEle得到的DOM对象转化为jQuery对象后调用text（）方法
方法二：jQuery（或 $）.each(object,function(index,domEle){ })
-object - 他可以是循环遍历的对象或是数组，还可以是jQuery对象
用法和（方法一）一样
表单对象属性的过滤操作
- input:disabled - 表示对不可用框进行操作
- input:enabled - 表示对可用框进行操作
- input:checked - 表示匹配所有的单选框、复选框中被选中的元素
length - 表示被选中的长度
- option:selected - 表示选中的所有option元素
- $元素：hide() - 将元素隐藏
- $元素：show() - 将元素显示
- $元素.is(属性) - 判断$元素里面是否含有属性，若有属性则返回true，若没有则返回false
jQuery的DOM操作
- 基本操作
-html() - 相当于DOM中的innerHTML属性的作用
* html() - 获取指定元素的HTML代码内容
* html(html) - 设置指定元素的HTML代码内容
- text() - 相当于DOM中的textContent属性的作用
* text() - 获取指定元素的文本内容
* text(text) - 设置指定元素的文本内容
- val() - 相当于DOM中的value属性值的作用
*val() - 获取指定元素的value属性值
* val(value) - 设置指定元素的value属性值
- attr() - 相当于DOM中的getAttribute()和setAttribute()的作用
* attr(attrName) - 等价于getAttribute()（attrName为style）
例如：元素.attr(‘style’,’height:300px’);
* 通常使用jQuery对象设置属性时，属性和属性值都需要加上‘’（引号），如果属性值，是存放在一个变量里面的，使用变量来设置属性，此时可不加引号。
* attr(attrName,attrValue) - 等价于setAttribute()
* removeAttr(attrName) - 等价于removeAttribute()
- 样式操作
- 通过属性操作 - style或class属性
- attr()和removeAttr()方法
* 注意 - 设置属性(将原有样式删除，替换成新的样式)
- css()方法 - 直接操作CSS中的样式， 获取或设置一个CSS样式
- css(attrName,attrValue) - 设置指定的CSS样式
* css(attrName) - 获取指定的CSS样式（width,heigtht,background）
例如：元素.css(‘height’,’300px’);
- css(Object类型) -同时设置多个CSS样式
- addClass(className) - 追加样式
* 注意 - 不会改变指定元素的原有样式内容
- removeClass() - 删除样式
* 当不传参数时，表示删除所有样式
* 传递多个指定样式时，中间使用空格隔开
- toggleClass(className) - 切换样式
* 表示在没有样式和指定样式之间进行切换，效果相当于使用addClass()和removeClass（）方法。
-hasClass(className) - 判断是否含有指定样式
* 遍历元素
- 祖先元素与后代元素
* 祖先元素 -parents()
* 后代元素 -find(expr)
- 父元素与子元素
* 父元素 - parent()
* 子元素 -children()
- 兄弟元素
* 上一个兄弟元素 -prev() 前面所有的兄弟 – prevAll()
* 下一个兄弟元素 - next() 后面所有的兄弟 - nextAll()
* 所有兄弟元素 -siblings()
后面所有兄弟元素 -$(target ~ element)
* 创建节点
- 元素节点 - $(HTML代码)
* 注意 - HTML代码必须是字符串类型
- 文本节点 - text()
- 属性节点 - attr()
- 删除节点
- remove() - 删除哪个元素，哪个元素调用
* 结果 - 既删除自身元素，也删除所有后代元素
- empty() - 删除哪个元素，哪个元素调用
* 结果 - 删除所有后代元素，而保留自身元素
* 在实际开发中，适用于清空操作
- 复制节点(了解)
- jQuery中的复制节点 -clone(boolean)
* boolean参数 - 表示是否复制事件
* 默认值为 false，不复制事件
- DOM中的复制节点 -cloneNode(boolean)
* boolean参数 - 表示是否复制后代节点
* 默认值为 false，不复制后代节点
* 插入节点
- 内部插入节点 - 父元素与子元素(向父元素插入子元素)
- A.append(B) –将B插在A的后面
- A.prepend(B) – 将B插在A的前面
- A.appendTo(B) – 将A插在B的后面
- A.prependTo(B) – 将A插在B的前面
- 外部插入节点 - 兄弟关系的元素(向指定元素插入前一个或后一个兄弟元素)
- A.before(B) – 将B插在A的前面
- A.after(B) – 将B插在A的后面
- A.insertBefore(B) – 将A插在B的前面
- A.insertAfter(B) – 将A插在B的后面
* 替换节点
- 被替换元素.replaceWith(替换元素)
- 替换元素.replaceAll(被替换元素)
页面的加载，ready()的编写方式：
- $(document).ready(function(){ }) - 等价于 window.onload
- 速度快 - 必须等待HTML页面的DOM结构加载完毕之后，再执行
-具有简化写法
*$().ready(function(){ })
* $(function(){ }) - 实际开发
* 允许编写多个
* window.onload
- 速度慢 - 必须等待HTML页面所有的内容全部加载完毕之后，再执行
- 没有任何的简化写法
- 只能存在一个
- ready 和onload之间的区别：
与其他JS库冲突
- 问题 - 集中在"$"符号的使用权冲突
- 原则 - jQuery主动放弃"$"符号的使用权
- 两种情况
* 先引入jQuery文件 - $符号已经不是jQuery
解决方案：
1. 直接替换成 jQuery 来使用，将$()变成jQuery()来调用
* jQuery.noConflict();表示jQuery()主动放弃 $ 的使用权，然后再使用后两种2,3的方法来解决冲突问题。
2. 通过自调函数来解决
(function($){
// $ 依旧表示 jQuery 对象
//将jQuery的逻辑代码编写在此处
})(jQuery);
3. 通过 ready() 方法来解决
jQuery(function($){
// $ 依旧表示 jQuery 对象
})
* 后引入jQuery文件 - $符号一定是jQuery
事件的绑定与解绑
- bind(type, data, fn) 绑定事件
- type - 绑定的事件名称
- data - (可选)作为event.data属性值传递给事件对象的额外数据对象
- fn - 绑定事件的对应处理函数
- unbind(type, fn) 解绑事件
- type - 解绑的事件名称
- fn - 解绑事件的对应处理函数，必须和bind（）绑定的事件处理函数是同一函数。
- 动画
- 显示与隐藏 - 同时改变宽度和高度
* show() - 显示
- show() - 无参版本，没有动画效果
- show() - 有参版本，具有动画效果
- 参数 - slow、normal和fast预定义，自定义时间(毫秒)
* hide() - 隐藏
- hide() - 无参版本，没有动画效果
- hide() - 有参版本，具有动画效果
- 参数 - slow、normal和fast预定义，自定义时间(毫秒)
*toggle() - show() + hide() 显示与隐藏的切换效果
- 滑动效果 - 改变高度
* slideUp()
* 注意 - 并没有提供无动画版本
- 不传递参数时 - 底层逻辑默认提供一个动画执行的时间
* slideDown()
* slideToggle() - slideUp() +slideDown()
- 向上滑动与向下滑动的切换效果
- 淡入淡出 - 改变透明度
* fadeIn() - 淡入
* fadeOut() - 淡出
* fadeTo(speed, opacity) - 将指定元素的透明度改变到指定值
- opacity - 表示设置透明度变化到的值
- fadeToggle() - jQuery 1.4版本以后
- 自定义动画
* animate(params, [duration], [easing],[callback])
- params - 表示用于实现动画效果的CSS样式属性
* 格式 - Object类型
{ name : value, name : value,... }
- duration - 表示用于实现动画所执行的时长，单位为毫秒
- easing - 要使用的擦除效果的名称(需要插件支持)
- callback - 表示动画执行完毕后的回调函数
*animate(params, options)
- params - 表示用于实现动画效果的CSS样式属性
* 格式 - Object类型
{ name : value, name : value,... }
- options
* 格式 - Object类型
- 选项
- duration - 表示用于实现动画所执行的时长，单位为毫秒
- easing - 要使用的擦除效果的名称(需要插件支持)
- complete - 表示动画执行完毕后的回调函数
- queue - 为true时排队效果，为false时并发效果
- 两种用法的效果
- 并发效果 - 同时改变多个CSS样式属性
$('#panel').animate({
left : 400,
top : 400
},3000)
- 排队效果 - 多个CSS样式属性按照先后顺序依次改变
$('#panel').animate({
left : 400
},3000).animate({
top : 400
},3000)
* 注意 - 所有与颜色相关的 CSS 样式属性不能使用
- background-color
- border-color
- color
jQuery类数组对象
- 特点 - 允许存储多个元素，有序排列
- 属性
- length - 表示长度，指的是当前存储元素的个数
- 方法
- 循环遍历方法
* $().each(function(index,domEle){})
*$.each(object,function(index,domEle){})
- toArray()方法
- 将jQuery对象转换为真正的数组
* 注意 - 只能操作 jQuery 对象
-$.inArray(value, array)
- 作用 - 表示判断指定的值value在指定数组array中的位置(索引值)，也可以判断是否包含DOM对象。不能判断对象中是否包含属性或方法。
* 注意
- 如果数组包含指定的值 -返回对应的索引值
- 如果数组不包含指定的值- 返回固定值 -1
- $.makeArray(obj)
- 作用 –将类数组对象转换为数组对象
* 注意
* 类数组对象 - 不仅仅只是指 jQuery 对象，所有类数组对象都可以
- JSON格式
- $.parseJSON() - jQuery提供了将JSON字符串转换为JSON对象的方法
- jQuery插件
- 日期插件
- 基本用法
- 在HTML页面中引入插件文件
- 为<input>标签设置 onclick 事件属性，值为 laydate() 方法
移动端zepto
* zepto同jquery不同的API
*attr同prop
jquery：标签的固有属性，布尔值属性<prop>
标签的自定义属性，用attr布尔值属性并且布尔值属性在标签体内没有定义时候<attr>
zepto:attr同样获取布尔值属性。
*DOM操作
配置对象：
jquery不同使用配置对象添加id，class。。。
zepto可以使用配置对象---结构，样式分离，而且容易管理
*offset()----用来获取目标元素相对于视口的偏移量 对象
jquery：top ， left
zeptop：top，left，width，height(content,补白，border)
*width(),height()
jquery:
1、width(),height() 获取content内容区的值，没有单位
2、.css 获取content内容区的值，有单位px
3、 innerHeight() content,padding没有单位
innerHeight() content,padding border没有单位
zepto:
1、width(),height()获取的content，补白，border
2、没有innerHeight()，innerHeight()
3、.css()
*事件委托
原理：利用冒泡的原理将事件绑定到父元素/祖先元素身上，event.target指向的子元素
zepto：
1、委托同一个父元素身上
2、同一个世界
3、操作关联，操作对应的元素/类
4、顺序
5、谁操作的关联类就是谁触发的
*each
jquery：能遍历数组，对象，不能遍历字符串/json对象/json数组
zepto：能遍历数组，对象，字符串
*隐藏元素的宽高
jquery：能获取
zepto： 不能宽，高
zepto的touch event
*tap点击事件
*singleTap()点击事件
*doubleTap()双击事件
*longTap()长按事件--连续作用750ms
*滑动事件(浏览器的默认行为---翻页---touch-action)
1、swipe滑动事件 在同一个方向连续滑动30px才为滑动，否则就是点击
jQuery和zepto的区别：
- 什么是zepto.js
概念：移动端开发框架,是jquery的轻量级代替品；API及语句同jquery相似，但文件更小(可压缩至8KB)。是目前功能完备的库中，最小的一个。
* zepto.js特点
1、针对的是移动端
2、轻量级，压缩版本只有8KB
3、语法大部分同jquery一样，学习成本低，上手快。
4、响应，执行快。
5、同jquery一样以$作为核心函数和核心对象。
* attr与prop的区别：
- jQuery中
1、prop多用在标签的固有属性，布尔值属性。比如：a标签的href，class，selected等。
2、attr多用在自定义属性上。
3、在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined
- zepto中
1，在zepto中用attr也可以获取布尔值属性.
2，prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop
* 坑！------zepto中removeProp()的方法。在1.2以上才支持。
*DOM操作
- jquery中插入DOM元素的时候添加配置对象（属性选择器：id，class。。。)的时候不会显示；
- zepto 插入DOM元素的时候添加配置对象的时候可以添加进去，并且添加的配置对象的内容会直接反应在标签属性内，且可以操作，影响对应的DOM元素。
* each（）方法
在jQuery中 $.each(collection, function(index, item){ ... })
-可以遍历数组,以index，item的形式，
- 可以遍历对象，以key-value的形式
-不可以遍历字符串。
-不可以遍历json字符串
· 在zepto中，$.each(collection, function(index,item){ ... })
- 可以遍历数组,以index，tiem的形式，
-可以遍历对象，以key-value的形式，
-可以遍历字符串。
*offset
- 在jQuery中
-获取匹配元素在当前视口的相对偏移。
- 返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。获取width，height时为undefined。
- 在zepto中
1、获得当前元素相对于视口的位置。
2、返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高)
* width和height的区别：
- jquery获取宽高的方法
1、width(),height()---content内容区的宽高，没有单位px;
2、.css('width')----可以获取content内容区的宽高，padding，border的值，有单位px;
3、innerHeight(),innerWidth()---outerHeight(),outerWidth()来获取
4，可以通过css（）获取padding，border的值
-zepto
1,zepto用width(),height()是根据盒模型决定的，并且不包含单位PX,包含padding的值,border的值
2,zepto中没有
innerHeight(),innerWidth()---outerHeight(),outerWidth()
* jquery可以获取隐藏元素的宽高
* zepto无法获取隐藏元素宽高
* 事件委托
- 在jQuery中，前面是父元素，后面是绑定的元素。
$('#box').delegate('.a','click',function(){
alert('delegate');
})
- 在zepto中委托的事件先被依次放入数组队列里，然后由自身开始往后查找，期间符合条件的回调函数都会触发，符合条件的元素委托的事件都会执行。
1、委托在同一个父元素身上
2、委托的是同一个事件
3、委托关联 操作与其关联的元素
这样，就会触发第一个事件后，后面的事件会自动的触发。
* 点击事件
在jQuery中：
- on() 绑定事件处理程序
- off() 方法移除用目标oon绑定的事件处理程序。
- bind() 为每个匹配元素的特定事件绑定事件处理函数，可同时绑定多个事件，也可以自定义事件。
- one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只执行一次。
- unbind() bind的反向操作，删除匹配元素所绑定的bind事件。
- zepto方法
- tap()点击事件利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上
- singleTap() 点击事件
- doubleTap() 双击事件
- longTap() 当一个元素被按住超过750ms触发。
- swipe,swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过(同一个方向滑动距离大于30px)时触发。(可选择给定的方向)
* 在一个方向滑动大于30px即为滑动。否则算点击。
*注意浏览器的默认行为（翻页）滑动的时候应该阻止对应的该默认行为
$('#btn').on('touchmove',function (e) {
e.preventDefault();
});
* form表单
1、serialize()
在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。---key(name)/value
2、serializeArray()
将用作提交的表单元素的值编译成拥有name和value对象组成的数组。
不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。
3、submit()
为 "submit" 事件绑定一个处理函数，或者触发元素上的"submit" 事件。
* 当参数function没有给出时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非阻止默认行为。
扫一扫
1063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
