事件

  • 定义

即当HTML中发生某些事（点击、鼠标移过等）的时候调用的方法

$(selector).action()

 

 

  • 触发

事件的触发有两种方法：

1、直接将事件click写在<javascript>中

 

<head>
<script type = "text/javascript"src="/jquery/jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("button").click(function(){
 $("p").hide();
 });
 });
</script>
</head>

<body>
<button type="button">点击这里让文字消失</button><p>我会消失</p>
</body>

 

*各种Event函数的写法和作用：

Event 函数绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

2、在body标签中通过onclick引用已经写好的方法：

<script>
function visible1()
{
    $("p").hide();
};
</script>
</head>
<body>
<input type="button" onclick = "visible1()" value = "点这里让文字消失"/><p>我会消失。</p>
  • 常用的jQuery函数

1、隐藏/显示/隐藏显示切换：.hide()     .show()      .toggle()

2、淡入/淡出/淡入淡出切换/fadeTo：.fadeIn()    .fadeOut()    .fadeToggle()    .fadeTo("时间","透明度")

3、滑动：.slideDown()    .slideUp()    .slideToggle

4、动画效果：.animation({css样式表的属性值},"slow/fast/自定义时长（毫秒，去掉外面的双引号）")

5、停止动画：.stop() 适用于所有jQuery效果函数，包括以上列举的几种，停止正在执行的所有动画效果

6、Callback的用法：在动画执行完成后进行下一函数的执行，如下面用下划线标识出来的部分即为Callback：

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
alert("The paragraph is now hidden");
    });
  });
});
</script>

7、Chaining:几种函数的链接，如：

<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>

8、当操作的元素是自动生成的元素时，jquery的写法要用on，如：$(document).on("事件", "所选元素", function () {方法……})

9、获取父元素的同级元素用$(this).parent().siblings("元素名")，如：$(this).parent().siblings(".Sign").css("display", "block");

 

jQuery的基础知识基本上就整理到这里，以后如果再深入学习还会再继续更新，希望能够对大家有用！