jquery 常用的备忘
1."$(document).ready(function(){});"也可以简写成“$(function(){});”
等这个页面全部加载完之后就去执行js,函数用于在当前文档结构载入完毕后立即执行指定的函数,该函数的作用相当于window.onload事件。
<body> <script src="plugins/jquery-3.6.0.min.js"></script> <script type="text/javascript"> // $(document).ready(function(){ // $("p").click(function(){ // $(this).hide(); // }); // }); $(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </body>
2. e.target
target 属性规定哪个 DOM 元素触发了该事件。
event.target.nodeName //获取事件触发元素标签名(li,p,div,img,button…)
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML //获取事件触发元素的内容(li)
$(".nav.nav-treeview").children(".nav-item").click(function(e){ var t = e.target.className; alert(t); var t1 = e.target.innerHTML; alert(t1); var nav_id_val = $(e.target).attr('href'); alert(nav_id_val); });
<ul class="nav nav-treeview"> <li class="nav-item"> <a href="#" class="nav-link active" id="query_data"> <i class="fa fa-user-circle-o" aria-hidden="true"></i> <p class="nav-item-li" id="id1">111</p> </a> </li> <li class="nav-item"> <a href="#" class="nav-link" id="test"> <i class="fa fa-user-circle-o" aria-hidden="true"></i> <p class="nav-item-li" id="id2">222</p> </a> </li> </ul>
获取id的值。 点击到内容的时候“111”,触发的是“<p class="nav-item-li" id="id1">111</p>”
$(".nav.nav-treeview").children(".nav-item").click(function(e){ var nav_id_val = $(e.target).children('a p').attr('id'); if(nav_id_val == undefined){ nav_id_val = $(e.target).attr('id'); } });
3.多个类,子类
<ui class="nav-item menu-open"> <li class="nav-item">111</li> </ui> <ui class="nav nav-treeview"> <li class="nav-item" id="n1">aaa</li> </ui> <ui class="nav nav-treeview"> <li class="nav-item" id="n2">aaa</li> </ui> <ui class="nav nav-treeview"> <li class="nav-item" id="n3">aaa</li> </ui>
只点击 父类为class="nav nav-treeview" 的 class="nav-item"
<script src="plugins/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function(){ $(".nav.nav-treeview").children('.nav-item').click(function(e){ var nav_id_val = $(e.target).attr('id'); alert(nav_id_val); }); }); </script>
3. 多级选择
<ui class="nav nav-treeview"> <li class="nav-item"> <a class="nav-link">111</a> </li> </ui>
给a 中类添加一个s1的类,子类".nav-item"前面有空格
<script src="plugins/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function(){ $(".nav.nav-treeview .nav-item a").addClass("s1"); }); </script>
4.hide,empty,remove
<div id="div1" class="s1">hello world</div>
$("#div1").hide(); html源代码看到是: <div id="div1" class="s1" style="display: none;">hello world</div>
$("#div1").empty(); html源代码看到是: <div id="div1" class="s1"></div>
$("#div1").remove(); html源代码看不到痕迹的。