06-jQuery属性操作_scrolltop" is read-only-CSDN博客

本文链接：https://blog.csdn.net/qq_41986908/article/details/106848645

选择器

: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 方法

Simple-editor

<!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>