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  阅读(175)  评论(0编辑  收藏  举报