第1天:jQuery效果
1、jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
为了防止文档加载(就绪)之前运行jQuery代码
要将jQuery函数写在document ready函数中
$(document).ready(function){ jQuery函数 }
2、jQuery选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
Event 函数 |
绑定函数至 |
$(document).ready(function) |
将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
3、jQuery显示或隐藏
jQuery hide()和show()
通过jQuery我们可以使用hide()和show()方法来隐藏和显示HTML元素
例如:
$(“button”).click(function(){ $(“p”).hide(1000); });
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery toggle()
jQuery toggle()方法可以切换hide()和show()方法
$(“button”).click(function(){ $(“p”).toggle(); });
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
4、jQuery 滑动方法
通过 jQuery,您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
$(document).ready(function(){
$(".yincang").click(function(){
$("div").toggle(,function(){
alert("隐藏完了")
});
});
//向上滑动
$("#xshd").click(function(){
$("div").slideUp(,function(){
// $("div").show(1000);
});
});
//向下滑动
$("#xxhd").click(function(){
$("div").slideDown()
});
$(".sxhd").click(function(){
$("div").slideToggle("fast");
});
$("#sxhddrdc").click(function(){
$("div").fadeToggle()
})
});
</script> <body>
<button class="sxhd">上下滑动</button>
<button id="xxhd">向下滑动</button>
<button id="xshd">向上滑动</button>
<button class="yincang">隐藏</button>
<button id="sxhddrdc">淡入淡出</button>
<div></div>
</body>
最新文章
- python数据库操作对主机批量管理
- Win10 通过升级安装完成后出现了中文字体忽大忽小的问题解决。
- 牛顿法与拟牛顿法学习笔记(三)DFP 算法
- codevs 1171 潜伏者
- HDU 1267 下沙的沙子有几粒?
- B树的实现与源代码二(删除源代码)
- webservice之cxf样例
- Windows7在自由的虚拟机(微软官方虚拟机)
- java编程接口(6) ------ 图标
- 【Android Developers Training】 107. 认知用户当前的行为
- 表单的自动到json与urlstr
- 记录腾讯云中矿机病毒处理过程(重装系统了fu*k)
- python报以下错误:TypeError: &#39;int&#39; object is not subscriptable
- 一起学习造轮子(三):从零开始写一个React-Redux
- jdk7 并行计算框架Fork/Join
- Parallels Desktop 重装系统
- VSFTPD配置和错误 ,这篇文章也太厉害了
- 在RES.web.Html5VersionController废弃后,如何做版本管理
- deepin安装php5.6
- 同时对view延时执行两个动画时候的现象
热门文章
- 转载:RabbitMQ常用命令
- java 实验3 继承+多态
- 波利亚(Polya)罐子模型
- Ionic2的CLI的命令行
- Flume启动运行时报错org.apache.flume.ChannelFullException: Space for commit to queue couldn&#39;t be acquired. Sinks are likely not keeping up with sources, or the buffer size is too tight解决办法(图文详解)
- Linux进程间通信——使用System V 消息队列
- C# Directory和DirectoryInfo类(文件目录操作)
- 基础篇:6.1)形位公差-要素 Feature
- centos 7 设置开机启动服务
- 转 crs damon can&#39;t start 2个例子