jQuery學習筆記02--讀取和操作屬性，讀取和操作屬性節點，新增、刪除、改變類，操作html、css、value，操作事件，事件冒泡及阻止事件冒泡，預設行為及阻止預設行為，自動觸發事件

心湖中的石子發表於2020-10-23

1、讀取和操作屬性

   <script type="text/javascript"> 
        $(function (){
           function Person(){

           }

           var person1=new Person();
           person1.name="zhangsan";
           console.log(person1.name);
           person1["hometown"]="beijing";
           console.log(person1.hometown);
           //操作屬性
           //設定節點屬性值
           var myspan=document.getElementsByTagName("span")[0];
           myspan.setAttribute("name","urspan")
           //獲取節點屬性值
           var str=myspan.getAttribute("name");
           console.log(str);
        });    

    </script>

2、jQuery的attr方法讀取和操作屬性節點

1、attr（name|pro|key，val|fn）
作用獲取或者設定屬性節點的值
可以傳遞一個引數，也可以傳遞兩個引數
如傳遞一個引數，代表獲取屬性節點的值
如傳遞兩個引數，代表設定屬性節點的值

ps：不管找到多少個元素，都只返回第一個元素指定的屬性節點的值
2、removeAttr（name）
作用：刪除指定屬性節點

<html>
    <style type="text/css">
    div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px; background-color: greenyellow;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){   
            //找到多個，讀取第1個       
            console.log($("span").attr("class")); 
            //找到多個，設定多個，
            $("span").attr("class","box");
            console.log($("span").attr("class")); 
            //如果屬性節點不存在你，系統會自動新增該屬性
            $("span").attr("newcla","added");
            console.log($("span").attr("newcla")); 

            //刪除一個或多個屬性節點，多個屬性節點名可以用空格隔開
            $("span").removeAttr("newcla name");

        });    

    </script> 
<head>
</head>
<body>
    <span class="span1" name="myname1"></span>
    <span class="span2" name="myname2"></span>
</script>
</body>

</html>

3、jQuery的prop方法讀取和操作屬性節點

1、prop方法
官方建議，在操作屬性節點時，具有true和false兩個屬性的屬性節點，如checked，selected或者disabled使用prop（），其他的使用attr（）
2、removeProp方法
刪除屬性節點

<html>
    <style type="text/css">
    div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px; background-color: greenyellow;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){ 
            //找到所有span元素的第1個元素（下標為0）  
            $("span").eq(0).prop("demo","myname3");
            console.log($("span").prop("demo"));

            $("span").removeProp("demo");
            console.log($("span").prop("demo"));

            $("input").prop("checked","true");

        });    

    </script> 
<head>
</head>
<body>
    <span class="span1" name="myname1">第一個span</span><br/>
    <span class="span2" name="myname2">第二個span</span><br/>
    <input type="checkbox">
</script>
</body>

</html>

另一則操作屬性節點例項

<html>
    <style type="text/css">
    div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px; background-color: greenyellow;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){ 
            //給按鈕新增點選事件
            var btn=document.getElementsByTagName("button")[0];
            btn.onclick=function(){
                var input=document.getElementsByTagName("input")[0];
                var text=input.value;
                console.log(text);

                var img=document.getElementsByTagName("img")[0];
                //$("img").eq(0).prop("src","images/gril01.jpg")
                img.prop("src","images/gril01.jpg");
            }
        });    

    </script> 
<head>
</head>
<body>
    
    <input type="text">
    <button>changeimg</button><br/>
    <img src="images/gril04.jpg">
</script>
</body>

</html>

4、jQuery新增刪除類（class）刪除類，改變類

1、addClass（class|fn）
新增類屬性
2、removeClass（class|fn）
刪除類屬性
3、toggleClass（class|fn[,sw]）
有就刪除，沒有就新增

<html>
    <style type="text/css">
    div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px;}
    .class1{ background-color: green;}
    .class2{ background-color: red;}

    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){ 
            var btn=document.getElementsByTagName("button");
            btn[0].onclick=function(){
                $("div").addClass("class1");
            }
            btn[1].onclick=function(){
                $("div").removeClass("class1");
            }
            btn[2].onclick=function(){
                $("div").toggle("class1");
            }
        });    

    </script> 
<head>
</head>
<body>
    <button>新增類</button><br/>
    <button>刪除類</button><br/>
    <button>切換類</button><br/>
    <div ></div>

</script>
</body>

</html>

5、jQuery操作html

1、html（[val | fn]）

2、text（[val | fn]）

3、val（[val | fn|arr]）

<html>
    <style type="text/css">
    div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px;}
    .class1{ background-color: green;}
    .class2{ background-color: red;}

    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){ 
            var btn=document.getElementsByTagName("button");
            btn[0].onclick=function(){
                //和原生的innerHTML一致
                $("div").html("<p>我是一些段落<span>我是一個span</span></P>");
            }
            btn[1].onclick=function(){
                console.log($("div").html());
            }
            btn[2].onclick=function(){
                //和原生的innerText一致
                $("div").text("<p>我是一些段落<span>我是一個span</span></P>");
            }
            btn[3].onclick=function(){
                //和原生的innerText一致
                console.log($("div").text()); 
            }
            btn[4].onclick=function(){
                //和原生的value屬性一致
                $("input").val("請輸入內容");
            }
            btn[5].onclick=function(){
                //和原生的value屬性一致
                console.log($("input").val());   
            }
           
        });    

    </script> 
