Chao Yu - Smile in the Sunshine

Sunshine , to be a better man 。

jQuery效果

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);
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yuchao1076244056/article/details/51546693
文章标签: jquery
个人分类: jQuery
想对作者说点什么? 我来说一句

jquery手风琴效果

2018年01月03日 3KB 下载

JQUERY导航效果

2010年05月04日 31KB 下载

Jquery 图片展示效果

2011年11月29日 601KB 下载

jquery效果焦点图效果

2010年05月12日 297KB 下载

jquery css 跑步效果

2018年02月03日 71KB 下载

jquery图片平滑效果

2011年05月10日 136KB 下载

jQuery放大镜效果

2009年10月17日 84KB 下载

jQuery流行广告效果.rar

2009年05月30日 297KB 下载

jQuery缩略图广告效果

2010年07月15日 275KB 下载

jquery超酷相册相框效果

2010年09月27日 175KB 下载

没有更多推荐了,返回首页

不良信息举报

jQuery效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