06-jQuery屬性操作

選擇器

:empty

:empty選擇器是選擇符合條件的沒有節點（包括文本節點）的元素。

與:parent是相反的。

:empty和:parent`都是包含文本節點的。

:parent

:parent選擇器是選擇符合條件的有節點（包括文本節點）的元素。

與:empty是相反的。

:parent是jQuery衍生出來的，不是原有css的規範的一部分，使用:parent不能利用原生DOM提供的querySelectorAll()來提高性能，爲了在現代瀏覽器中提高性能，應該先使用純css然後使用.filter(":parent").

:contains(text)

:contains()選擇器是選擇所有包含指定文本的元素。

:contains()匹配的文本可以出現在所選擇的元素，或其子元素，或者二者都有。匹配的文字可以是純文字，也可以加引號。

:has(selector)

:has()選擇器是選擇元素其中至少包含指定選擇器匹配的一個種元素。

:parent是jQuery衍生出來的，不是原有css的規範的一部分，使用:parent不能利用原生DOM提供的querySelectorAll()來提高性能，爲了在現代瀏覽器中提高性能，建議使用$("your-pure-css-selector").has(selector/DOMElement)；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery屬性操作</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <style>
    .red{
        background: red;
    }
    .black{
        background: black;
    }
    </style>
</head>
    <table>
        <tr>
            <td>this is content</td>
            <td></td>
            <td>:contains</td>
        </tr>
        <tr>
            <td></td>
            <td>this is content</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><span>:has</span></td>
            <td>this is content</td>
        </tr>
    </table>
<body>
</body>
<script>
    $(function () {
        $("td:empty").css("background","rgb(186,231,255)");
        $("td:parent").css("background","rgb(255,204,199)");
        $("td:contains(contains)").css("background","rgb(181,245,236)");
        $("td:has(span)").css("background","rgb(217,247,190)");
    });
</script>

</html>

相關方法

attr && prop

attr()和prop()相似，都是關於jQuery對象的屬性(或特性)的操作，

attr()和prop()有兩個不同的傳參方法，只傳入屬性名稱的話，作用是返回屬性的值，但是如果你傳入了屬性名稱和屬性值的話，他的作用就是設置屬性。

當然如果傳入屬性名稱與屬性值一一對應的對象，或者生成這樣對象的方法也是可以設置多個屬性的。

如果傳入的屬性沒有設置時會返回undefined.

若要檢索和更改DOM屬性,比如元素的checked, selected, 或 disabled狀態，請使用.prop()方法。

Attributes vs. Properties

attributes和properties之間的差異在特定情況下是很重要。jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值時，會返回 property 的值，這就導致了結果的不一致。從 jQuery 1.6 開始， .prop()方法方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 應使用.prop()方法進行取值或賦值。在jQuery1.6之前，這些屬性使用.attr()方法取得，但是這並不是元素的attr屬性。他們沒有相應的屬性（attributes），只有特性(property)。

例如，考慮一個DOM元素的HTML標記中定義的<input type="checkbox" checked="checked" /> ，並假設它是一個JavaScript變量命名的elem ：

elem.checked true (Boolean) 將隨着複選框狀態的改變而改變

$(elem).prop("checked") true (Boolean) 將隨着複選框狀態的改變而改變

elem.getAttribute("checked") "checked" (String) 複選框的初始狀態;不會改變

$(elem).attr("checked") (1.6) "checked" (String) 複選框的初始狀態;不會改變

$(elem).attr("checked") (1.6.1+) "checked" (String) 將隨着複選框狀態的改變而改變

$(elem).attr("checked") (pre-1.6) true (Boolean) 將隨着複選框狀態的改變而改變

根據W3C的表單規範，在checked屬性是一個布爾屬性，這意味着,如果這個屬性（attribute）是目前存在，即使，該屬性沒有對應的值，或者被設置爲空字符串值，或甚至是"false"，相應的屬性（property）爲true。這纔是真正的所有布爾屬性（attributes）。

然而，要記住的最重要的概念是checked特性（attribute）不是對應它checked屬性（property）。特性（attribute）實際對應的是defaultChecked屬性（property），而且僅用於設置複選框最初的值。checked特性（attribute）值不會因爲複選框的狀態而改變，而checked屬性（property）會因爲複選框的狀態而改變。因此，跨瀏覽器兼容的方法來確定一個複選框是否被選中，是使用該屬性（property）：

if ( elem.checked )

if ( $(elem).prop("checked") )

if ( $(elem).is(":checked") )

對於其他的動態屬性，同樣是true，比如 selected 和 value.

如果你使用jQuery 1.6 ，代碼if ( $(elem).attr("checked") )，將獲得一個屬性(attribute) ，它不改變該複選框被選中和選中。它只是用來存儲默認或選中屬性的初始值。爲了保持向後兼容，.attr() 方法從 jQuery 1.6.1+ 開始除了返回屬性值外，還會更新 property 屬性，因此 boolean attribute（布爾屬性）不需要通過 .prop() 來改變其值。推薦使用上述方法之一，來取得 checked 的值。要想知道在最新的 jQuery 版本中,它們是如何工作的，請點擊下例中的 check。

`elem.checked`	`true` (Boolean) 將隨着複選框狀態的改變而改變
`$(elem).prop("checked")`	`true` (Boolean) 將隨着複選框狀態的改變而改變
`elem.getAttribute("checked")`	`"checked"` (String) 複選框的初始狀態;不會改變
`$(elem).attr("checked")` (1.6)	`"checked"` (String) 複選框的初始狀態;不會改變
`$(elem).attr("checked")` (1.6.1+)	`"checked"` (String) 將隨着複選框狀態的改變而改變
`$(elem).attr("checked")` (pre-1.6)	`true` (Boolean) 將隨着複選框狀態的改變而改變

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery屬性操作</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <style>
        .red {
            background: #ffccc7;
        }

        .black {
            background: #bfbfbf;
        }

        td {
            background-color: rgb(186,231,255);
            width: 200px;
            height: 20px;
            text-align: center;
        }
    </style>
</head>
<table>
    <tr>
        <td class="prop">prop</td>
        <td id="prop">prop</td>
        <td>prop</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="attr">attr</td>
        <td id="attr">attr</td>
        <td>attr</td>
    </tr>
</table>

<body>
</body>
<script>
    $(function () {
        var props = $("td:contains(prop)");
        console.log("第一個prop的class 是：" + props.prop("class"));
        props.prop("class","prop red");
        var attrs = $("td:contains(attr)");
        console.log("第一個attr的class 是：" + attrs.attr("class"));
        attrs.attr({class: "attr black",
                    name: "attr"});
    });
</script>

</html>

案例 - 簡單編輯器

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery屬性操作</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            height: 64px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 8px;
            bottom: auto;
        }
        header button{
            width: 108px;
            height: 48px;
            outline: none;
            line-height: 48px;
            border: none;
            border-radius: 4px;
            color: #333333;
            background-color: #ffffff80;
        }

        footer {
            height: 32px;
            position: absolute;
            top: auto;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #5a5a5a;
        }

        #content {
            position: absolute;
            top: 64px;
            left: 0;
            right: 0;
            bottom: 32px;

        }
        #content-textarea {
            position: absolute;
            width: 60%;
            top: 10%;
            left: 20%;
            right: 20%;
            bottom: 10%;
            padding: 32px;
            border: none;
            outline: none;
            border-radius: 20px 20px 0px 20px;
        }

        #content-textarea:focus {
            box-shadow: 0px 0px 6px 2px #33333330;
        }

        .read-only {
            box-shadow: inset 0px 0px 6px 2px #FFFFFF80;
        }
        .read-only:focus {
            box-shadow: inset 0px 0px 6px 2px #FFFFFF80 !important;
        }
        .header-red {
            background-color: #ff4d4f;
        }

        .content-red {
            background-color: #fff1f0;
        }

        .textarea-red {
            background-color: #ffccc7;
        }

        .header-blue {
            background-color: #40a9ff;
        }

        .content-blue {
            background-color: #e6f7ff;
        }

        .textarea-blue {
            background-color: #bae7ff;
        }
    </style>
</head>
<table>
    <header class="header-red">
        <button id="is-read-only">只讀</button>
        <button id="change-skin">換膚</button>
    </header>
    <div id="content" class="content-red">
        <textarea id="content-textarea" class="textarea-red"></textarea>
    </div>
    <footer></footer>
</table>

<body>
</body>
<script>
    $(function () {
        var isReadOnly = $("#is-read-only");
        var changeSkin = $("#change-skin");
        var header = $("header");
        var content = $("#content");
        var contentTextarea = $("#content-textarea");
        var contentTextareaBackgroundColor = contentTextarea.css("background-color");
        isReadOnly.click(function () {
            var readonly = contentTextarea.prop("readonly");
            if (readonly) {
                contentTextarea.removeClass("read-only");
                contentTextarea.prop("readonly", "")
            } else {
                var contentCss = content.css("background-color");
                contentTextarea.addClass("read-only");
                contentTextarea.prop("readonly", "readonly")
            }

        });
        changeSkin.click(function () {
            var readonly = contentTextarea.prop("readonly");
            if (readonly) {
                header.toggleClass("header-blue header-red");
                content.toggleClass("content-blue ontent-red");
                contentTextarea.toggleClass("textarea-blue textarea-red");
            } else {
                // 未只讀
                header.toggleClass("header-blue header-red");
                content.toggleClass("content-blue content-red");
                contentTextarea.toggleClass("textarea-blue textarea-red");
            }
        });
        contentTextarea.click(function () {
            var readonly = contentTextarea.prop("readonly");
            if (readonly) {
                alert("只讀狀態")
            }
        });
    });
</script>

</html>

文本操作相關方法

樣式操作相關

尺寸位置操作相關

scrollTop 方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery屬性操作</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            height: 64px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 8px;
            bottom: auto;
            transition: 0.75s;
        }

        header button {
            width: 108px;
            height: 48px;
            outline: none;
            line-height: 48px;
            border: none;
            border-radius: 4px;
            color: #333333;
            background-color: #ffffff80;
            transition: 0.75s;
        }

        footer {
            height: 32px;
            position: absolute;
            top: auto;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #5a5a5a;

        }

        #content {
            position: absolute;
            top: 64px;
            left: 0;
            right: 0;
            bottom: 32px;
            transition: 0.75s;

        }

        #content-textarea {
            padding: 32px;
            border: none;
            outline: none;
            resize: none;
            transition: 0.75s;
        }

        .content-textarea {
            position: absolute;
            width: 60%;
            top: 10%;
            left: 20%;
            right: 20%;
            bottom: 10%;
            border-radius: 4px;
        }

        .content-textarea-full-screen {
            position: absolute;
            width: calc(100% - 64px);
            top: 0%;
            left: 0%;
            right: 0%;
            bottom: 0%;
            border-radius: 0px;
        }

        #content-textarea:focus {
            box-shadow: 0px 0px 6px 2px #33333330;
        }

        ::-webkit-scrollbar {
            /* padding: 20px; */
            /*滾動條整體樣式*/
            width: 2px;
            /*高寬分別對應橫豎滾動條的尺寸*/
            height: 1px;
        }

        ::-webkit-scrollbar-thumb {
            /*滾動條裏面小方塊*/
            border-radius: 10px;
            /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);     */
            background: #33333380;
        }

        ::-webkit-scrollbar-track {
            /*滾動條裏面軌道*/
            /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) ; */
            border-radius: 10px;
            background: #ededed;
        }

        .read-only {
            box-shadow: inset 0px 0px 6px 2px #FFFFFF80;
        }

        .read-only:focus {
            box-shadow: inset 0px 0px 6px 2px #FFFFFF80 !important;
        }

        .header-red {
            background-color: #ff4d4f;
        }

        .content-red {
            background-color: #fff1f0;
        }

        .textarea-red {
            background-color: #ffccc7;
        }

        .header-blue {
            background-color: #40a9ff;
        }

        .content-blue {
            background-color: #e6f7ff;
        }
        .textarea-blue {
            background-color: #bae7ff;
        }
    </style>
</head>
<table>
    <header class="header-red">
        <button id="is-read-only">只讀</button>
        <button id="change-skin">換膚</button>
        <button id="preset">預設文章</button>
        <button id="full-screen">全屏</button>
        <button id="set-top">返回頂部</button>
    </header>
    <div id="content" class="content-red">
        <textarea id="content-textarea" class="textarea-red content-textarea"></textarea>
    </div>
    <footer></footer>
</table>

<body>
</body>
<script>
    $(function () {
        var header = $("header");
        var isReadOnly = $("#is-read-only");
        var changeSkin = $("#change-skin");
        var preset = $("#preset");
        var fullScreen = $("#full-screen");
        var content = $("#content");
        var setTop = $("#set-top");
        var contentTextarea = $("#content-textarea");
        var contentTextareaBackgroundColor = contentTextarea.css("background-color");
        isReadOnly.click(function () {
            var readonly = contentTextarea.prop("readonly");
            if (readonly) {
                contentTextarea.removeClass("read-only");
                contentTextarea.prop("readonly", "")
            } else {
                var contentCss = content.css("background-color");
                contentTextarea.addClass("read-only");
                contentTextarea.prop("readonly", "readonly")
            }
        });
        changeSkin.click(function () {
            var readonly = contentTextarea.prop("readonly");
            if (readonly) {
                header.toggleClass( "header-red header-blue");
                content.toggleClass("content-red content-blue");
                contentTextarea.toggleClass("textarea-red textarea-blue");
            } else {
                // 未只讀
                header.toggleClass( "header-red header-blue");
                content.toggleClass("content-red content-blue");
                contentTextarea.toggleClass("textarea-red textarea-blue");
            }
        });
        contentTextarea.click(function () {
            var readonly = contentTextarea.prop("readonly");
            if (readonly) {
                alert("只讀狀態")
            }
        });
        contentTextarea.scroll(function () {
            scrollTop = contentTextarea.scrollTop;
            if (contentTextarea.scrollTop() < 500) {
                setTop.hide();
            } else {
                setTop.show();
            }
        });
        preset.click(function () {
            var readonly = contentTextarea.prop("readonly");
            if (readonly) {
                alert("只讀狀態");
            } else {
                // 未只讀
                var htmlText = `評《我不是藥神》——我們只想活着
