http://bbs.miaov.com/forum.php?mod=forumdisplay&fid=40
2014.10.10
jquery 2.0 不兼容ie 6 7 8,以上更适合做移动端开发，代码更少1.js对于集合 document.getElementByTagName('div')[0] 只有一个div的情况
2.$==jQuery 用jQuery是为了防止冲突 起了两个这样的名字
3.jq () 中参数问题 html() css()等
()没有参数就是获取,有参数就是赋值，设置,参数的个数决定 常用的设置获取赋值方法有attr() val()4.多元素进行取值只能取到第一个元素的值5.***** 属性选择： $('input[value=123]') 也可以写成$('input[class="123 456"]')两个的时候用"" $('input[value^=123]')起始位 $('input[value$=123]')末位 $('input[value*=123]')通配6.链式操作基本都是设置7.命名规范，如果是jq对象就用$开头 例如 var $oDiv=$("#div1") 原生的就直接不用$ 例如 oDiv=document.getElementById("#div1")
8.jq的容错性比较好，当元素不存在的时候 进行设置也不会报错，同时对于我们开发找出问题也很麻烦
$('#span').html() $("#span")不存在也不会报错9.集合的长度 .size() * 相当于原生的 length ***** $("div").size() 等于$("div").length jq的集合 即使只有一个的时候 也有length, 原生的只有一个元素的情况没有length $("#div1").length 10.***class操作 addClass('box2 box3') removeClass('box2 box3') toggleClass('box2') 智能判断添加删除class *****智能设置显示隐藏 show() hide() var oBtn=true $('input').click(function(){ if(oBtn){ $("div").hide() }else{ $("div").show() } oBtn=!oBtn //条件走完了改变条件 实现点击显示隐藏 })20.兄弟节点 prev() next() prevAll("筛选元素")上边所有的 nextAll("筛选元素") siblings("h2")所有的兄弟节点
------------------------------------------------------------------------------------------------10.121.slice(起始位置，结束为止) 截取集合
如果只有一个 参数就是截取起始位置到最后2.children() 子元素 ，不能获取孙子及以后的节点 | 可接受过滤筛选的参数
3.find()查找的范围更加广泛，使用更加频繁| 如果不用find() 可以直接用 $("ul p")这种方法来找子节点 | 但是推荐用find(),因为性能更高，因为css选择器的方法是从右 到左来找的
4.parent() 父节点 | parents()所有祖先节点，父节点以及以上的
5.*****closest() 找指定的最近的一个祖先元素(包括自身)，必须要接收一个参数（只能选到唯一的元素），离他最近的元素的条件
6.创建元素 | js document.createElement("div") | jq $("<div>") $('<div id="div1"></div>')
7.append() 把元素添加到指定的节点里面的最后 在里边 n. A.append(B) A里面的最后是B
8.prepend() 把元素添加到指定的节点里面的最前面 在里边
9.before() 把元素添加到指定的节点的前面 在外边
10.after() 把元素添加到指定的节点的后面 在外边
11.appendTo() v. A.appendTo(B) 把A添加到B的最后
n. 和 v.的区别是对后续操作的影响不一样12.remove() 原生js是removeChild(oDiv)13.clone()节点的复制操作 A.clone() | 参数true 会克隆操作事件
14.index()
第一种 方法：兄弟中的排行 ，索引值 第二种方法：筛选后的排行，针对非兄弟关系的节点 $("#span1").index("span") 首先找到#span1 ,然后在所有的span中排序，也可以倒过来写 $('span').index($('#span1'))15.each(function(i,elem){ $(elem).html(i) ; return false}) i索引值 elem 操作的元素,就是this，原生的元素|return false 跳出 相当于js的break
16.wrap()
-----------------------------------------------------------------------------------------------------------------------
10.161.jq获取元素的尺寸 width() height()
获取： width() --->width innerWidth() --->width+padding innerHeight()同理 outerWidth() --->width+padding+border outerHeight()同理 outerWidth(true) --->width+padding+border+margin **获取和设置都是组合 设置： width(200) outerWidth(200,true)--->width:200-padding-border-margin js获取尺寸 获取不到隐藏元素的尺寸,jq可以获取隐藏元素的尺寸 obj.offsetWidth --->如果obj是display="none"的话 是获取不到它的尺寸的 jq获取可视区的尺寸 $(window).height() ----->jq可视区的尺寸 $(document).height()----->页面的高2.滚动距离: 获取： scrollTop() $(document).scrollTop()---->整个页面的滚动距离 $(document).scrollTop()=$(document).height()-$(window).height() $('#div1').scrollTop() --->获取元素的滚动距离 设置： $(document).scrollTop(300) //设置页面的滚动距离300 scrollLeft()3.元素距离
offset().left --->元素距离屏幕左边的距离，相对于整个页面的，不是可视区的,不管有没有定位 offset().top --->元素距离屏幕上边的距离，相对于整个页面的，不是可视区的,不管有没有定位 position().left--->距离到有定位的祖先节点，不认margin值 js 的 offsetLeft 定位到祖先节点offsetParent()--> 获取有定位的祖先节点，相对定位的父级
通常想获取 内部元素距离 父亲节点的距离 可通过 obj.offsetParent().offset().left-obj.offset() 来获取$(window).scroll()
4.jq事件 on('click mouseover',function(){})-->可以同时绑定多个事件 off()取消元素上的所有事件，off('mouseover')可设置过滤条件5.ev事件 ev.pageX 鼠标的横坐标，相对于整个页面 ev.pageY ev.clientX 鼠标相对于可视区的坐标 ev.clientX which 键盘的键值 obj.keydown.function(ev){ ev.which } ev.target 目标元素，事件源，鼠标点在哪里就弹出什么 $(document).click(function(ev){ alert( ev.target );弹出的是当前元素，不是window }) ev.stopPropagation()--->阻止事件冒泡 $(document).contextmenu(function(ev){ ev.preventDefault()-->阻止鼠标右键阻止默认事件 }) return false 阻止冒泡和默认事件6.$('ul').delegate('li','click',function(ev){
$(this)--->li $(ev.delegateTarget) 指的是委托人 $('ul') }) delegate()对于动态添加的元素同样适用 取消委托绑定 undelegate() 取消的是委托人身上的事件 $(ev.delegateTarget).undelegate()7.$.isFunction()判断是否是函数 $.isNumeric()判断是否是数字 $.isArray()判断是否是数组 $.isWindow() var a=window; alert( $.isWindow(a) ) -->true $.isEmptyObject() var a={}; alert( $.isEmptyObject(a) ) -->true $.isPlainObject() 对象自变量 http://www.cnblogs.com/snandy/archive/2011/03/14/1982016.html --------------------------------------------------------------------------------------------------- 10.191.运动 normal 400毫秒 fast 200毫秒 slow 600毫秒 show('normal') = show(400)2.toggle() fadeToggle() slideToggle() fadeIn() 淡入 fadeOut() 淡出 slideDown() slideUp()3.animate( {width:300,height:400}, // 第一个参数{} 去设置样式属性和值 2000, // 第二个参数 时间，默认400 'linear', //第三个参数运动形式 swing(默认缓冲，慢快慢),linear(匀速) function(){} //第四个参数 函数function() 运动结束的回调 ) width:'+=300' 第一个参数可以数值运算，每次点击都加300px 第二种写法：配置参数step animate({参数一},{参数2,参数3,参数4}) animate({width:300},{ duration:1000, easing:'linear', complete:function(){ }, step:function(a,b){//检测定时器的每次变化 console.log(b.pos) //运动过程中的比例值 0-1 } }) 4.delay() 延迟 animate({width:300},1000).delay(1000).animate({height:300},1000) 5.stop()默认停止当前运动，清空前面的队列 stop(true) 停止所有的 stop(true，true) 停止到指定目标点(当前的) finish() 所有运动停止到指定目标点 6.工具方法 $.parseJSON() 把json类型的字符串转为真正的json安全性好，只能解析json类型的字符串,要严格的json key值和value值要加"" var aaa= '{"a":"111","b":"222"}'; $.parseJSON(aaa) $.parseHTML() 转化html形式的字符串为Dom节点，然后把dom节点放到数组中 var aaa="<div>div</div><span>span</span>" var bbb=$.parseHTML(aaa) bbb是个数组[div,span] $.parseXML() $.ajax() //提交数据，查询数据 url success type data:{"username":obj.val()} error dataType：'json', //程序会自动将后端返回内容转化为json类型，如果不规定，则在success函数中通过 $.parseJason()方法来转 async:false //同步，先走完一个再走后面的，默认是异步的 10.26 第六课 1.清空内容 obj.html('') obj.empty() 2.删除节点 obj.remove() obj.detach()