JQuery 事件相关内容练习1

最新推荐文章于 2022-04-07 14:54:26 发布

潇潇雨歇_

最新推荐文章于 2022-04-07 14:54:26 发布

阅读量872

点赞数

文章标签： jquery 密码对象应用

本文链接：https://blog.csdn.net/linhaiyun_ytdx/article/details/53114320

版权

JQuery+Ajax 学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.$(document).ready()和window.onload方法的比较

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$()和window.onload区别</title>
<style type="text/css">
 
</style>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
/*
 window.οnlοad=function(){
     alert($("img").width());
 }
 */
 /*
 $(function(){
    alert($("img").width()); 
 });
 */
 /*
 $(window).load(function(){
     alert($("img").width());
 });
 */
 /*
 window.οnlοad=function(){
    alert("hello1");
 }
  window.οnlοad=function(){
    alert("hello2");//只能绑定一个函数的使用，最终输出hello2
 }
 */
 $(function(){
    alert("hello1"); //能绑定多个函数，执行多次
 });
  $(function(){
    alert("hello2"); 
 });
</script>
</head>
<body>
  <img src="jia.jpg" width="100px" height="100px"/>
</body>
</html>

截图：

2.事件的绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
<style type="text/css">
 table{
     border:0px;
     border-collapse:collapse; 
 }
 td{
     font:Arial, Helvetica, sans-serif;
      padding:2px; 
      width:100px;
 }
 th{
     font:Arial, Helvetica, sans-serif;
     text-align:left;
     padding:4px;
     border-bottom:1px solid #0FF;
 }
 .even{
     background:#069;
 }
 .odd{
     background:#906;
 }
 .selected{
     background:#FF3;
     color:#FFF;
 }
 .over{
     background:#0F0;
 }
</style>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
 $(function(){
     $("tbody>tr:odd").addClass("odd");
     $("tbody>tr:even").addClass("even");
     //bind可以绑定多个事件，mouseover和click事件
     //第一种方法
     /*
     $("tbody>tr").bind("click",function(){
        var hasSelected=$(this).hasClass("selected");
        if(hasSelected){
           $(this).removeClass("selected").find(":checkbox").attr("checked",false);    //点击事件时添加的属性和选择器
        }
        else{
             $(this).addClass("selected").find(":checkbox").attr("checked",true);    
        }
     }).bind("mouseover",function(){
         $(this).addClass("over").siblings().removeClass("over");//背景色改成绿颜色
     });
     */
     //第二种方法
     $("tbody>tr").click("click",function(){
        var hasSelected=$(this).hasClass("selected");
        if(hasSelected){
           $(this).removeClass("selected").find(":checkbox").attr("checked",false);    //点击事件时添加的属性和选择器
        }
        else{
             $(this).addClass("selected").find(":checkbox").attr("checked",true);    
        }
     }).mouseover(function(){
         $(this).addClass("over").siblings().removeClass("over");//背景色改成绿颜色
     });
     $("tbody>tr:has(':checked')").addClass("selected");
 });
</script>
</head>
<body>
 <table>
   <thead>
     <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
   </thead>
   
   <tbody>
    <tr><td><input type="checkbox" name="choice" value=""/></td>
         <td>张三</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input type="checkbox" name="choice" value=""/></td>
         <td>李四</td><td>女</td><td>浙江杭州</td></tr>
    <tr><td><input type="checkbox" name="choice" value="" checked='checked'/></td>
         <td>王五</td><td>男</td><td>湖南长沙</td></tr>
    <tr><td><input type="checkbox" name="choice" value=""/></td>
         <td>赵六</td><td>男</td><td>浙江温州</td></tr>
    <tr><td><input type="checkbox" name="choice" value=""/></td>
         <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
    <tr><td><input type="checkbox" name="choice" value=""/></td>
         <td>MAXMAN</td><td>女</td><td>浙江宁波</td></tr>
   </tbody>
 </table>
</body>
</html>

截图：

3.hover事件的点击

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover事件</title>
<style type="text/css">
 *{
     margin:0px;
     padding:0px; 
 }
 body{
     font-size:14px;
     line-height:130%;
     padding:60px; 
 }
 #pane1{
     width:300px;
     border:1px solid #0FF;
 }
 .head{
     height:24px;
     line-height:24px;
     text-indent:10px;
     background:#00F;
     cursor:pointer;
     width:100%;
 }
 .content{
     padding:10px;
     text-align:24px;
     border-top:1px solid #903;
     display:none;
     border:1px solid #99C;
 }
</style>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
 $(function(){
    $(".head").hover(
    function(){
        $(this).next().show();
        },
        function(){
            $(this).next().hide();
            })
 });
</script>
</head>
<body>
  <div id="pand1">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
     jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是"write Less，DoMore"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
    </div>
  </div>
</body>
</html>

截图：

4.toggle事件的点击

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggle事件</title>
<style type="text/css">
 *{
     margin:0px;
     padding:0px; 
 }
 body{
     font-size:14px;
     line-height:130%;
     padding:60px; 
 }
 #pane1{
     width:300px;
     border:1px solid #0FF;
 }
 .head{
     height:24px;
     line-height:24px;
     text-indent:10px;
     background:#00F;
     cursor:pointer;
     width:100%;
 }
 .content{
     padding:10px;
     text-align:24px;
     border-top:1px solid #903;
     display:none;
     border:1px solid #99C;
 }
</style>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
 $(function(){
    $(".head").click(function(){
        $(this).next().toggle();//点击出现，再点击消失
    });
 });
</script>
</head>
<body>
  <div id="pand1">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
     jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是"write Less，DoMore"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
    </div>
  </div>
</body>
</html>

截图：