jQuery学习笔记Fisrt Day

跳过JS直接JQUERY,“不愧是你”。

 

对就是我。

 

今天开始jQuery学习第一天。

click事件方法:

鼠标点击

dbl事件方法:

双击鼠标

mouseenter事件方法:

鼠标进入

mouseleave事件方法:

鼠标离开

hover:

光标悬停,多一个css可以产生和mouseenter、mouseleave接近的效果

alert:

弹出一个框

在事件之后。

keydown - 键按下的过程,变yellow

keypress - 键被按下,可用计数

keyup- 键被松开,变pink

submit事件方法:

当提交表单时,会发生 submit 事件。

该事件只适用于 <form> 元素。

submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。

1 $(document).ready(function(){
2 $("form").submit(function(){
3 alert("提交");
4 });
5 });

拓展:

1 $(document).ready(function(){
2 $("form").submit(function(event){
3 event.preventDefault();
4 alert("不许提交");
5 });
6 });

event.preventDefault阻止

change事件方法:

1 $(document).ready(function(){
2 $("input").change(function(){
3 alert("文本已被修改");
4 });
5 });

input改变时,弹出alert

当元素的值改变时发生 change 事件(仅适用于表单字段)。

change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。

注意:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发生。

拓展:onchange 事件会在域的内容改变时发生。

$(document).ready(function(){
  $("button").click(function(){
    $("input").change();
  });
});
</script>
</head>
<body>

<p>点击按钮触发 change 事件 (即使元素没有改变)。</p>
<button>输入框中触发 change 事件</button>
<p>输入你的名字: <input value="Runoob" onchange="alert(this.value)" type="text"></p>

focus事件方法:

当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件。

focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。

提示:该方法通常与 blur() 方法一起使用。

使用,点击input框或者其他TAP获取焦点,产生事件的方法

<script>
$(document).ready(function(){
  $("input").focus(function(){
    $("span").css("display","inline").fadeOut(2000);
  });
});
</script>
<style>
span
{
display:none;
}
</style>
</head>
<body>

<input>
<span>请输入你的电话号码?</span>
<p>点击输入框获取焦点。</p>

</body>
</html>

blur事件方法:

失去焦点,和focus方法对应,把$("span").focus换成$("span").blur就可以产生相反作用。

 1 $(document).ready(function(){
 2   $("input").blur(function(){
 3     alert("输入框失去了焦点");
 4   });
 5 });
 6 </script>
 7 </head>
 8 <body>
 9 
10 输入你的名字: <input type="text">
11 <p>在输入框写些东西,然后点击输入框外,让其失去焦点。</p>
12 
13 </body>
14 </html>

 

Load事件:

当指定的元素已加载时,会发生 load 事件。

该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)以及 window 对象。

根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。

鉴于3.0.0以上版本已废弃,就不再赘述

posted @ 2019-11-28 11:06  世界を変える御宅族  阅读(307)  评论(0编辑  收藏  举报