《我不是藥神》是由文牧野執導，徐崢、王傳君、週一圍等主演的電影，該片由真實社會事件改編，講述了一位藥店店主從印度代購治療慢粒白血病的藥獲得極大利潤，開始販藥斂財之道後良心發現的故事，該片獲得第十四屆中國長春電影節金鹿獎最佳故事片獎、第四十二屆蒙特利爾國際電影節主競賽單元最佳劇本獎等，《我不是藥神》，“藥”你笑、也“藥”你哭，渡己還是渡人；人有一種病治不好，那就是窮病；我不想死，我想活着，行嗎？

一個是隻想努力掙錢獲得孩子撫養權的程勇，一個是爲女兒治病不惜委身風塵的單親媽媽，一個是身處水深火熱當中的重疾患者……文牧野用獨特的眼光抓住了觀衆的笑點、淚點、痛點，故事情節、鏡頭交替、蒙太奇的運用等，把觀衆從影片外拉入影片當中，“你敢保證你一輩子不得病？”純粹、直接、有力。電影並不只是電影，他更是現實生活的反映。影片中徐崢的演技不只是炸裂，更是一種掏心肺放脫自我的表現，有時候你會發現，影片越貼近真實，真實就會越荒誕。這部影片用它最真實、最貼近生活的劇情和演員撕心裂肺的表演讓觀衆的內心與劇情相互交融，藥物在中國絕對是“不可說”的，但是這部影片說了它能說的，也不顯山不露水的說了它不能說的，講的是荒誕，看過以後才發現現實不就是如此荒誕嗎？

