jquery事件

首页 > 代码库 > jquery事件

2024-08-30 05:28:12 220人阅读

.blur() 表单元素失去焦点。&&.focus() 表单元素获得焦点

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript"
 9     src="http://www.mamicode.com/${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
10 </head>
11 <body>
12         <input type="text"/>
13         
14 </body>
15 <script type="text/javascript">
16     $("input").blur(function(){
17         $(this).val("")
18     });
19     
20     $("input").focus(function(){
21         $(this).val("nihao")
22     });
23 
24 </script>
25 </html>

View Code

.change() 表单元素的值发生变化

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript"
 9     src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
10 </head>
11 <body>
12         <input type="text"/>
13         
14 </body>
15 <script type="text/javascript">
16     $("input").change(function(){
17         console.log(‘val change‘)
18     });
19     
20 
21 </script>
22 </html>

View Code

.click() 鼠标单击

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript"
 9     src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
10 </head>
11 <body>
12         <input type="text"/>
13         
14 </body>
15 <script type="text/javascript">
16     $("input").click(function(){
17         console.log(‘val click‘)
18     });
19     
20 
21 </script>
22 </html>

View Code

.dblclick() 鼠标双击

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
</head>
<body>
        <input type="text"/>
        
</body>
<script type="text/javascript">
    $("input").dblclick(function(){
        console.log(‘val click‘)
    });
    

</script>
</html>

View Code

.focusin() 子元素获得焦点&&.focusout() 子元素失去焦点

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript"
 9     src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
10 </head>
11 <body>
12         <form action="">
13             <input type="text" /><br>
14             <input type="text" /><br>
15             <input type="text" /><br>
16             <input type="text" /><br>
17         </form>
18 <!--         不触发事件 -->
19         <input type="text" /><br>
20         
21 </body>
22 <script type="text/javascript">
23 //     获得焦点
24     $("form").focusin(function(){
25         console.log(‘val focusin‘)
26     });
27     
28 //     失去焦点
29     $("form").focusout(function(){
30         console.log(‘val focusout‘)
31     });
32     
33 
34 </script>
35 </html>

View Code

.hover() 同时为mouseenter和mouseleave事件指定处理函数(相当于鼠标移入和移出)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <p>llllllllllllll</p>

</body>
<script type="text/javascript">
    $("p").hover(function(){
        $(this).css("color","red")
    },function(){
        $(this).css("color","pink")
    });    
</script>
</html>

View Code

.keydown() 按下键盘（长时间按键，只返回一个事件）&&.keyup() 松开键盘

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript"
 9     src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
10 </head>
11 <body>
12     <input  type="text" />
13 
14 </body>
15 <script type="text/javascript">
16     $("input").keydown(function(){
17         $(this).css("backgroundColor",‘pink‘);
18     });
19     $("input").keyup(function(){
20         $(this).css("backgroundColor",‘red‘);
21     });
22 </script>
23 </html>

View Code

.keypress() 按下键盘（长时间按键，将返回多个事件）

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <input  type="text" />
    <div></div>
</body>
<script type="text/javascript">
    var i=0;
    $("input").keydown(function(){
        i++;
        $("div").html(i)
    });
</script>
</html>

View Code

.load() 元素加载完毕（必须有图片出现）

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <img src="${pageContext.request.contextPath }/channel_add.png">
    <div>图片加载。。。</div>
</body>
<script type="text/javascript">
    $("img").load(function(){
        $("div").html("图片 load done");
    });
</script>
</html>

View Code

.mousedown() 按下鼠标&&.mouseup() 松开鼠标

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div style="background-color: pink;width: 30px;height: 30px;" >d</div>
</body>
<script type="text/javascript">
    $("div").mousedown(function(){
        $(this).width(100);
        $(this).height(100);
        $(this).css("backgroundColor","red")
    });
    $("div").mouseup(function(){
        $(this).width(50);
        $(this).height(50);
        $(this).css("backgroundColor","red")
    });
</script>
</html>

View Code

.mouseenter() 鼠标进入（进入子元素不触发） &&.mouseleave() 鼠标离开（离开子元素不触发）

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div style="background-color: pink;width: 30px;height: 30px;" >d</div>
</body>
<script type="text/javascript">
    $("div").mouseenter(function(){
        $(this).width(100);
        $(this).height(100);
        $(this).css("backgroundColor","red")
    });
    $("div").mouseout(function(){
        $(this).width(50);
        $(this).height(50);
        $(this).css("backgroundColor","red")
    });
</script>
</html>

View Code

.mousemove() 鼠标在元素内部移动

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div style="background-color: pink;width: 30px;height: 30px;" >d</div>
</body>
<script type="text/javascript">
    var s=0;
    var ss=0;
    $("div").mousemove(function(){
        $(this).width(s++);
        $(this).height(ss++);
        $(this).css("backgroundColor","red")
    });
</script>
</html>

View Code

.ready() DOM加载完成

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div style="background-color: pink;width: 30px;height: 30px;" >d</div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        console.log("load over")
    })
</script>
</html>

View Code

.select() 用户选中文本框中的内容

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript"
 9     src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
10 </head>
11 <body>
12     <input type="text" />
13 </body>
14 <script type="text/javascript">
15     $("input").select(function(){
16         $(this).css("color","red")
17     });
18 </script>
19 </html>

View Code

.submit() 用户递交表单

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <form action="">
        <input type="text" />
        <input type="text" />
        <input type="submit" value="ok" />
    </form>
</body>
<script type="text/javascript">
    $("form").submit(function(){
        $("form").children().css("color","red")
        return false;
    });
</script>
</html>

View Code

.toggle() 根据鼠标点击的次数，依次运行多个函数

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});
</script>
</head>
<body>
<button>请点击这里，来切换不同的背景颜色</button>
</body>
</html>

View Code

jquery事件

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > jquery事件

jquery事件

看完仍有疑问？有类似问题直接问程序猿