jQuery總結02_jq的dom操做+屬性操做

時間 2019-12-14

標籤 jquery 總結 dom 屬性欄目 JQuery 简体版

原文原文鏈接

一：JQuery知識點

*:JQuery的dom操做

*：獲取節點、給節點添加內容

*：動態建立dom節點

好比動態建立表格等，在js裏面進行完成。javascript

*刪除節點

這裏面的刪除就是將其放在了一個地方，並非真的刪除，以後可使用。css

*：document方法

1:.val()能夠獲取到文本框裏面的值，若括號裏面有值則直接爲賦值。html

Eg:加法計算器java

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.4.2-vsdoc.js"></script>
    <script src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#buttons").click(function() {
                var tex1 = $("#tex1").val();
                var tex2 = $("#tex2").val();
                var tex3 = parseInt(tex1, 10) + parseInt(tex2,10);
                $("#tex3").val(tex3);
            });
        });
    </script>
</head>
<body>
    <input type="text" id="tex1"/><input type="button" value="+"/><input type="text" id="tex2"/>
    <input type="button" value="=" id="buttons"/><input type="text" id="tex3"/>
</body>
</html>

<a href="http://images2015.cnblogs.com/blog/679140/201510/679140-20151024204414739-376621517.png">
　　<img style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="https://images2015.cnblogs.com/blog/679140/201510/679140-20151024204415567-1450693607.png" alt="image" width="497" height="109" border="0"></a>

2:能夠經過attr屬性來進行隱藏。jquery

3:在jq裏面經過下面的這種形式瀏覽器

$(f u n c t i o n ()); 这是把一个$ dom

Eg:閱讀說明書函數

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.4.2-vsdoc.js"></script>
    <script src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        var leftSeconds = 10;
        var intarvalId;
        $(function() {
            $("#buttons").attr("disabled", true);
            intarvalId = setInterval("CountDom()", 1000);
        });
        function CountDom() {
            if(leftSeconds<=0) {
                $("#buttons").val("贊成");
                $("#buttons").attr("disabled", false);
                clearInterval(intarvalId);
                return;
            }
            leftSeconds--;
            $("#buttons").val("請仔細閱讀" + leftSeconds + "秒");
        }
    </script>
</head>
<body>
    <textarea>在使用前請仔細閱讀說明書。</textarea>
    <input type="button" id="buttons" value="贊成"/>
</body>
</html>

Eg：無刷新評論post

Eg:：文本顏色變化性能

代碼：

Eg:代碼：

*：節點替換

*:樣式的操做

*：練習代碼

選中的高亮顯示，裏面就是有如何在jq裏面添加css樣式。

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.4.2-vsdoc.js"></script>
    <script src="js/jquery-1.4.2.js"></script>
    <style type="text/css">
        #tables {
            margin: auto;
        }
    </style>
    <script type="text/javascript">
        //$(function() {
        //    $("#tables tr:first").css("font-size", 30);
        //    $("#tables tr:last").css("color", "red");
        //    $("#tables tr:gt(0) :lt(6) ").css("font-size", 28);
        //    $("#tables tr:gt(0):even").css("background","red");
        //});
        $(function() {
            $("#tables tr").click(function() {
                $("td", $(this).css("background","red"));
            });
        });
         
    </script>
</head>
<body>
    <table id="tables">
        <tr><td>姓名</td><td>年齡</td></tr>
        <tr><td>小張</td><td>2</td></tr>
        <tr><td>小紅</td><td>43</td></tr>
        <tr><td>小路</td><td>23</td></tr>
        <tr><td>小李</td><td>23</td></tr>
    </table>
</body>
</html>

*取的RadioButton操做

*：實例 [全選和反選]

01：這裏主要的就是將之前學習到的知識，得以回顧，這樣子好記憶。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.4.2-vsdoc.js"></script>
    <script src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#setAll").click(function() {
                $("#List :checkbox").attr("checked",true);    //這是div下面的button
            });
            $("#notsetAll").click(function() {
                $("#List :checkbox").attr("checked",false);
            });
            $("#reverse").click(function() {
                $("#List :checkbox").each(function() {
                    $(this).attr("checked",!$(this).attr("checked"));
                });
            });
        });
    </script>
</head>
<body>
    <div id="List">
        <input type="checkbox"/>籃球1<br/>
        <input type="checkbox"/>足球2<br/>
        <input type="checkbox"/>籃球3<br/>
        <input type="checkbox"/>籃球4<br/>
        <input type="checkbox"/>籃球5<br/>
    </div>
    <input type="button" value="全選" id="setAll"/>
    <input type="button" value="全不選" id="notsetAll"/>
    <input type="button" value="反選" id="reverse"/>
</body>
</html>

*：事件

*:jquery裏面的click事件就是封裝的bind函數，表明點擊事件，

*:hover函數，這裏就是監聽鼠標的事件。

*:超連接的禁用

<script type="text/javascript">
 
        $(function() {
 
            $("a").click(function (e) {
 
                alert("今天Link不行了");
 
                e.preventDefault(0);  //表示禁用了連接
 
            });
 
        });
 
</script>
 
<a href="Hover.html">Link</a>