jQuery效果

原创 2016年05月31日 16:14:50

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);
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery实现飘雪效果

  • 2017年11月14日 22:55
  • 29KB
  • 下载

JQuery实现点击缩略图查看大图效果

function imgshow(){ var winW = $(window).width(); var winH = $(window).height(); var imgW = $(...

Jquery实现预览效果

  • 2017年10月24日 15:51
  • 34KB
  • 下载

jquery 实现星星打分效果

  • 2017年10月18日 09:51
  • 111KB
  • 下载

loner_li JQuery 插件之 放大镜图片效果

http://www.w3.org/1999/xhtml">                                         ...

jquery焦点图旋转效果

  • 2015年12月08日 18:48
  • 175KB
  • 下载

使用jQuery创建模态窗口登陆效果

  • 2015年07月29日 15:34
  • 36KB
  • 下载

jquery获取instagram图片并添加fancybox效果

JQuery提供了$.ajax、$.getJSON方法,在我们获取ins官方提供的图片获取链接之后,我们可以很轻易的通过解析json数据拿到图片的相关信息。 获取ins提供的链接方法在此,当然由于最...

JQuery 类似淘宝商品放大镜效果

  • 2015年07月31日 15:36
  • 1.06MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery效果
举报原因:
原因补充:

(最多只允许输入30个字)