JQ基础
来源:互联网 发布:诲女知之乎诲的意思 编辑:程序博客网 时间:2024/06/06 14:14
选择器
使用JQ最方便的就是选择一个元素,可以使用标签名、id、class等来选择一个元素。
JQ选择每个元素的时候都会有固定的格式:$()
,然后在括号里添加选择,例如id选择:$("#id1")
(选择id为id1的元素,注意id前面必须用#
),class选择:$(".class1")
(选择所有拥有class1的元素,注意这里必须有点号.
)和标签选择:$("p")
(选择所有p标签)。
这里你可能觉得很熟悉,没错这就和css语法一样,所以又可以成为css选择器,还有不一定非要用双引号,用单引号也是可以的。
常见事件
在HTML加载完成后再执行:
$(document).ready(function(){ // jQuery 代码...});
鼠标事件
click()
选中所有的button元素,并设置其点击事件,点击后隐藏此元素:
$("button").click(function(){ $(this).hide();});
dblclick()
这个也是点击事件,只不过是双击而已。双击隐藏此元素:
$("p").dblclick(function(){ $(this).hide();});
mouseenter()
鼠标经过事件,当鼠标经过时弹出“hello world”:
$("#hello").mouseenter(function(){ alert("hello world!");});
mouseleave()
鼠标离开事件,当鼠标离开时弹出“Bye!”:
$("#bye").mouseleave(function(){ alert("Bye!");});
mousedown()
当鼠标移动到某个元素上并点击后触发事件
mouseup()
当鼠标在某个元素上松开后触发事件
hover()
鼠标悬停事件,当光标悬停在某个元素上触发事件
focus()
获得焦点时触发事件
blur()
失去焦点时触发事件
键盘事件
keypress
keydown
keyup
表单事件
submit
change
focus
blur
文档窗/口事件
load
resize
scroll
unload
一些简单特效
1、显示与隐藏
hide()
和 show()
是相反的两个事件,前者是隐藏,后者是显示。
它们的组合是toggle()
,这个事件意味着,当元素隐藏时触发此事件显示,当元素显示时触发此事件隐藏。简单说就是做隐藏显示的反操作。
语法:
$(selector).hide(speed,callback);$(selector).show(speed,callback); $(selector).toggle(speed,callback);
speed就是显示隐藏使用的时间,以毫秒为单位,也可以使用已经定义好了的slow
和fast
等等,callback就是回调函数,也就是事件触发执行完成后要执行的指令。
2、淡入和淡出
和显示隐藏相似,只不过是通过改变透明度而已。 fadeIn()
淡入效果和fadeOut()
淡出效果,合起来就是fadeToggle()
,这个也和显示隐藏的toggle()
类似。
语法:
$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);$(selector).fadeToggle(speed,callback);
但是还有一个特别的fadeTo()
,这个是将元素的透明度改变至指定的值:
语法:$(selector).fadeTo(speed,opacity,callback);
这里也基本相似需要说明的是opacity
参数的值是你指定透明度的值。这个值介于0到1之间。
$("button").click(function(){ $("#div1").fadeTo("slow",0.1); $("#div2").fadeTo("slow",0.3); $("#div3").fadeTo("slow",0.5);});
3、滑动效果
slideDown()
向下滑动和slideUp()
向上滑动合起来为slideToggle()
语法:
$(selector).slideDown(speed,callback);$(selector).slideUp(speed,callback);$(selector).slideToggle(speed,callback);
4、动画
- JQ基础
- JQ基础事件
- JQ基础学习篇
- jq基础笔记
- jq基础笔记02
- jq ajax基础
- JQ基础---正则表达式
- jq学习使用基础笔记
- JS基础和JQ点滴
- jq基础三-事件篇
- JQ 基础选择器 没事多看看
- jq 易忘记的基础知识点
- JQ基础使用备忘技巧(一)
- JQ-判断子集-作用父集-[基础]
- jQ基础 类样式的几种
- jQ基础day05五星评分小案例
- jQ
- jQ
- Qt环境搭建
- springmvc始终跳转至首页,不报404错误
- 3D游戏编程与设计 Week2
- final ,finally ,finalize的区别
- xml解析知识回顾
- JQ基础
- 一个小律师的半年前端学习之路
- [BZOJ 1877][SDOI2009]晨跑(费用流)
- 图的m着色问题
- 排序算法之插入排序
- 开课水平小测(数据结构_修改版)
- Seven Puzzle Aizu
- ceph 知识技能树
- 第一次爬虫实战--爬取糗事百科段子