jq事件绑定

一、jquery为多个选择器绑定同一个事件

$("#start,#end").on("click",function(){
  alert("The paragraph was clicked.");
 });

二、多事件绑定同一个选择器

$("p").on("mouseover mouseout",function(){
    $("p").toggleClass("intro");
});

三、多个事件绑定同一个选择器

$("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });

 

 

 

 

 

以下是一个简单的代码示例,实现了你所需的功能: HTML代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人网页</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"> <h1>个人网页</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="login.html">登录</a></li> <li><a href="register.html">注册</a></li> </ul> </nav> </div> <div class="content"> <h2>欢迎来到我的个人网页</h2> <p>这是我的个人网页,欢迎浏览。</p> </div> <div class="footer"> <p>版权所有 © 2021 我的个人网页</p> </div> <script src="jquery.min.js"></script> <script src="script.js"></script> </body> </html> ``` CSS代码: ``` * { margin: 0; padding: 0; box-sizing: border-box; } .header { background-color: #333; color: #fff; height: 100px; display: flex; align-items: center; justify-content: space-between; padding: 0 50px; } .header h1 { font-size: 36px; } nav ul { display: flex; } nav li { margin-left: 20px; } nav a { color: #fff; font-size: 24px; text-decoration: none; } .content { min-height: 500px; padding: 50px; } .content h2 { font-size: 36px; margin-bottom: 20px; } .content p { font-size: 24px; line-height: 1.5; } .footer { background-color: #333; color: #fff; height: 50px; display: flex; align-items: center; justify-content: center; } .footer p { font-size: 18px; } ``` JavaScript代码: ``` $(document).ready(function() { // 当点击登录按钮时 $('nav a[href="login.html"]').click(function(event) { event.preventDefault(); // 阻止默认事件 window.location.href = 'login.html'; // 跳转到登录页面 }); // 当点击注册按钮时 $('nav a[href="register.html"]').click(function(event) { event.preventDefault(); // 阻止默认事件 window.location.href = 'register.html'; // 跳转到注册页面 }); }); ``` 以上代码实现了一个简单的个人网页,包括首页、登录页面、注册页面。页面使用了多行多列布局和CSS中的定位样式,使用了jQuery来绑定事件和发送Ajax请求,并使用了本地存储来保存数据。当点击登录或注册按钮时,会跳转到首页。在注册页面中,使用本地存储来保存注册信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值