jquery 处理页面的事件详解

最新推荐文章于 2024-07-14 03:40:57 发布
最新推荐文章于 2024-07-14 03:40:57 发布
阅读量1.5k 收藏 2
点赞数 2
分类专栏： javaWeb 文章标签： 1024程序员节 jquery javascript 前端 开发语言
程序员小王
本文链接：https://blog.csdn.net/weixin_44385486/article/details/120931389
版权

jquery事件、修改页面内容

一、复合型事件属性

1、toggle() 多次单击事件(toggle(切换))
//多次循环执行单击事件   toggle(切换)
toggle(
  function(){} , 
  function(){} , 
  function(){}
)
  • toggl多次循环实现案例：
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function (){
       $("#btn").toggle(
           function (){
               //第一次单击
               alert("女王陛下！")
           },
           //第二次单击
           function (){
               alert("臣，退了！")
           },
           function (){
               //第三次单击
               alert("这一退就是永远！我就要去找其他小姐姐了！");
           },
       )
    })
</script>
</head>
<body>
<input type="button" value="点击" id="btn">
</body>
</html>
  • 示意图：

image-20211024110825806

2、hover（）鼠标移入移出

hover(
function(鼠标移入){

},
function(鼠标移出){

}
);
(1)hover移入移出案例一：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            //绑定复合型事件属性hover
            $("tr").hover(
                function () {
                    alert("鼠标进入");
                },
                function () {
                    alert("鼠标移出");
                }
            )
        })
    </script>
</head>
<body>
<center>
    <h3>hover实现表格中tr的移入移出案列</h3>
</center>

<table border="1" align="center" width="50%" cellspacing="0px" cellpadding="0px">
    <thead>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>薪资</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>王恒杰</td>
        <td>男</td>
        <td>21</td>
        <td>18000</td>
    </tr>
    <tr>
        <td>杨福君</td>
        <td>女</td>
        <td>19</td>
        <td>4200</td>
    </tr>
    <tr>
        <td>吴洪旭</td>
        <td>男</td>
        <td>23</td>
        <td>20000</td>
    </tr>
    <tr>
        <td>邓正武</td>
        <td>男</td>
        <td>21</td>
        <td>20000</td>
    </tr>
    </tbody>
</table>
</body>
</html>

效果图：

image-20211024110854386

