jq 笔记

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.12

1.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.16

1.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.19

1.运动 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()