分享web开发知识

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

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

jquery学习

发布时间:2023-09-06 01:23责任编辑:胡小海关键词:暂无标签
 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ?5 <title>菜鸟教程(runoob.com)</title> ?6 <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){10 ??$("button").click(function(){11 ????$(this).hide();12 ??});13 });14 </script>15 <script>16 ????$(document).ready(function(){17 ????????$("a").click(function(){18 ????????$(this).hide();19 ????????});20 ????});21 ????</script>22 </head>23 24 <body>25 ????<a>点我看看</a>26 <button>点我</button>27 </body>28 </html>

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ?5 <title>菜鸟教程(runoob.com)</title> ?6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){10 ??$("button").click(function(){11 ????$(".test").hide();12 ??});13 });14 </script>15 </head>16 <body>17 18 <h2 class="test">这是一个标题</h2>19 <p class="test">这是一个段落。</p>20 <p>这是另外一个段落。</p>21 <button>点我</button>22 </body>23 </html>
 1 !DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ?5 <title>菜鸟教程(runoob.com)</title> ?6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){10 ??$("p").dblclick(function(){11 ????$(this).hide();12 ??});13 });14 </script>15 </head>16 <body>17 18 <p>双击鼠标左键的,我就消失。</p>19 <p>双击我消失!</p>20 <p>双击我也消失!</p>21 22 </body>23 </html>
 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ?5 <title>菜鸟教程(runoob.com)</title> ?6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){10 ??$("#p1").mouseenter(function(){11 ????alert(‘您的鼠标移到了 id="p1" 的元素上!‘);12 ??});13 });14 </script>15 </head>16 <body>17 18 <p id="p1">鼠标指针进入此处,会看到弹窗。</p>19 20 </body>21 </html>
 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ?5 <title>菜鸟教程(runoob.com)</title> ?6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){10 ??$("#p1").mouseleave(function(){11 ????alert("再见,您的鼠标离开了该段落。");12 ??});13 });14 </script>15 </head>16 <body>17 18 <p id="p1">这是一个段落。</p>19 20 </body>21 </html>


mousedown鼠标按下事件

<script>

$(document).ready(function(){

$("#p1").mousedown(function(){

alert("鼠标在该段落上按下");

});

});

</script>

<body>

<p id="p1">这是一个段落</p>

</body>

 

 mouseup鼠标按下放开事件

<script>

$(document).ready(function(){

$("#p1").mouseup.(function(){

alert("鼠标在段落上松开");

})

})

</script>

<body>

<p id="p1" >这是一个段落<p>

</body>

jquery学习

原文地址:http://www.cnblogs.com/tiansan/p/7804630.html

知识推荐

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