<head>
</head>
<body>
    <button>設定html</button><br/>
    <button>獲取html</button><br/>
    <button>設定text</button><br/>
    <button>獲取text</button><br/>
    <button>設定value</button><br/>
    <button>獲取value</button><br/>
    <div ></div>
    <input type="text">

</script>
</body>

</html>

6、jQuery操作css

<html>
    <style type="text/css">
    .father{width:200px; height: 200px; background-color: green; border: 1px solid gray;
    position: relative;}
    .son{width:100px; height: 100px; background-color: blue; position: absolute; left:50;top:50px}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){ 
            var btns=document.getElementsByTagName("button");
            btns[0].onclick=function(){
                console.log($(".father").width()); 
                console.log($(".son").offset().top);
                
            }
            btns[1].onclick=function(){
                console.log($(".father").width("500px")); 
            }
        });    

    </script> 
<head>
</head>
<body>
    <button>獲取樣式</button><br/>
    <button>設定樣式</button><br/>
   
    <div class="father" >
        <div class="son"></div>
    </div>


</script>
</body>

</html>

另一案例：

<html>
    <style type="text/css">
    div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px;}
    .class1{ background-color: green;}
    .class2{ background-color: red;}

    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){ 
            $("div").css("width","200px")
            $("div").css("backgroundColor","blue")
            //批量設定css
            $("div").css({
                height:"300px",
                border:"5px solid red"
            });
            //獲取css樣式值
            console.log($("div").css("width")); 
        });    

    </script> 
<head>
</head>
<body>
    <button>設定html</button><br/>
    <button>獲取html</button><br/>
    <button>設定text</button><br/>
    <button>獲取text</button><br/>
    <button>設定value</button><br/>
    <button>獲取value</button><br/>
    <div ></div>
    <input type="text">

</script>
</body>

</html>

再一例

<html>
    <style type="text/css">
    div{ overflow:scroll; margin:5px 0; border:1px solid gray;width: 110px; height: 400px;}
    .class1{ background-color: green;}
    .class2{ background-color: red;}

    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){ 
            var btns=document.getElementsByTagName("button");
            btns[0].onclick=function(){
                console.log($(".scroll").scrollTop());
            }
            btns[1].onclick=function(){
                $(".scroll").scrollTop(200);
            }
            
        });    

    </script> 
<head>
</head>
<body>
    <div class="scroll">這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字這裡是一些文字</div>
    <button>設定</button>
    <button>獲取</button>
</script>
</body>

</html>

7、jQuery操作事件

jQuery有兩種繫結事件方式
1、eventName（fn）//推薦方法
2、on（eventName，fn）//有些方法只能通過on的方法來實現

<html>
    <style type="text/css">
    div{ overflow:scroll; margin:5px 0; border:1px solid gray;width: 110px; height: 400px;}
    .class1{ background-color: green;}
    .class2{ background-color: red;}

    </style>
<script type="text/javascript"> 
        $(function (){ 
            //eventName（fn）方法。推薦方法
            $("button").eq(0).click(function(){
                console.log("這是jQuery的事件回撥函式");
            })
            //on（eventName，fn）
            $("button").eq(1).on("click",function(){
                console.log("這是jQuery的事件回撥的另一種方式函式");
            });
            //新增多個事件在 一個按鈕上
            $("button").eq(0).mouseenter(function(){
                console.log("滑鼠進入時函式");
            })

            function test(){
                alert("hello world");
            }
            //移除載入在指定button上的所有事件
            $("button").eq(1).off();
            //移除載入在指定button上的指定事件
            $("button").eq(0).off("click");
            //移除指定型別的指定事件（需要傳入兩個引數）
            $("button").eq(0).off("click",test());
        });    

    </script> 
<head>
</head>
<body>
    <button>設定</button>
    <button>獲取</button>
</script>
</body>

</html>

8、關於事件冒泡及阻止冒泡

1、return false;
2、event.stopPropagation();

 <html>
    <style type="text/css">
    .father{ width: 200px; height: 200px; background-color: green;}
    .son{ width: 100px; height: 100px; background-color: yellow;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){ 
            //以下會產生事件冒泡
            $(".father").click(function (){
                console.log("this is father div");
            });
            
            $(".son").click(function (){
                console.log("this is son div");

                //返回false會阻止事件冒泡,即事件不再向下傳導
                return false;
            });

            $(".son").click(function (event){
                console.log("this is son div");
                //以下也可以阻止冒泡
                event.stopPropagation();
                
            });
            
        });    

    </script> 
<head>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.sina.com">我是百度</a>
    <form action="http://www.baidu.com">
        <input type="text">
        <input type="submit">
    </form>
</body>

</html>

9、預設行為及阻止預設行為

