关闭

jQuery效果

标签: jquery
181人阅读 评论(0) 收藏 举报
分类:

jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作。
基础语法:(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);
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

jquery 按钮效果 正常、移上、按下

在网页设计过程中,经常遇见按钮的各状态效果。写了一个jquery扩展,使这个过程更方便! 使用前注意引用Jquery; JqueryExtend.js: (function ($) { // Button按钮的三种样式替换,如果isState参数为True则记录按下状态 $.fn.bt...
  • wuwo333
  • wuwo333
  • 2013-08-09 17:51
  • 2210

jquery实现页面等待时的交互效果

探索这个是因为前端在请求后台有时候需要较长的一段时间,如果不给不用户一些提示性的消息,如正在加载之类的,用户可能会以为页面已死,所以还是得简单的做点交互才行。 思路如下: 在触发请求后台之前便开始等待效果 在收到后台返回数据时候便取消等待效果 等待效果如何实现,这个才是主要问题 步骤: 等待效果的实...
  • werewolf_st
  • werewolf_st
  • 2015-10-17 17:25
  • 6549

15 个最佳 jQuery 翻书效果插件

本文为你带来15个非常实用的、实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验。  1.  BookBlock  BookBlock可以将任何内容(如图像、文本)创建为翻页效果,带有一个翻页导航,可用于创建小册子等组件。...
  • xiao190128
  • xiao190128
  • 2016-04-09 16:53
  • 748

jQuery某网站品牌列表效果

jQuery某网站品牌列表效果,很经典的一个案例练习,主要是jQuery方法的练习熟悉!
  • macanfa
  • macanfa
  • 2016-07-18 17:17
  • 1158

【JQuery】jQuery自制简易手风琴效果(附实现原理)

简易手风琴效果,附实现原理
  • LZGS_4
  • LZGS_4
  • 2015-08-30 09:48
  • 7563

放大镜原理分析及jquery实现

今天心血来潮,逛某宝的时候,突然想自个儿倒腾一下放大镜的实现。
  • liangzhm
  • liangzhm
  • 2014-08-13 15:34
  • 4439

使用 jquery.easing.js 增强动画过渡效果

jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法,可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ,可以实现很多动画效果。为了让动画有好的过渡变化过程,官方为这些方法设置 easing 属性,但是官方没有给出很多过渡效果。 jquer...
  • fanhu6816
  • fanhu6816
  • 2016-12-07 16:31
  • 851

jquery实战6:高级特效烟花效果

jquery实战6:高级特效烟花效果  $(document).click(function(e){  //alert("1");  var div1=$("");//声明定义要创建的红色div1的对象 ...
  • wustzbq0713
  • wustzbq0713
  • 2015-06-06 12:12
  • 1596

jquery实现打字机效果

打字机,算是一种比较好玩的一种文字输出效果,其原理是时段性向页面输入内容,以达到效果…… 我这里是在html中预先有一个隐藏的div,里面有将要输出的内容。js的主要功能是,获取隐藏的内容元素,对内容进行预处理,把每一个字符分别和标签传入数组中。(如果有标签,那么这一个标签将占用数组的一个元素)。...
  • u014703834
  • u014703834
  • 2014-12-17 13:46
  • 971

jQuery开发之超链接提示效果和图片提示效果

1,超链接提示效果 超链接自带的有提示效果的,这里就把自己定义的提示效果放在一起可以进行一下比较。示例代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www....
  • HHL110120
  • HHL110120
  • 2015-06-17 16:13
  • 1665
    个人资料
    • 访问:38434次
    • 积分:1179
    • 等级:
    • 排名:千里之外
    • 原创:83篇
    • 转载:8篇
    • 译文:0篇
    • 评论:7条
    文章分类