jQuery的使用

一、选择器

$("#id") id选择器
$(“div”) 标签选择器
$(".Class") 类选择器
$(“div.p.a”) 并集选择器

$(“li:odd”) 奇数选择器
$(“li:even”) 偶数选择器
$(“li:eq(0)”) 索引为0选择器

.children(‘li’) 子类
.find(‘li’) 后代
.siblings(‘li’) 兄弟
.parent() 父亲
.eq(0) 索引
.next() 下一个兄弟
.prev() 上一个兄弟
.nextAll() 之后所有兄弟
.prevAll() 之前所有兄弟

$(‘ul>li’)子代的li
$(‘ul li’)所有后代包括孙子

二、常用方法

text(‘内容’) 会覆盖原有内容
css(‘属性名’,‘值’)
css({
“color”:“white”,
“font-size”:“20px”,
});

hide() 隐藏实际上是display：none
show() 显示实际上是display：block

mouseover() 鼠标移动到选取元素及其子元素上都会触发
mouseout() 离开任意子元素都触发

mouseenter() 鼠标移动到选取的指定元素上才触发
mouseleave() 鼠标离开事件离开指定被选元素才会触发

addclass(‘类名’) 给元素添加一个类,多个类用空格
removeclass(‘类名’) 给元素移除一个类，多个类用空格
toggleclass(‘类名’) 切换类有则删无则加
hasclass(‘类名’) 判断类，有返回true无返回flase

三、动画

show(‘normal’,‘回调函数’) 参数一：fast 200毫秒 narmal 默认400毫秒 slow 600毫秒，参数二：回调函数
hide() 隐藏
toggle() 切换

slideDown() 滑入向下
slideUp() 滑出向上
sideToggle() 切换

fedeIn() 淡入出现改变透明度
fadeOut() 淡出不见
fadeToggle() 切换
fadeTo(1000,0.5) 淡入到哪，参数一为时间，参数二为透明度

以上方法参数同上

自定义动画
animate()
参数1：必选是一个对象{}一些css属性
参数2：时间（可选）
参数3：linear匀速、swing移动默认(可选)
参数4：回调函数（可选）

停止动画
stop()
布尔值，不写默认flase
参数1：是否清除队列
参数2：是否跳转到最终效果

四、创建元素

创建元素

html('我是a标签<a></a>')
var $link = $('<a href="www.baidu.com">百度</a>')//不会直接出现
父元素.append($link)

添加元素

after()
//A.after(B)把B加到A后面

before()
//A.after(B)把B加到A前面

appendTo()
//子.appendeTo('父')把子加到父后面

append()
//父.appende('子')把子加到父最后

prepend()
//父.prepend('子')把子加到父亲开头

删除元素

empty()
清空元素和事件
如清空ul但ul还在，但ul中的其他元素不在了

remove()
自杀

克隆节点

clone()
//默认flase
//参数true克隆事件,fales不克隆事件，只在内存中

五、操作属性

attr(‘属性名’,‘属性值’) 添加属性

attr({
属性名:‘属性值’,
src:‘a’
})

attr(‘属性名’) 查属性
removeAttr(‘属性名’) 移除属性
removeAttr(‘属性名[空格]属性名’) 移除多个属性

jQ1.7后cheked、selected、disabled这类布尔值属性不能用attr方法只能用prop方法

prep(‘chencked’)
参数1：属性
参数2：布尔值

六、宽高

width()不包括内+外+边框
height()不包括内+外+边框
innerWidth() 包括内
innerHeight() 包括内
outerWidth() 包括内+边框
outerHeight() 包括内+边框
$(window).window() 网页可视宽高

offset() 获取元素在document中left和top距离
position() 获取子元素距离父元素的left和top距离

scrollLeft() 获取元素内容被卷曲出去的宽高
scrollTop()

scrollLeft(217) 设置元素内容被卷曲出去的宽高
scrollTop(217)

$(window).scrollLeft() 获取页面被卷曲的宽高
$(window).scrollTop()

七、on注册事件

on简单注册事件，可注册多个，不支持动态注册
$(‘元素’).on(‘事件名’,‘方法’)
$(‘元素’).on({
‘事件’:方法,
‘事件’:方法
})

on委托注册支持动态注册，该方法的This指向绑定元素
$(‘父元素’).on(‘事件名’,‘绑定元素’,‘方法’)

解绑事件
off() 无参解绑所有事件
off(‘click’) 解绑点击事件

触发器

trigger(‘事件名’)

事件对象

e.screenX 触发事件那一点距离屏幕左上角的值
e.screenY

e.clienX 触发触发事件那一点距离可视区左上角的值
e.clienY

e.stopproPagetion() 阻止事件冒泡
e.preventDefault() 阻止默认行为
return flase 既能阻止冒泡又阻止默认

e.keyCode() 按键编码

.prev() 上一个兄弟
.prevAll() 之前所有兄弟
.next() 下一个兄弟
.nextAll() 之后所有兄弟
.end() 回到上一个状态

遍历jQ对象
each(funcation(index,odj){})

查看jQ版本
$.fn.jquery
jQuery.fn.jquery

多版本共存

var _$ = $.noConflict() 
释放$的使用权并赋给_$，此时jQuery还可以用