js jq基础知识

js、jq初始化页面

js

1. body元素上 onload js初始化的方法
2. 在脚本里使用window.οnlοad=function(){}
3. 脚本写初始化方法，页面顺序执行到初始化方法时开始初始化页面

jq初始化页面

1. $(document).ready(function(){}) === $(function(){}} 注意与window.onload的区别（前者可多个，后者仅一个）
2. jQuery(function($)){}

总结：js页面全部加载完（包括图片以及外部资源）加载完才可以执行初始化加载
jq等页面的DOM结构加载完就初始化数据

以下部分为锋利的jQuery读后总结

第一章： 认识jQuery

1.jQuery轻量级js库，强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性、链式操作。
2.DOM对象：文档对象模型。 JQuery对象：通过jQuery包装后Dom对象产生的对象。
jq对象转为DOM对象 [index]/get(index)
DOM对象转为jq对象 包装下（即用jQuery包装下）
3.解决jQuery和其他库的冲突
jq库在其他库之后引入： A: jQuery.noConflict()交出控制权，在用jQuery B: 交出控制权后，jQuery(function($){})
jq库在其他库之前引入：不交出控制权，直接用jQuey

第二章：jQuery选择器

1. css选择器： 标签、ID、类、群组、后代、通配符(兼容可以) 、伪类、子选择、临近、 属性(兼容性不太好)
2. jq选择器好处： 写法简洁，支持css1-css3，完善时间处理机制（获取网页不存在元素不会报错，判断元素存在，需要用长度去判断）
3. jq选择器： 基本类(#id .class ele * selector)、层次选择器($("parent>child")、$(“pre + next”))、过滤选择器(:first :not(selector) :even :eq(0) :gt(10) :lt(10) :focus)、内容选择器(:contains(xx) :empty() :has(xx) :parent())、可见性选择器(:hidden :visible)、属性选择器([xx])、子元素过滤选择器(:first-child :ntn-child)、表单对象属性过滤(:enabled :disabled :checked :selected)、表单选择器(:input :text :radio :checkbox …)
4. parent() parents() closet()区别 parent()获取集合中每个匹配元素的父级元素 parents()获取集合中每个匹配元素的祖先元素 closet()从元素自身逐渐向上匹配最先匹配上的元素

第三章： jQuery中DOM操作

1. 分为DOM Core(document.getElementById())、 HTML-DOM(document.form)、CSS-DOM(element.style.xx = xx)三方面
   2.jq的DOM操作 查找节点(元素、属性)、创建节点(元素、属性、文本)、插入节点(append()/appendTo()、prepend()/prependTo()、 after()/insertAfter()、before()/insertBefore())、删除节点(remove() detach() empty() detach会将所绑定的事件和附加数据保留下来)、复制节点(clone())、替换节点(replaceWith()/relaceAll())、包裹节点(wrap() wrapAll())、属性操作(attr() removeAttr())、样式操作(addClass() removeClass() toggleClass() hasClass() is())、设置/获取html 文本 值(html() text() val())、遍历节点(children() next() prev() siblings() closet())

第四章 jQuery中事件和动画

1. 加载DOM （见第一章）
2. 事件绑定 bind(type, [,data], fn) type的类型有： blur、focus、load、resize、scroll、unload、click、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup。
3. click、mouseover、mouseout常用事件有简写形式，去掉bind
4. 合成事件： hover(enter, leave) toggle(fn1,fn2,…)
5. 事件冒泡：事件按照DOM层次结构像水泡一样不断向上直至顶端。 事件对象：IE-DOM和标准DOM实现事件对象方法各不相同，导致不同浏览器获取事件对象比较困难。因此，jQuery在事件函数的参数中添加一个event，事件处理完后，event就被销毁。 停止事件冒泡： event.stopPropagation()。 阻止默认行为：event.preventDefault() / return false。事件捕获：jQuery不支持事件捕获。 事件对象的属性： event.type event.stopPropagation() event.preventDefault() event.target(获取触发事件的元素) event.pageX/Y(光标相对页面的X/Y坐标) event.which(鼠标单击事件中的左，中，右键)
6. 移除事件： unbind()
7. 模拟操作： trigger() 可以是常用事件类型，也可以是自定义事件，同时可以传递数据
8. 其他方法： bind同时绑定多个事件、添加事件命名空间
9. jq动画： show()/hide() fadeIn()/fadeOut() 透明度 slideUp()/slideDown() 改变元素高度进行隐藏显示 3种速度 slow normal fast为0.6s、0.4s、0.2s
10. 自定义动画：animate(params,speed,callback) 多层动画按顺序执行(多个animate) callback适用于jq所有的动画效果方法。
11. 停止动画 stop() 是否处于动画状态 is(":animated") 延迟动画delay()
12. 其他四个交互动画 toggle(speed, callback) slideToggle(speed,[easing],[callback]) fadeTo(speed,opacity,[callback]) fadeToggle(speed,[easing],[callback])

第五章 jQuery对表单、表格的操作以及更多应用

表单标签 处理表单数据所存服务器url和提交方法 action ，method
表单域
表单按钮
表单验证

第六章 jQuery与Ajax的应用

1. ajax优势：不需要插件、优秀的用户体验（几部刷新）、提高web程序性能（按需发送）、减轻服务器带宽负担。 不足：浏览器对XHR睡醒支持不够、破坏浏览器前进后退的正常功能、seo支持不足、开发调试工具不足
2. XMLHttpRequest对象 发送异步请求、接收响应、执行回调

if(window.ActiveXObject) {  //IE5   IE6
	xmlHttpReq = new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest) {
	xmlHttpReq = new XMLHttpRequest()
}

3. 步骤 open() send() onreadystatechange readyState status responseText
4. jQuery中的ajax $.ajax()最顶层 第二层是load() $.get() $.post()