海阔天空

手机扫码查看

2020javaweb教程之jQuery设置属性、获取属性

获取

DOM：document.getElementById(“ele”);
jquery：$(“#ele”)

DOM:操作的是JavaScript原生对象
jQuery：操作的是自己封装的对象，当中包含了原生对象
注意：只有jQuery对象才可以操作jQuery函数

获得内容

<p>这是第一段文本</p>
<p><span>这是第二段文本</span></p>
<p>这是第三段文本</p>
<input type="password" id="pwd"><br>
<button id="btn1">获取第一段文本内容</button>
<button id="btn2">获取第二段文本html内容</button>
<button id="btn3">获取密码框内容</button>



<script>
    $(function(){
        $("#btn1").click(function () {
            const s = $("p:first").text();
            console.log(s);
        });
        $("#btn2").click(function () {
            var s=$("p:eq(1)").html();
            console.log(s);
        });
        $("#btn3").click(function () {
            var value=$("input[type='password']").val();
            console.log(value);
        })
    })
</script>

获取属性 attr/prop

$(“ele”).attr(“action”);

设置属性 attr/prop
$(“ele”).attr(“checkbox”,true);

全选、反选、全不选

<input type="checkbox" value="apple">苹果
<input type="checkbox" value="banana">香蕉
<input type="checkbox" value="pitaya">火龙果
<input type="checkbox" value="strawberry">草莓 <br>
<button id="btn1">全选</button>
<button id="btn2">全不选</button>
<button id="btn3">反选</button>
<script>
    $(function(){
        $("#btn1").click(function(){//全选
            var values=$("input[type='checkbox']");
            for(var i=0;i<values.length;i++){
                $(values[i]).prop("checked",true);
            }
        });
        $("#btn2").click(function(){//全不选
            var values=$("input[type='checkbox']");
            for(var i=0;i<values.length;i++){
                $(values[i]).prop("checked",false);
            }
        });
        $("#btn3").click(function(){//反选
            var values=$("input[type='checkbox']");
            for(var i=0;i<values.length;i++){
                if($(values[i]).prop("checked")===true){
                    $(values[i]).prop("checked",false)
                }else $(values[i]).prop("checked",true)
            }
        });
    })
</script>