jQuery效果

来源:互联网 发布:java文件系统下载 编辑:程序博客网 时间:2024/05/03 00:59

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