(2)hover移入移出案例二：鼠标移入表格加粗变红色
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <style>
        .c1{
            background-color: red;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
    <script>
        $(function () {
            //绑定复合型事件属性hover
            $("tr").hover(
                function () {
                    $(this).addClass("c1")
                },
                function () {
                    $(this).removeClass("c1")
                }
            )
        })
    </script>
</head>
<body>
<center>
    <h3>hover实现表格中tr的移入移出案列</h3>
</center>

<table border="1" align="center" width="50%" cellspacing="0px" cellpadding="0px">
    <thead>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>薪资</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>王恒杰</td>
        <td>男</td>
        <td>21</td>
        <td>18000</td>
    </tr>
    <tr>
        <td>杨福君</td>
        <td>女</td>
        <td>19</td>
        <td>4200</td>
    </tr>
    <tr>
        <td>吴洪旭</td>
        <td>男</td>
        <td>23</td>
        <td>20000</td>
    </tr>
    <tr>
        <td>邓正武</td>
        <td>男</td>
        <td>21</td>
        <td>20000</td>
    </tr>
    </tbody>
</table>
</body>
</html>

效果图：

二、Jquery中常用的事件属性

  • 规律：js中的事件属性去掉on 加上()
  jqueryObj. click() 单击
  jqueryObj. dbclick() 双击
  jqueryObj. mouseover() 移入
  jqueryObj. mouseout() 移出
  jqueryObj. blur();失去焦点
  jqueryObj.change();下拉列表值改变
  jqueryObj.focus();获取焦点
  jqueryObj.keyDown();键盘按下
  jqueryObj.keyUp();键盘弹起

三、标签的其他方法 获取标签对象

1. jqueryObj.parent(); 获取当前标签的父类节点//parentNOdees
2. jqueryObj.children();获取当前标签的所有子类节点//chidrenNodes
3. jqueryObj.next(); 获取当前标签的下一个兄弟节点//nextsibling
4. jqueryObj.prev();获取当前标签元素的上一个兄弟节点//previoussibling

四、Jquery中的动画效果

  • 实现页面元素隐藏或展示时的动画效果
1.  show(单位：毫秒) 从浏览器的左上角渐入
2.  fadeIn(单位：毫秒) 淡入
3.  slideDown() 从上到下逐渐展开
4.  hide() 元素隐藏
5.  fadeOut() 淡出
6.  slideUp() 从下到上逐渐收缩

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery实现动画效果</title>
    <style>
      #d{
        background-color: red;
                width: 100px;
        height: 100px;
          display: none;
    </style>
    <script type="text/jscript" src="js/jquery-1.8.3.min.js"></script>
    <script>
      $(function(){
         // 从浏览器左上角渐入
        $("#show").click(function(){
          $("#d").show(3000);
        })
        //元素隐藏
        $("#hide").click(function(){
          $("#d").hide(3000);
        })
        //淡入
        $("#fadeIn").click(function(){
          $("#d").fadeIn(3000);
        })
        
        //淡出
        $("#fadeOut").click(function(){
          $("#d").fadeOut(3000);
        })
        
        //从上到下展示
        $("#slideDown").click(function(){
          $("#d").slideDown(3000);
        })
        
        //从下到上收缩
        $("#slideUp").click(function(){
         $("#d").slideUp(3000);  
        })
        
      });
    </script>
  </head>
  <body>
    <!-- 
    1. show(单位：毫秒) 从浏览器的左上角渐入
    2. fadeIn(单位：毫秒) 淡入
    3. slideDown() 从上到下逐渐展开
    4. hide() 元素隐藏
    5. fadeOut() 淡出
    6. slideUp() 从下到上逐渐收缩 
    -->
    <div id="d"></div>
    <input type="button" value="点击渐出" id="show" />
    <input type="button" value="点击渐入" id="hide" />
    <input type="button" value="淡入" id="fadeIn" />
    <input type="button" value="淡出" id="fadeOut" />
    <input type="button" value="从上到下展开" id="slideDown" />
    <input type="button" value="从下到上收缩" id="slideUp" />
  </body>
</html>
  • 效果展示：

五、综合案例“全选”实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
            $(function (){
            //事件源头：全选的复选框
            //事件属性：click点击
            //监听器：实现全选
            $("#selectAll").click(function (){
                //:checkbox 获取当前选中的单选按钮或者复选框
                //:checkbox:gt(0) 获取当前复选框大于0的复选框
                //prop修改标签的属性 标签对象.prop(“属性名”,”属性值”);
                //proph获取标签的属性 标签对象.prop(“属性名”);
                //checked:选中
                //注意：在单选框和复选框中checked只要出现checked就是选中，不管他是否等于true还是false
                $(":checkbox:gt(0)").prop("checked",$("#selectAll").prop("checked"));
            });
        })


    </script>
</head>
<body>
全选：<input type="checkbox" id="selectAll"></br>
<input type="checkbox" name="likes" value="1">
<input type="checkbox" name="likes" value="2">
<input type="checkbox" name="likes" value="3">
<input type="checkbox" name="likes" value="4">
<input type="checkbox" name="likes" value="5">
<input type="checkbox" name="likes" value="6">
<input type="checkbox" name="likes" value="7">
<input type="checkbox" name="likes" value="8">
<input type="checkbox" name="likes" value="9">
<input type="checkbox" name="likes" value="10">
</body>
</html>
  • 效果图：

  • 注意：在单选框和复选框中checked只要出现checked就是选中，不管他是否等于true还是false

程序员小王java
关注
专栏目录
jQuery事件（页面，鼠标，键盘，表单，编辑，滚动）
藜笙的博客
05-09 280
事件解析 ： jQuery基本的事件共有以下6种。 ·页面事件。 ·鼠标事件。 ·键盘事件。 ·表单事件。 ·编辑事件。 ·滚动事件。 事件操作是jQuery的核心。 1....
jQuery的页面载入事件
东境物语
12-09 1691
加载事件有两种，普通的加载事件onload和Jquery事件。 一、jQuery的页面载入事件是ready()方法.这个方法类似于传统JavaScript中的OnLoad()方法,只是在事件执行时间上有区别,OnLoad()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发,在这种情况下,如果页面中的图片过多或图片过大,那么有可能要等OnLoad()广告执行完毕,用户才进能行其他的操作,如
jquery添加点击事件的几种方式
最新发布
weixin_27130513的博客
07-14 654
jQuery添加点击事件的几种方式 在前端开发中，经常需要给页面元素添加点击事件，以实现交互功能。jQuery是一个广泛应用的JavaScript库，提供了许多简洁方便的方法来处理DOM操作，其中包括添加点击事件。本文将介绍几种jQuery添加点击事件的方式，并附上相应的代码示例。 1. 通过click()方法添加点击事件...
JQuery页面载入事件
迁就100
07-16 471
<!-- Jquery:丰富的js库,提供了大量api,快速去使用,操作ajax,动画,遍历,dom Jquery的开发步骤 1)导入js库 2)Jquery的程序入口:页面载入事件 3)给哪个标签派发事件(单击点击/其他事件) 举例:单击点击事件---完成的业务 --> <!--引入核心js库--> <script src="js/jquer...
js常见事件
amarsoft_wxzhou
03-06 327
<!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>I
JQuery 页面载入事件(ready)
21号先锋者
02-05 1014
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;Index&lt;/title&gt; &lt;/he
jQuery 处理页面的事件详解
10-24
在本文中，我们将深入探讨 jQuery 如何处理页面上的事件，包括事件绑定、事件解绑、事件冒泡和事件代理。 1. **事件绑定：**jQuery 提供了 `bind()` 方法来绑定事件监听器。在示例代码中，`$("img")` 选择器用于...
jQuery动态追加页面数据以及事件委托详解
10-19
标题和描述中提到的“jQuery动态追加页面数据以及事件委托详解”，涉及的两个主要知识点是：jQuery动态追加页面数据和jQuery事件委托。详细内容包括如何使用jQuery技术向页面动态追加内容，并利用事件委托处理动态...
jQuery事件详解
10-20
### jQuery事件详解 #### window事件 window事件是与浏览器窗口相关的事件，例如window.onload事件。这是一个在DOM完全加载完成后触发的事件，我们可以在这个事件中执行一些初始化操作。 示例代码如下： ```...
jQuery事件绑定用法详解
11-23
总的来说，jQuery的事件绑定机制极大地简化了JavaScript事件处理的代码，提供了强大的功能，如事件委托和传递自定义数据。理解并熟练使用`.bind()`和`.on()`等方法，能够帮助开发者更高效地创建交互丰富的网页应用。...
jQuery页面加载事件
zhansan的博客
06-04 3904
jQuery页面加载事件
JQuery 自己主动触发事件
weixin_33852020的博客
05-30 202
经常使用模拟 有时候，须要通过模拟用户操作，来达到单击的效果。比如在用户进入页面后，就触发click事件，而不须要用户去主动单击。 在JQuery中。能够使用trigger()方法完毕模拟操作。比如能够使用以下的代码来触发id为btn的button的click事件。 1 $('#btn').trigger("click"); 这样，...
JQ点击事件
HeDashuaithan的博客
01-04 2188
事件绑定 <script src="./js/jquery-3.1.1.js"></script> <script> // on事件绑定的方式有两种，第一种是直接给元素绑定事件和普通的绑定没有区别 // $('button').click(function(){}); // $('button').on('click',function(){ // console.log($(this).text()); // }) // 第二种
jQuery鼠标事件、键盘事件、浏览器事件
m0_59329828的博客
01-21 1271
这三个事件都被注册时，先触发keydown（），再被触发keypress(),只有当前两者都没有被注册的情况下，才会注册keyup()在键盘按下时被触发，但是该事件只能发送在具有焦点的元素上，所以表单元素较为适用。在敲击键盘时被触发，可以理解为按下并抬起同一个键。在按键释放时被触发，也就是按下并抬起同一个键。可以利用这个事件将这些不同都加载到这个事件中。// jQuery写法。// jQuery写法。// jQuery写法。空格键 32。当页面大小被改变时，会被触发。
jQuery常见事件
奶香刘沙包的博客
12-29 2848
JQuery几种常用事件 1.事件ready(fn) 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。通俗的来讲就是当页面加载完时就会执行此函数事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。 $(document).ready(function(){ // 在这里写你的代码... }); 使用 $(document).ready() 的简写(最常用)，同时内部的 jQ
5.jQuery事件
姑苏的博客
08-05 122
1.常见DOM事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload click:点击鼠标是触发 dblclick:双击鼠标时触发 mouseenter:鼠标指针穿过元素时触发 mouseleave:鼠标指针离开元素时触发 mousedown:鼠标移到元素上
jQuery--事件处理
hongcaixia的博客
01-25 420
jQuery–事件处理 一、事件模型 1.浏览器事件模型 ①DOM0级事件模型：只支持一个DOM事件处理函数 • • input.onclick = function() { … } • event = event || window.event; • var target = event.target || event.srcElement; • … 代码示例：
jQuery全局Ajax事件详解
在jQuery中，有多个全局Ajax事件，这些事件使得开发者可以在Ajax请求的生命周期的不同阶段进行相应的处理。 1. `ajaxStart(callback)`：当任何Ajax请求开始时，这个事件会被触发。如果你注册了一个回调函数，它将在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员小王java

学习java的路上，加油！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值