-
认识jQuery
-
库的概念
- javascript
-
javascript库
- prototype
- dojo
- YUI(yahoo UI)
- Ext JS
- Moo Tools
-
jQuery
- 强大的选择器
- 出色的DOM操作
- 可靠的事件处理
- 完善的兼容性
- 链式操作
-
加入jQuery
- 轻量级
- 强大的选择器
- 出色的dom操作
- 可靠的事件处理机制
- 完善的Ajax
- 不污染顶级变量
- 出色的浏览器兼容性
- 链式操作方式
- 隐式迭代
- 行为层与结构层的分离
- 丰富的插件支持
- 完善的文档
- 开源免费
-
jQuery代码的编写
-
jQuery库
- 生产版
- 开发板
- $(document).ready(匿名函数动作)
-
DOM对象和jQuery对象
-
DOM对象
- DOM对象转jQuery对象
-
jQuery对象
- $('#id').html()
- jQuery对象转DOM对象
-
判断对象是否用选用(表单的label标签,id=cr)
- DOM方法
- jQuery方法
-
解决jQuery与其他库冲突问题
- jQuery在其他库之前引入
-
jQuery在其他库之后引入
- 控制权交出后用jQuery开头调用,里面可以继续用$
- 定义匿名函数参数为$里面再用$()方法
-
jQuery开发工具和插件
- dreamweaver
- aptana
- jQueryWTP和Spket插件
- visual Studio 2008
- 其他工具
-
jQuery选择器
-
CSS选择器
- 标签选择器
- ID选择器
- 类选择器
- 群组选择器
- 后代选择器
- 通配符选择器
- 伪类选择器
- 子选择器E>F
- 临近选择器E+F
- 属性选择器E[attr]
- 个别浏览器不支持
-
jquery选择器
-
基本选择器
- $("#test")
- $(".class")
- $("p")
- $(*)
- $("div,span,p.myclass")
-
层次选择器
- $("div span")后代span
- $("div>span")子元素span
- $(".one+div")或$("one").next("div")方法
- $("#two~div")或$("two").nextAll("div")方法
- siblings()方法与上一个类似
-
过滤选择器
-
基本过滤
- $("div:first")
- $("div:last")
- $("input:not(.myclass)")
- $("input:even")
- $("input:odd")
- $("input:eq(1)")
- $("input:gt(1)")
- $("input:lt(1)")
- $(":header")
- $("div:animated")
- $(":focus")
-
内容过滤
- $("div:contains('我')")
- $("div:empty")
- $("div:has(p)")
- $("div:parent")
-
可见性过滤
- $(":hidden")
- $(":visible")
-
属性过滤
- $("div[id]")
- $("div[title=test]")
- $("div[title!=test]")
- $("div[title^=test]")
- $("div[title$=test]")
- $("div[title*=test]")
- $("div[title|=test]")
- $("div[title~=test]")
- $("div[id][title$=test]")
-
子元素过滤
- :nth-child(index/even/odd/equation)
- $("ul li:first-child")
- $("ul li:last-child")
- $("ul li:only-child")
- 子主题 3
-
表单对象属性过滤
- $("#form1 :enabled")
- $("#form1 :disabled")
- $("input:checked")
- $("select option:selected")
-
表单选择器
- $(":input")
- $(":text")
- $(":password")
- $(":radio")
- $(":checkbox")
- $(":submit")
- $(":image")
- $(":reset")
- $(":button")
- $(":file")
- $(":hidden")
-
注意事项
- 选择器里含有.#$([]等符号问题
- 属性选择器@符号问题
- 选择器中含有空格$('div :hidden')
-
介绍的jquery方法
- $对象.show()
- hide()
- css('属性','属性值')
- text("文本内容")
- filter(表达式1,表达式2....)
- find("span")
- addClass('class')
- removeClass("class")
- is(":hidden")
- toggle(真动作语句,假动作语句)
-
其他选择器
- moreselectors for jquery
- basic XPath
-
其他使用css选择器方法
- document.getelementsbyselector()
- cssQuery()
- querySelectorAll()
-
jQuery的DOM操作
-
dom操作分类
- DOM Core
- HTML-DOM
- CSS-DOM
-
jquery中的dom操作
-
查找节点
- $("ul li:eq(1)")
- $("p").text()
- $('p').attr('title')
- $('html')
- var $a=$('<li></li>')
- $('ul').append($a)
-
插入节点
- $('p').append('你好')
- $('你好').appendTo('p')
- $('p').prepend('你好')
- $('你好').prependTo('p')
- $('p').after('你好')
- $('你好').insertAfter('p')
-
删除节点
- remove()
- detach()
- empty()
- 复制节点
-
替换节点
- replaceWith()
- replaceAll()
-
包裹节点
- wrap('标签')
- wrapAll()
- wrapInner('<b></b>')
-
属性操作
- attr()
- removeAttr()
-
样式操作
- 获取p标签class样式
- 设置p标签class样式为high
- 追加p标签class样式high2
- 移除p标签class样式high2
-
切换样式
- toggle()之前介绍的方法
- toggleClass()
-
判断是否含有某个样式
- 等价is(".class")
-
设置获取HTML.文本和值
- $('p').html()方法
- $('p').text()方法
- $('input').val()方法
- $(p).focus()方法
- $(p).blur()方法
-
遍历节点
- children('p')
- next('p')
- prev('p')
- siblings('p')
- closest('p')
-
parent()parents()区别
- parent(p)
- parents(p)
-
CSS-DOM操作
- $('p').css('color'.'red')
- $('p').height()
- $('p').offset()
- $('p').position()
- $('p').scrollTop()
- $('p').scrollLeft()
-
jQuery中的事件和动画
-
jQuery中的事件
-
加载DOM
- window.onload
-
$(document).ready()
- 执行时机
- 多次使用
- 简写成$().ready()或$()
-
绑定事件bind或事件函数
- 事件绑定bind(事件,函数)方法
- 简写绑定事件
-
合成事件
- hover()方法
-
toggle(函数1,函数2,函数3....)方法
- 作为定义函数定义鼠标单击执行相应的状态
- 切换元素的可见状态
-
事件冒泡
- 事件对象
- 停止事件冒泡
- 阻止元素的默认行为(提交表单)
- return false
-
事件对象的属性
- event.type
- event.preventDefault()方法
- event.stopPropagation()方法
- event.target
- event.relatedTarget
- event.pageX和event.pageY
- event.which
- event.metaKey
-
移除绑定事件unbind函数
- 移除按钮以前注册的事件
- 移除其中一个事件
-
模拟操作
-
常用模拟
- $('#btn').trigger('click')
- $('#btn').click();
-
触发自定义事件
- 先为元素绑定一个diy名字的事件
- 再用trigger模拟触发事件
-
传递数据
- 先为元素绑定一个diy名字的事件并在函数上加参数
- 再用trigger模拟触发事件
-
执行默认操作
- trigger()方法触发事件并执行浏览器默认操作
- 指向触发绑定的focus事件对应函数不想执行默认操作得到焦点
-
bind高级其他用法
- 绑定多个事件类型
- 添加事件命名空间.便于管理
- 相同事件名称有不同命名空间的执行方法
-
jQuery中的动画
-
show()和hide()方法
-
show()显示元素
- 让元素动起来加参数
-
hide()隐藏元素
- 让元素动起来加参数
-
fadeIn方法和fadeOut()方法
- fadeIn()按不透明度显示元素
- fadeOut()按不透明度隐藏元素
-
slideUp()和slideDown()方法
- slideUp()只改变元素高度收缩隐藏
- slideDown()只改变元素高度展开显示
-
animate()自定义动画函数
- 写在备注里了
-
停止动画和判断是否处于动画状态
- 停止动画stop(布尔值1.布尔值2)
- 判断是否在动画状态is(":animated")
- 延迟动画delay(时间)
-
其他动画方法
- toggle(时间.回调函数)
- slideToggle(时间)
- fadeToggle(时间)
- fadeTo(时间)
-
动画方法概括
- 上面所有的函数都可以用animate来代替
-
动画队列
- 一组元素的动画效果
- 多组元素的动画效果
-
视频展示效果实例
- find("div.mabt")
- $(#mabt).width();
- $('#mabt').length
- Math.ceil('6.2')
- eq()等于
- siblings()
- $('.mabt').is(":animated")
- js中"+"号是连字符
- javascript中的动画效果跟CSS密不可分
-
jQuery对表单表格的操作
-
表单应用
- 单行文本框应用
-
多行文本框应用
- 高度变化
- 滚动条高度变化scrollTop
- 复选框应用
-
下拉框应用
- $('.mabt').appendTo('#mmm')
- $('.mabt').db1click()
- $("option:selected",this)
-
表单验证
- 先blur元素失去焦点就判断数据合法性
- 再判断是用户名还是电话还是邮箱等等
- keyup事件
- focus事件
-
表格应用
-
表格变色
- 普通的隔行变色
- 包含"王五"的行
-
单选框控制表格行高亮
- 先为表格行添加单击事件
- 然后给单击的当前行添加高亮样式
- end()
-
复选框控制表格行高亮
- 先判断是否选中已经高亮了
- 如果没有高亮
- 表格展开关闭
- 表格内容筛选
-
其他应用
- 网页字体大小
- 网页动态切换内容块
- 网页换肤
-
jquery与Ajax的应用
-
Ajax的优势和不足
-
优势
- 不需要插件支持
- 优秀的用户体验
- 提高web程序的性能
- 减轻服务器和带宽的负担
-
不足
- 浏览器对XMLHttpRequest对象支持度不够
- 破坏浏览器前进后退按钮
- 对搜索引擎支持不足
- 开发和调试工具的缺乏
- Ajax的XMLHttpRequest对象
-
传统javascript编写Ajax方式
- 定义一个函数来异步获取信息
- 声明一个对象var a=null确保为空
- 根据浏览器类型判断赋值XMLHttpRequest对象
- 使用open()方法初始化XMLHttpRequest对象
- 判断readyState状态==4
- a.readystatechange=定义回调函数
- 使用send()方法发送请求
-
jquery中的Ajax
-
$.ajax()
-
只有一个参数
- url类型string
- type类型string
- timeout类型number
- data类型Object或string
- dataType类型string
- xml
- html
- script
- json
- jsonp
- text
- beforeSend类型function
- complete类型function
- success类型function
- error类型function
- global类型boolean
- 相关例子等价$.get/$.getScript
-
load()
- 载入html文档
- 筛选载入html文档
- 传递方式
- 回调参数(3个参数)
-
$.get()
- 使用参数
- 回调函数
-
数据类型格式
- html片段
- xml文档
- json文件
- jsonp格式
-
$.post()
-
与get方式不同之处
- get请求会在url中显示
- get方式对数据大小有限制2kb
- get请求数据会被浏览器缓存起来
- 在php调用$_GET$_POST方式不一样
- $.getScript()
- $.getJSON(json文件.回调匿名函数)
- $.each()遍历对象和数组
-
序列化元素
- serialize()方法
- serializeArray()
- $.param()它是serialize方法的核心
-
jquery中的ajax全局事件
- $('#loading').ajaxStart(匿名函数)
- $('#loading').ajaxStop(匿名函数)
- $('#loading').ajaxComplete(callback)
- $('#loading').ajaxError(callback)
- $('#loading').ajaxSend(callback)
- $('#loading').ajaxSuccess(callback)
-
基于jquery的ajax聊天室程序
- 基本思想
- 设计数据库
- 服务端处理
-
客户端处理
- 提交用户聊天信息并处理服务器返回的聊天信息全部呈现出来
- 每隔几秒发起查询数据库然后返回最新的聊天信息
-
jquery插件的使用和写法
-
常用插件介绍
- jquery表单验证插件Validation
- jquery表单插件Form
- 模拟窗口插件SimpleModal
- 管理Cookie的插件Cookie
- jquery UI插件
-
编写jquery插件
-
jquery插件分3种
- 封装对象方法的插件
- 封装全局函数的插件
- 选择器插件
-
插件的基本要点
- 插件命名推荐jquery.插件名.js
- 所有对象方法都应附加到jquery.fn对象上
- 在插件内this指向选择器获取的jquery对象
- 可以通过this.each来遍历所有元素
- 所有方法函数插件都应当以分号结尾
- 插件应返回一个jquery对象.以保证插件的可链式操作
- 避免在插件内使用$符号应使用完整的jquery来表示
- 插件中的闭包
-
jquery插件的机制
- jquery.fn.extend()方法
- jQuery.extend()方法
-
编写jQuery插件
- 封装jQuery对象方法的插件
- 封装全局函数的插件
- 自定义选择器
-
用jQuery打造个性类淘宝网站
-
网站结构
- 图片
-
样式表
- 先编写全局样式
- 编写重用的样式
- 编写主题内容样式
-
javascript脚本
- 先确定完成哪些功能
- 再根据功能写代码实现
-
jQuery Mobile
- HTML5简介
-
web设计
- 结构层
- 表现层
- 行为层
-
jQuery mobile主要特性
- 基于jQuery构建
- 兼容大部分手机平台
- 轻量级库.模块化结构
- html5标记驱动的配置
- 渐进增强原则和自适应响应设计
- 强大的ajax的导航系统
- 易用性
- 统一的ui组件
- 强大的主题化框架
-
使用jQuery mobile
-
使用jQuery mobile必备的3个文件
- jquery.mobile.css
- jquery.js
- jquery.mobile.js
-
data-role属性
- date-role属性很多值
- data-inset="true"
- data-theme="e"
-
其他框架
-
移动框架
- jqMobi
- sencha touch
- zepto.js
- PhoneGap
- jQuery各个版本的变化
-
jQuery性能优化技巧
-
jQuery性能优化
- 使用最新版本的jQuery库
- 使用合适的选择器
- 缓存对象
- 循环时的DOM操作
- 数组方式使用jQuery对象
- 事件代理
- 将自己的代码转化成jQuery插件
- 使用join()把数组转化为字符串
- 合理利用html5的data属性
- 尽量使用原声的javascript方法
- 压缩javascript文件
- jQuery技巧
-
附录总结
- 附录A 关于$(document).ready()函数
- 附录B Firebug
-
附录C Ajax的XMLHttpRequest对象的属性和方法
-
readyState属性
- 0 未初始化状态
- 1 准备发送状态.此时刚调用open()方法准备发送请求到服务器
- 2 已发送状态 此时通过send()方法把一个请求发送到服务器但还没有收到回应
- 3 正在接收状态 已经收到http响应头部信息但是还没有完成
- 4 完成响应状态 此时已经完成了httpResponse响应的接收
- responseText属性
- responseXML属性
- status属性
- statusText属性
- onreadystatechange事件
- open()方法
- send()方法
- abort()方法
- setRequestHeader()方法
- getRequestHeader()方法
- 附录D jQuery $.ajax()方法的参数详解
-
附录E jQuery加载并解析XML
-
XML简述
- 任何起始标签都必须有一个结束标签
- 可采用简化语法
- 标签必须按照合理的顺序进行嵌套
- 所有的属性都需要有值且需要在值周围加上双引号
- Content-Type
-
XML结构
- xml结构必须是封闭的
- XML文档只能有一个顶层元素
- 获取XML
- 解析XML
- 禁用缓存
- 附录F 插件API
- 附录G jQuery 速查表