欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery学习笔记Fisrt Day

程序员文章站 2022-08-02 19:10:24
跳过JS直接JQUERY,“不愧是你”。 对就是我。 今天开始jQuery学习第一天。 click事件方法: 鼠标点击 dbl事件方法: 双击鼠标 mouseenter事件方法: 鼠标进入 mouseleave事件方法: 鼠标离开 hover: 光标悬停,多一个css可以产生和mouseenter、 ......

跳过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以上版本已废弃,就不再赘述