1、return false;
2、event.preventDefault();

<html>
    <style type="text/css">
    .father{ width: 200px; height: 200px; background-color: green;}
    .son{ width: 100px; height: 100px; background-color: yellow;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){ 
            $("a").click(function(){
                alert("彈出註冊框");
                //阻止預設行為,不再前往連線
                return false;
            });

            //或者另一種方式阻止預設行為
            $("a").click(function(event){
                alert("彈出註冊框");
                //阻止預設行為,不再前往連線
                event.preventDefault();
            })

            
        });    

    </script> 
<head>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.sina.com">我是百度</a>
    <form action="http://www.baidu.com">
        <input type="text">
        <input type="submit">
    </form>
</body>

</html>

10、自動觸發事件

1、trigger
會自動觸發冒泡
自動觸發事件的時候，會觸發預設行為
2、triggerHandler
不會自動觸發冒泡
自動觸發事件的時候，不會觸發預設行為

<html>
    <style type="text/css">
    .father{ width: 200px; height: 200px; background-color: green;}
    .son{ width: 100px; height: 100px; background-color: yellow;}
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery庫-->
    <script type="text/javascript"> 
        $(function (){ 
            
            //或者另一種方式阻止預設行為
            $(".father").click(function(){
                console.log("father");
            });
            //自動觸發了father的click事件
            //$(".father").trigger("click");
            $(".father").triggerHandler("click");
            
        });    

    </script> 
<head>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.sina.com">我是百度</a>
    <form action="http://www.baidu.com">
        <input type="text">
        <input type="submit">
    </form>
</body>

</html>

阻止捕獲和冒泡，阻止預設行為
2020-10-28
stopPropagation() 阻止事件冒泡
2018-11-02
事件
JavaScript阻止事件冒泡
2018-07-16
JavaScript事件
原生js如何阻止事件冒泡
2019-03-29
JS事件
阻止游標預設事件
2018-07-09
事件
前端學習程式碼例項-JavaScript阻止事件冒泡
2019-04-30
前端JavaScript事件
JavaScript 阻止事件冒泡程式碼例項
2019-05-02
JavaScript事件
zepto繫結事件改變冒泡事件流
2018-11-15
事件
jquery 操作HTML data全域性屬性快取的坑
2019-07-27
jQueryHTML快取
JQ操作標籤--樣式操作、位置操作、尺寸、文字操作、獲取值操作、屬性操作、文件處理、事件
2024-06-27
事件
前端與移動開發----webAPI----文字框事件，滑鼠事件，標籤屬性操作方式
2020-11-24
前端移動開發WebAPI事件
(JavaScript學習記錄)：jQuery 屬性操作
2020-09-30
JavaScriptjQuery
jQuery事件物件event的屬性和方法
2018-03-10
jQuery事件物件
JQuery6：事件冒泡
2018-11-14
jQuery事件
【JS基礎】阻止預設操作
2020-08-06
JS
關於js事件冒泡和事件捕獲
2018-10-18
JS事件
理解js的事件冒泡和事件捕獲
2018-04-24
JS事件
移動端點透事件--阻止滾動事件
2018-07-10
事件
Vue事件獲取觸發事件物件和繫結事件物件
2020-11-29
Vue事件物件
JavaScript 事件冒泡
2018-11-08
JavaScript事件
事件的冒泡
2020-11-09
事件
JavaScript和JQuery的滑鼠mouse事件冒泡處理
2021-01-27
JavaScriptjQuery事件
JavaScript中的物件學習筆記（屬性操作）
2018-06-11
JavaScript物件筆記
微信小程式如何阻止多層巢狀元件的點選事件冒泡
2018-12-03
微信小程式巢狀元件事件
刪除事件（解綁事件）/ 刪除事件相容性解決方案
2020-10-03
事件
java讀取excel為物件並進行讀寫操作
2020-11-03
JavaExcel物件
企圖為vuex新增發布訂閱：事件繫結和事件觸發
2019-03-16
Vue事件
DOM操作小練習-觸發事件獲取系統時間的程式碼原理
2020-11-13
事件
前端筆記之jQuery（下）事件&節點操作&淨位置&拖拽&頁面捲動值&遍歷JSON
2019-04-02
前端筆記jQuery事件JSON
為 protocol 中屬性新增預設值
2019-04-17
Protocol
React學習手記2-屬性校驗和預設屬性
2019-02-26
React
jQuery屬性操作之.val()函式
2018-12-02
jQuery函式
Linux 檔案屬性及詳細操作
2021-12-14
Linux
Python 複數屬性及操作介紹
2021-06-06
Python
HTML <script> 指令碼的 async 與 defer 屬性及不同屬性的執行時機與 DOMContentLoaded 事件的關係
2024-05-01
HTML指令碼事件
redis cluster節點/新增刪除操作
2020-07-14
Redis
Cookie新增、獲取以及刪除操作
2018-06-20
Cookie
<react學習筆記(6)>知識點回顧(2)事件繫結及傳參，元件，屬性和狀態，表單元素
2018-12-24
React筆記事件元件