影片的現實主義特色還體現在了模糊的道德界限上，到底是真賣藥、還是賣假藥，是非對錯是混淆的，道德根本我從評判，這種亦正亦邪的主角以及界限模糊的道德觀足夠反應真實，以致於能揭露人生蒼涼的底色，人性的自私與利他，並教人感同身受淚流滿面。《我不是藥神》這個片名很合適，因爲在程勇身上展現的不是神性，而是人性。這部現實主義電影中，沒有非黑即白的道德觀，只有不同立場的針鋒相對，於是更加貼近這個充滿矛盾的複雜世界。

影片最後衆人摘掉口罩送行，這樣的一種儀式感直戳觀衆內心，跟《辛德勒的名單》片尾一樣，有異曲同工之妙。影片通過紮實流暢的敘事和層層遞進的激勵事件，讓人物的每一次選擇和前後的巨大轉變都合情合理。觀衆也會通過這個立體的人物，體會到他身上迸發的情感力量，感受到他身上承載的沉重社會現實問題帶來的刺痛感。

我不是藥神，治不好這世界，但能改變一點，總歸是會好的
————————————————
版權聲明：本文爲CSDN博主「柔軟的一元夢想家」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_43388254/article/details/106840339`;
                contentTextarea.val(htmlText);
            }
        });
        fullScreen.click(function () {
            contentTextarea.toggleClass("content-textarea content-textarea-full-screen");
        });
        setTop.click(function (params) {
            contentTextarea.scrollTop(0);
        });
    });
</script>

</html>

06-jQuery屬性操作

選擇器

:empty

:parent

:contains(text)

:has(selector)

相關方法

attr && prop

Attributes vs. Properties

類操作相關方法

addClass()

.hasClass()

.removeClass()

.toggleClass()

案例 - 簡單編輯器

文本操作相關方法

樣式操作相關

尺寸位置操作相關

scrollTop 方法

DAPPER 事務 TRANSACTION

ubuntu 安裝 ibus-sunpinyin

06-jQuery屬性操作

02-jQuery入口函數

jQuery 獲取 input:file 文件路徑( Firefox for Ubuntu )

對郎讀最初版本的回顧

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結