jQuery效果
2016-05-31 16:14
435 查看
jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作。
基础语法:(selector).action() 定义jQuery
selector 查询和查找HTML元素
action()执行对元素的操作
eg:
jQuery选择器
jQuery事件
什么是事件?
页面对不同访问者的响应为事件。
比如:在元素上移动鼠标,
选取单选按钮,点击元素等
jQuery效果-隐藏和显示
jQuery效果-淡入淡出
jQuery效果-滑动
jQuery效果-动画-animate()方法
jQuery方法链接
基础语法:(selector).action() 定义jQuery
selector 查询和查找HTML元素
action()执行对元素的操作
eg:
$(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class="test" 的所有元素 $("#test").hide() - 隐藏所有 id="test" 的元素 $(document).ready(function(){ //jQuery methods go here... }); 这是为了防止文档在完全加载之前运行jQuery代码,
jQuery选择器
元素选择器 $("p")选取页面中所有<p>元素 #id选择器 $("#test")选取id="test"的元素 .class 选择器 $(".test")选取class="test"的元素
jQuery事件
什么是事件?
页面对不同访问者的响应为事件。
比如:在元素上移动鼠标,
选取单选按钮,点击元素等
click() 页面中指定一个点击事件: $("p").click(function(){ $(this).hide; } dblclick() 双击元素 $("p").dblclick(function(){ $(this).hide(); }); mouseenter() 当鼠标指针穿过元素时,发送mouseenter事件。 $("#p1").mouseenter(function(){ alert("You entered p1!"); }); mouseleave() 当鼠标指针离开元素时,会发送mouseleave事件。 $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); 等等....
jQuery效果-隐藏和显示
$("#hidetest").click(function(){//id="hidetest"的元素 $("p").hide();//"属性p" }); $("#showtest").click(function(){ $(" .p").show(1000);//class="p"的元素,显示1000S }); $("button").click(function(){ $("p").toggle(); }); 通过toggle()方法来切换hide()和show()方法。显示被隐藏的元素,并隐藏已显示的元素。 $(selector).toggle(speed,callback); speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
jQuery效果-淡入淡出
四种 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo()
jQuery效果-滑动
slideDown() slideUp() slideToggle()
jQuery效果-动画-animate()方法
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); jQuery停止动画 -stop()方法 $("button").click(function(){ $("p").hide("slow",function(){//回调函数 alert("The paragraph is now hidden"); }); });
jQuery方法链接
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
相关文章推荐
- jquery的each()详细介绍 -
- Jquery 插件学习笔记
- Jquery EasyUI后台实例 - undefined? - 博客园
- jQuery MiniUI - 快速开发WebUI
- Live Demo - jQuery EasyUI
- 如何自己开发一款js或者jquery插件
- JQuery中的动画整理
- jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别
- JQuery实现动画效果
- jquery mobile中动态设置Checkbox选中、不选中
- jQuery使用经验小技巧(推荐)
- jQuery插件之路(二)——轮播
- Json对象与Json字符串互转(4种转换方式) jquery 以及 js 的方式
- Jquery+CSS实现分页
- 利用jquery简单实现返回顶部功能
- Jquery图片上传组件,支持多文件上传
- jQuery.lazyload
- jquery jsonp 跨域
- jQuery使用经验建议
- 使用JQuery获取对象的几种方式