jQuery:
* JavaWeb和框架内容
* javascript和javascript类库(框架)
* 定义:封装了很多预定义的对象和实用函数。
* javascript脚本语言是面向对象的。
* 能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。
* Web1.0和Web2.0:
* Web1.0:以内容为主的网站(门户网站)
* Web2.0:以人的关系为主的网站(社交网站)
* Web3.0:基于移动互联网的社交网站
* (富)胖客户端页面和瘦客户端页面
* (富)胖客户端页面:静态页面加上操作(交互)
* 瘦客户端页面:静态页面
* 流行的javascript库:
* 上百种js库
* jQuery:
* jQuery官网团队:
* 核心研发
* UI研发
* 插件研发
* jQuery分类:
* Web版本:我们主要学习
* UI版本:UI界面
* mobile版本:针对移动开发
* qunit版本:用于测试
* jQuery版本:
* 1.4.2版本:企业开发主流
* 1.8.3版本:学习研究主流
* 1.11.0版本:目前最新版本
* 2.1.0版本:目前最新版本(jQuery官方宣布不再支持IE浏览器:6.0\7.0\8.0\9.0)
* jQuery具有两个文件:
* 正常版本:学习研究,代码和注释
* 压缩版本(min):开发使用,只有代码
* 顶级变量(顶级对象)
* jQuery中只有一个对象:jQuery
* jQuery的顶级对象,只能调用
* jQuery具有约束符:"$"
jQuery.属性名 == $.属性名
* 隐式迭代:只关心开始和结束(要遍历谁和遍历后的结果)
* 行为层与结构层的分离
* 行为层:逻辑部分
* 结构层:HTML标签
* DOM对象和jQuery对象
* DOM对象:通过DOM解析HTML页面元素,所得到的DOM元素
* jQuery对象(底层还是DOM对象):通过jQuery包装DOM对象后产生的对象
* DOM对象转换成jQuery对象:$(DOM对象)
* jQuery对象转换成DOM对象:
* jQuery对象是数组对象:jQuery对象[索引值]
* jQuery提供了get(index)方法
* DOM对象与jQuery对象互操作?不可以
* jQuery相对于DOM来讲,具有比较完善的事情处理机制
* 选择器
* 选择器是jQuery中的根基
* jQuery的九大选择器(分类)
* 建议:
* 一定要将九个页面强加练习
* 熟悉jQuery的帮助文档
* DOM操作:对比原生DOM操作来学习
* 获取节点:
* 元素节点:所有选择器
* 文本节点:text()
* 属性节点:
* attr()
* removeAttr()
* 创建节点:
* 元素节点:$(HTML代码),注意标签的闭合
* 文本节点:text()
* 属性节点:attr()
* 删除节点:
* remove():删除自身节点及后代节点
* empty():删除后代节点,保留自身节点
* 插入节点:
* 内部插入节点:插入标签内部
* 外部插入节点:插入标签外部
* 复制节点:
* 原生js的复制节点:cloneNode(Boolean),true参数表示复制后代节点
* jQuery的复制节点:clone(Boolean),true参数表示复制事件
* 替换节点:
* replaceAll():前面的元素是替换元素;后面的元素是被替换元素
* replaceAll()就是颠倒了的replaceWith()
* replaceWith():前面的元素是被替换元素;后面的元素是替换元素
* html()方法就相当于DOM中的innerHTML属性
* 遍历节点:
* 父节点:parent()
* 子节点:children()
* 兄弟节点
* 上一个兄弟节点:prev()
* 下一个兄弟节点:next()
* 所有兄弟节点:siblings()
* find(expr)
* 包裹节点:
* wrap():分别包裹
* wrapAll():一起包裹
* wrapInner():包裹指定标签内部
* 事件
* 常规事件:click()\dblclick()等
* 特殊事件:
* ready():面试
$(docment).ready(function(){}) == window.onload
* ready的执行效率高
* ready在一个页面可以有多个
* ready的简写方法:
* $().ready(function(){})
* $(function(){})
* bind()与unbind():绑定事件与解绑定事件
* 绑定事件:
* 将页面元素绑定到具体事件上
* $(expr).click()
* 绑定事件与解绑定事件
* 绑定与解绑单个事件
* 绑定与解绑多个事件
* 绑定与解绑支持多少事件:blur, focus, focusin, focusout, load,
resize, scroll, unload, click, dblclick, mousedown, mouseup,
mousemove, mouseover, mouseout, mouseenter, mouseleave, change,
select, submit, keydown, keypress, keyup, error 。
* 其实常规事件就是绑定事件的简写方式。
* 事件切换
* hover(over, out):模拟一个鼠标悬停事件(over,out)
* over:mouseover
* out:mouseout
* 为什么要这样做:
* 实现鼠标悬停更简单
* 多用于页面效果
* toggle():多用于页面效果
* Ajax
* $.ajax():最复杂、最灵活,最接近原生Ajax的用法
* load():最简单、最不灵活
* $.get():请求类型是GET
* $.post():请求类型是POST
* $.getScript():获取脚本代码
* $.getJSON():返回的数据格式是JSON格式,实现跨域请求
* 序列化元素:
* serialize()
* 序列化的是JSON格式中的key/value格式
* 返回的是JSON字符串
* serializeArray()
* 序列化的是JSON格式中的数组格式
* 返回的是JSON对象
* Firebug工具:
* 脚本功能:
* 如果行标是绿色的,说明代码是可用的
* 行标前出现红点,表示断点处
* HTML功能:页面快速定位
* 选择对应HTML代码,快速定位对应页面效果中
* 选择对应页面效果中的元素,快速定位对应HTML代码中
* 插件
* 研究jQuery插件机制
* 目的:
* 为了将来实际开发中,快速上手新的插件
* 为了将来大家面试的:独立制作插件
* 机制(分类):
* 封装对象方法的插件
* $(expr).each():对象方法
* jQuery.fn.extend(object)
* 封装全局函数的插件
* $.each():全局函数
* jQuery.extend(object)
* 选择器插件:这一类插件,现在几乎不用了。例如XPath插件
* 使用:
* 先引入jQuery文件
* 再引入jQuery的插件文件
* this的用法:(了解)
* 作用:
* 指代DOM对象:明确指代页面中的具体元素
* 指代jQuery对象:在插件中使用,基本都是jQuery对象
* 注意:尽量不用
* 举例:表单验证插件
* 使用:插件指定对应的jQuery版本(换版本可能导致插件失效)
JQuery
最新推荐文章于 2024-09-14 18:52:56 发布