- jQuery是JavaScript的函数库，包含HTML元素选取、操作，CSS操作，HTML事件函数，JavaScript特效和动画，HTML DOM遍历和修改，AJAX,Utilities
- Google/Microsoft CDN加载
$(document).ready(function(){ });加载完文档运行函数- jQuery使用
$符号作为jQuery的简写，其他库也使用$符号就需要noConflict()来解决该问题，var jq = jQuery.noConflict();用jq来代替$ $(selector).hide/show(speed,callback);toggle()隐藏显示
- speed参数取值 “slow”、”fast”、毫秒fade(In/Out/Toggle)(speed,callback)fadeTo(speed,opacity,callback)可以给定不透明度 淡入淡出slide(Down/Up/Toggle)(speed,callback)上下滑动animate({params},speed,callback)动画 可以操作所有CSS属性，但必须使用Camel(驼峰)标记法书写所有属性名stop(stopAll,goToEnd)stopAll是否清除动画队列，默认flase,goToEnd是否立即完成动画 默认flase 停止任何动画或效果- 相同元素上的动画可以链接起来
- DOM操作
-text()设置或返回选择元素的文本内容，
-html()设置或返回选择元素的内容(包括HTML标记)，
-val()设置或返回表单字段值，
-attr()设置或返回属性值，
- 以上函数均可有回调函数，两个参数为列表中当前元素下标和原始值origValue
-append()/prepend()/after()/before()也可以添加若干新元素
-remove()/empty()删除被选元素及子元素(接受一个参数)/删除子元素 - 操作CSS
-addClass()/removeClass()/toggleClass()/css() - 处理尺寸
-width()/height()元素宽高，不包括内边距、边框、外边距，有参数为设置
-innerWidth()/innerHeight()包括内边距
-outerWidth()/outHeight()包括内边距和边框，参数为true返回值
-$(document/window).width()返回文档/浏览器视口的宽 遍历
-parent()/parents()/parentsUntil()直接父元素/所有父元素一直到文档根节点<html>/两个元素之间的祖先元素
-children()/find()直接子元素/后代所有元素
-siblings()/next()/nextAll()/nextUntil()/prev()/prevAll()/prevUntil()同胞元素
-first()/last()/eq()/filter()/not()索引从0开始/返回匹配的/返回不匹配的和filter()相反
-bind()匹配元素附加事件处理器详细：
- 1. jQuery对象和DOM对象及解决和其他库的冲突
var $variable = jQuery对象;
var variable = DOM对象;
jQuery对象转DOM对象
两种方法[index]和get(index)
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
DOM对象转jQuery对象
只需要把DOM对象用$()包裹起来
var cr = dcoument.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象
jQuery库在其他库之后倒入，需要调用jQuery.noConflict()来将变量$控制权转移,也可以自己定义一个快捷方式，如$j = jQuery.noConflict();这样就用$j代替了$。相反，jQuery库在之前调入就无需这么做
- 2. jQuery选择器
- 基本选择器
-#id.classelement*selectot1,selector2,...,selectorN
$(this)获取当前的HTML
- 层次选择器
-$("ancestor descendant")选取ancestor的所有descendant(后代)元素
-$("parent>child")选取parent的child元素(直接子元素)
-$("prev+next")选取紧跟在prev元素后的next元素 等价$("prev").next("next")
-$("prev~siblings")选取prev元素之后的所有siblings元素(兄弟，在自己的后面) 等价$("prev").nextAll("siblings")
- 过滤选择器
- 基本过滤选择器
:first:last:not(selector):even:odd:eq(index):gt(index):lt(index):header:animated:focus
:hearder获取的网页中的标题<h1>...<h6>
:animated当前正在执行的动画
- 内容过滤选择器
:contains(text):empty:has(selector)
:parent获取含有子元素或者文本的元素(包括文本元素)
- 可见性过滤选择器
:hidden包括样式属性display:none;和<input type="hidden">
:visible
- 属性过滤选择器
[attribute][attribute=value][attribute!=value]attribute^=valueattribute$=valueattribute*=valueattribute|=valueattribute ~=value[att][att][...]
|选取value为前缀(或后面跟一个”-“连字符)的元素~用空格分隔的值中包含value的元素
- 子元素选择过滤器
-:nth-child(index/even/odd/equation)index从1算起，例如3n+1时，n从1开始
-:first-child:last-child
-:only-child某个元素是它父元素的唯一一个子元素
- 表单对象属性过滤选择器
-:enabled:disabled:checked
-:selected下拉列表中被选中的元素
- 表单选择器
-:input所有<input> <textarea> <select> <button>元素
:text:password:radio:chexkboxsubmit:image:reset:button:file:hidden
- 3. jQuery中DOM对象的操作
- 查找节点
- 元素节点jQuery选择器,属性节点attr()
- 创建节点
- $() jQuery工厂函数，里面插入HTML标记字符串
- 插入节点
-append()prepend()after()before()insertBefore()
-appendTo()$(A).appendTo(B) 将A追加到B中
-insertAfter()$(A).insertAfter(B) A插入到B后面
- 删除节点
-remove()后代节点将同时被删除，返回值指向一个已经被删除的节点的应用，可以在以后再使用这些元素，绑定事件将失效
-detach()与remove()不同的是所有绑定，附加的数据都会保留下来
-empty()严格来说，不是删除节点而是清空节点，包括后代元素
- 复制节点
-clone()该方法中传递一个true参数，复制元素中的所绑定的事件
- 替换节点
-replaceWith()匹配元素替换成指定的HTML或DOM元素$("p").replaceWith("<h1>a</h1>")
-replaceAll()颠倒replaceWith()操作
- 包裹节点
-wrap()$(strong).wrap("<b></b>")用<b>把<strong>包裹起来，单个单个包裹
-wrapAll()同时包裹多个
-wrapInline()包裹元素的内容
- 属性操作
-attr()获取或设置元素属性removeAttr()删除元素属性
- 样式操作
-addClass()追加类removeClass()删除类，指定的或者全部toggle()toggleClass()is()判断是否存在，是hasClass()的增强
- 设置获取HTML
-html()获取或设置HTML内容text()获取或设置文本内容val()设置或获取元素的值 defaultValue属性包含表单元素的初始值
- val()另一个用处就是它能使select，checkbox,radio相应的选项被选中
- 遍历节点
-children()取得匹配元素的子元素的集合，不考虑后代
-next()紧邻的同辈元素prev()siblings()同辈元素
-closest()最近的不匹配返回自身parens()parents()
-
\- CSS-DOM操作
\- 读取设置`style`对象的各种属性，无法通过外部CSS文件设置，数字自动转像素
\- `width()` 获取元素的宽\(px\) `height()`
\- `offset()`当前视窗的相对偏移 `position()`与最近的position属性设置为relative或absolute的祖父节点的相对偏移
\- `scrollTop()` `scrollLeft()` 获取滚动条距离顶端或左侧的距离
\-
- 4. jQuery中的事件和动画
- 事件
- 记载DOM
-$(document).ready()可以多次执行，在现有行为上追加 DOM加载完就可以访问window.onload要加载完所有元素 多次调用会覆盖
- 事件绑定
-bind(type[,data],fn)blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,err或自定义
- 简写$("p").click(function(){})减少代码量
- 合成事件
-hover(enter,leave)鼠标移动到元素上会触发enter函数,离开leave函数toggle(fn1,fn2,...,fnN)模拟连续单击事件
- 事件冒泡
- 事件对象只要为函数添加一个参数(event),事件发生时事件对象被创建，只有事件处理函数能访问，事件处理完对象被销毁，事件方法stopPropagation()来停止事件冒泡。preventDefault()方法阻止默认行为，像单击链接后就会提交，单击提交后表单会提交。同时阻止对象事件冒泡和默认行为，可以在事件处理函数返回false
- 事件的对象属性
-event.type获取事件的类型event.stopPropagation()event.preventDefault()event.target事件对象event.pageXevent.pageY光标相对于页面的x,y坐标enent.witch获取鼠标单击事件鼠标的左中右键(对应1,2,3)event.metaKey获取<ctrl>按键
- 移除事件
-unbind([type],[data])可以删除全部或某一个
-one(type[,data],fn)触发一次立即被删除
-on(type[,data],fn)事件绑定，加载完页面绑定也有作用off()
-delegaet()undelegate()
- 模拟操作
-trigger(type[,data])不需要主动单击 触发一个自定义myClick
- 其他用法
-bind("f1 fnN",function(){})绑定多个方法
- 动画
-show(["slow"]["fast"][ms])hide()fadeIn()fadeOut()slideUp()slideDown()
-animate(params,speed,callback)累加，累减 在animate()中只要在变的值的数值前加+=例如animate({left: “+=50px”,height: “-=20px”},300); 链式animate()按顺序执行，回调函数对非动画方法排队
- 停止动画stop([cleanQueue],[gotoEnd])参数均为Boolean,代表是否清空未执行完的动画队列，直接跳到末状态delay(ms)延迟动画
-toggle(speed,[callback])slideToggle(speed,[easing],[callback])fadeTo(speed,opacity,[callback])fadeToggle(speed,[easing],[callback])
- 5. 表单，表格操作
- 滚动条上下按钮先要判断是否在有动画 复选框判断checked是否为true来判断是否选中 require属性为必填
- 6. jQuery和Ajax的应用
- Ajax最大好处能在不刷新整个网页前提下更新数据 不足：破坏前进 后退按钮 SEO支持不足
- Ajax
var xmlHttpReq =null;
if(widow.ActiveXObject){
xmlHttpReq = new ActiceXObject("Microsoft.XMLHTP");
}else if(window.XMLHttpRequest){
xmlHttpReq = new XMLHttpRequest();
}
xmlHttpReq.open("GET","index.html",true);
xmlHttpReq.onreadystatechange = RequestCallBack;
xmlHttpReq.send(null);
jQuery中的Ajax
load(url[,data][,callback]); //没data参数传递，采用GET方式,从Web服务器获取静态的 数据文件
$.get(url,[.data][.callback][,type])/$.post() 进行异步请求，type参数为服务器返回的格式/
$.getScript()/$.getJson()
$.ajax(options) 参数：`url`默认当前页地址 `type` GET/POST/PUT/DELETE `timeout`请求超时 `data`发送的服务器数据 `dataType`预期服务器返回类型 `beforeSend`函数，修改XMLHttpRequest对象函数 `complate`请求完成后调用的回调函数 `success`请求成功后回调函数 `error`请求失败被调用函数 `global`默认true触发全局Ajax事件
serialize()表单序列化元素，DOM序列化为字符串serializeArray()DOM序列化返回JSON格式数据 $.param() 对一个数组或对象按照key/value进行序列化
ajaxComplete(callback)/ajaxError(callback)/ajaxSend(callback)/ajaxSuccess(callback)Ajax请求完成时/发生错误/请求发送前/请求成功时
- 7. jQuery插件
- 1. jQuery表单验证插件-Validation
- 2. jQuery表单插件-Form
- 3. 模态窗口插件-SimpleModal
- 4. 管理Cookie插件-Cookie
- 5. jQuery UI插件
- 8. jQuery Mobile
区别
attr()/prop()两者皆获取匹配元素集合中的第一个元素的属性，或为匹配元素设置一个或多个属性，但主要关键是源码中实现的两个部分 前者和后者的关键代码为
elem.setAttribute( name, value + "" );ret = elem.getAttribute( name );和
return ( elem[ name ] = value );return elem[ name ];
可以参考改图得出结论就是boolean属性的值我们可以通过prop()来操作，其他用attr()
