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源代码看不到痕迹的。

 

posted @ 2015-12-04 11:27  ike_li  阅读(172)  评论(0)  编辑  收藏  举报