jQuery
2017-10-23 本文已影响0人
是叶
-
jQuery整体框架结构
-
JQuery选择器
- 元素选择器
id:通过id属性选取指定元素
.class:通过指定的class查找元素
p:通过标签名选取元素
*:选取所有元素
$("#id")
$(".class")
$("p")
$("*")
- 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("[href]")
$("[href='#']")
$("[href!='#']")
$("[href$='.jpg']")
- CSS选择器
CSS属性获取
$("#div1").css("width")
CSS属性设置
$("#div1").css("width", 200)
$("#div1").css("width", "200px")
$("#div1").css({"width": 200})
更多实例:http://www.runoob.com/jquery/jquery-selectors.html
页面加载完成立刻执行
$(document).ready( function(){ } )
-
jQuery常用事件方法
方法 | 描述 |
---|---|
click() | 添加 click点击 事件 |
blur() | 添加失去焦点事件 |
mousedown () | 添加鼠标点击事件 |
mouseenter() | 添加鼠标移入事件 |
mouseover() | 添加鼠标移入事件 |
mouseup() | 添加鼠标松开事件 |
mousemove() | 添加鼠标移动事件 |
mouseout() | 添加鼠标移出事件 |
scroll() | 滚动指定的元素时,会发生 scroll 事件 |
注意:mouseenter与mouseover的不同之处
mouseenter不会发生事件冒泡,mouseover会发生事件冒泡
详见:http://www.runoob.com/jquery/jquery-ref-events.html
-
jQuery效果方法
方法 | 描述 |
---|---|
animate() | 被选元素应用“自定义的动画” |
fandeIn() | 改变被选元素的不透明度(从隐藏到可见) |
fandeOut() | 改变被选元素的不透明度(从可见到隐藏) |
finish() | 被选元素停止、移除并完成所有排队动画 |
hide() | 隐藏被选元素 |
show() | 显示被选元素 |
stop() | 停止被选元素 正在进行的动画 |
toggle() | 在被选元素上进行hide() 和show() 之间的切换。 |
添加 animate() 自定义动画要引入js插件
animate动画设置
$("p").animate(JS对象, 动画时间, 回调函数/动画类型)