jQuery_04

最新推荐文章于 2024-07-12 15:51:39 发布

把你弄丢了

最新推荐文章于 2024-07-12 15:51:39 发布

阅读量1.1k

点赞数 1

文章标签： java

本文链接：https://blog.csdn.net/weixin_67856139/article/details/123649500

版权

window.onload 只会加载一次并且在整个网页中只能编写一次
执行时间：整个网页所有内容全部加载完成之后,才会执行
可以编写一个函数，通过onload调用
可以在body通过事件属性调用onload
//JavaScript编写方式
window.onload = function() {
               console.log("a")
           }
   function add(){
               console.log(123) ;
               }
               window.load()=add();
<body οnlοad="alert(123)"></body>

jQuery方式
可以加载多次并且在整个网页中可以编写多次
执行时间：网页结构绘制完成完成后,执行
//jQuery编写方式
$(function() {
               console.log("$a")
           })
jQuery编写的完整方式
jQuery编写function()方法的完整方式

$(document).ready(function(){

console.log("你好")
})
重点：javascript方式比jQuery方式的加载事件的加载速度快
二：jQuery的绑定事件方式有哪些？
元素.on("事件名".function(){})
元素.事件名(function(){})
//事件委托
// 将button的click事件委托给table
           //删除单行
$("table").on("click","button",function(){
$(this).parents("tr").remove();
})

//删除全部
$("#delAll").click(function() {
$("tr:gt(0)").remove();
})
案例：表格内容的增加和删除操作
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>事件</title>
       <script src="js/jquery-3.5.1.js"></script>
       <style>
           table,
           td,
           tr {
               border: 1px solid black;
               border-collapse: collapse;
           }

           .aa {
               background: #2e2929;
               color: white;
               font-weight: bold;
               text-align: center;
           }
       </style>
       <script>
           $(function() {
               // 给表格的第一行添加aa样式
               $("tr").first().addClass("aa");
               //绑定事件的两种方式
               //元素.on("事件名".function(){})
               //元素.事件名(function(){})

               //设置事件的方法
               //javascript: onclick
               //jquery:click

               // $("td button").click(function(e) {
               //    // e 事件对象
               //    // e.target 当前点击的对象
               //    // 我得知道我点击了谁? this

               //    //parents() : $ 往上查找父元素
               //    //将this变成$对象 $(this)
               //    $(this).parents("tr").remove();
               // })

//事件委托
// 将button的click事件委托给table
           //删除单行
$("table").on("click","button",function(){
$(this).parents("tr").remove();
})

//删除全部
$("#delAll").click(function() {
$("tr:gt(0)").remove();
})

//增加一行
$("#addOne").click(function() {
//$新建标签
var tr = $("<tr>");
tr.append($("<td>赵匡胤</td>"));
tr.append($("<td>卧榻之侧,岂容他人酣睡</td>"));
tr.append($("<td><button>删除</button></td>"));
//将标签加入到table中
$("table").append(tr);
})
           })
       </script>
   </head>
   <body>
       <table width="300px">
           <tr>
               <td>标题</td>
               <td>内容</td>
               <td>操作</td>
           </tr>
           <tr>
               <td>李白</td>
               <td>十步杀一人,千里不留行</td>
               <td><button>删除</button></td>
           </tr>
           <tr>
               <td>李白</td>
               <td>十步杀一人,千里不留行</td>
               <td><button>删除</button></td>
           </tr>
           <tr>
               <td>李白</td>
               <td>十步杀一人,千里不留行</td>
               <td><button>删除</button></td>
           </tr>
           <tr>
               <td>李白</td>
               <td>十步杀一人,千里不留行</td>
               <td><button>删除</button></td>
           </tr>
           <tr>
               <td>陈汤</td>
               <td>明犯我强汉者，虽远必诛</td>
               <td><button>删除</button></td>
           </tr>
           <tr>
               <td>陈汤</td>
               <td>明犯我强汉者，虽远必诛</td>
               <td><button>删除</button></td>
           </tr>
           <tr>
               <td>陈汤</td>
               <td>明犯我强汉者，虽远必诛</td>
               <td><button>删除</button></td>
           </tr>
       </table>
       <button id="delAll">全部删除</button>
       <button id="addOne">新增一行</button>
   </body>
</html>