jQuery理念:write less, do more!
第 一 章
一:jQuery简介
a:轻量级
b:强大选择器
c:DOM封装
d:ajax封装
e:不污染顶级变量 只建立一个jQuery对象:所有的方法都在这个对象下!
f:解决了浏览器的兼容性问题
g:行为和结构的分离
h:丰富的插件
二:语言环境的配置
a:在页面中导入即可!
三:jquery对象和DOM对象
jquery对象——》DOM对象: 将jquery对象看成一个数组!
DOM对象——》jquery对象: $(dom对象) 包装下即可
$():jquery对象的制造工厂
第 二 章 jQuery选择器
四:选择器 (jquery的重中之重) 超NB
a:css选择器找到元素添加样式,jquery选择器找到元素添加行为!
b:在jquery中使用的css选择器拥有跨浏览器的兼容性!
c:过滤选择器
1.基本过滤选择器
2.内容过滤选择器
3.可见性过滤选择器
4.属性过滤选择器
5.子元素过滤选择器
6.表单对象属性过滤选择器
五: $('#id\#b') // 转义特殊字符 “#”
六:a标签的href属性跳转可以用jquery覆盖掉! 就是说jquery执行的优先级比a标签默认的href属性高!
七:jquery选择器是可以扩展的! 给jquery装插件!
第 三 章 jQuery中的DOM操作
八:DOM
a:是一种与浏览器、平台、语言无关的接口。
b:分为DOM Core、HTML-DOM、CSS-DOM
c:节点:文档节点、元素节点、文本节点、属性节点、注释节点
DOM操作
a:增 先创建节点,再插入节点。
clone()复制节点,再插入! 若要复制节点具备原来节点的事件(clone()方法参数里写true)。
b:删 remove()方法、empty()方法
c:改 替换 包裹 移动
d:查
f:替换 replaceWith() replaceAll()
g:包裹 wrap() wrapAll() wrapInner()
f:属性的设置、获取、删除 attr() attr('','') removeAttr('');
h:样式的操作 addClass() removeClass() toggleClass() hasClass()
i:html() text() val()
j:遍历 children() next() prev() siblings() closest()
CSS-DOM
a: css() offset() position() scrollTop() scrollLeft() (这里需要强化)
第 四 章 jQuery中的事件和动画
1.合成事件:hover() toggle()
2.冒泡 和 捕获
(3).事件对象event的属性:event.type event.preventDefault() event.stopPropagation()
event.target event.pageX event.pageY event.which
4.bind() unbind() one()
5.模拟操作: 直接激活事件 $('元素').trigger('事件名')
$('元素').click()
6.触发自定义事件:
<script>
$('#btn').bind('myClick',function(){
$('#test').append('<p>我的自定义事件</p>');
})
$('#btn').trigger('myClick'); // 触发这个事件
</script>
第 五 章 jQuery对表格和表单的操作
1.is(":animated") 判断是否处于动画队列. jQuery操作的都是jQuery对象!
2.each() 和each(i)
3.表单验证:阻止非法的提交! 安全吧!
所以一般怕用户无视输入框的错误提醒,执意提交表单,所以可以在submit按钮上设置判断; 若输入不合法,则表单不应该被提交哦!
So,输入框输入的时候有判断,点击提交button的时候也有判断! 两次前段验证哦!
就那几种事件:keyup focus blur
第六章 AJAX
1. 传统模式:数据提交是通过表单来实现的。数据获取是全页面刷新。 锁住浏览器。
ajax模式: 数据按需发送, 页面局部刷新。 异步。数据的渲染到了前端,减轻服务器负担。
XMLHttpRequest对象:javascript内置对象; 发送异步请求、接受响应、执行回调。
浏览器:渲染引擎和js引擎。
封装:$.ajax() (最底层)
$.load() $.get() $.post()
$.getScript() $.getJSON() 第三层
get方法:无参数 post有参数 data
xml:web服务领域的世界语!
get:参数在url后进行传递。
数据传输大小有限制。
请求的数据会被浏览器缓存。 不安全。
post:参数作为http消息的实体内容。
数据传输大小没有限制。
$.each(): 不同于jquery对象的each()方法。 全局函数!
JSONP:ajax跨域!
序列化:存储和传输!
全局ajax事件:ajaxComplete ajaxError ajaxSend ajaxSuccess
Cookie: 是网站设计者放置在客户端的小文本文件。 浏览器关闭不删除的。
session cookie:浏览器关闭后删除。
第七章
1. ;(function($){
// 代码
})(jQuery);
2. 多用人家的插件,不要自己再去发明轮子了,除非你有大把的时间哦!
第八章
1.图片合并:减少http请求!
2.stop(true,true): (动画队列清空,正在执行动画跳至末状态)
末尾:
1. 调试程序:alert
2. console.log
Ajax:XMLHttpRequest对象。
jQuery加载并解析XML。