分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

Jquery操作事件

发布时间:2023-09-06 02:25责任编辑:熊小新关键词:暂无标签

1、文档加载事件

2、DOM单击双击事件

3、DOM获得焦点,失去焦点问题

4、DOM鼠标移入,移出事件

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Jquery操作DOM节点</title> 6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 7 <script type="text/javascript"> 8 ????$(document).ready(function(){ 9 ????????//alert("文档加载完毕!");//文档加载10 ????????$("#zs").click(function (){11 ????????????$("#p1").html(‘<font color=red>张三被点了!</font>‘);//单击事件12 ????????})13 ????????$("#zs").dblclick(function(){14 ????????????$("#p1").html(‘<font color="blue">张三被双击了!</font>‘); ???//双击事件15 ????????})16 ????????//焦点事件17 ????????$("#t1").focus(function (){18 ????????????$("#t1").val("获得焦点事件!");19 ????????})20 ????????//失去焦点事件21 ????????$("#t1").blur(function(){22 ????????????$("#t1").val("失去焦点事件!");23 ????????})24 ????????//鼠标移入事件25 ????????$("#d1").mouseover(function(){26 ????????????$("#d1").html("鼠标移入");27 ????????})28 ????????//鼠标移除事件29 ????????$("#d1").mouseout(function(){30 ????????????$("#d1").html("鼠标出去了!");31 ????????})32 ????});33 </script>34 </head>35 <body>36 <input id="zs" value="张三" name="zs" type="button"></input>37 <p id="p1"></p>38 <input id="t1" type="text" name="t1" />39 <div id="d1" style="border:1px solid red; width:100px;height:100px"></div> 40 </body>41 </html>

Jquery操作事件

原文地址:https://www.cnblogs.com/zyxsblogs/p/10085477.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved