jQuery属性操作和快捷操作

来源：互联网发布：中甲数据库编辑：程序博客网时间：2024/06/07 03:17

1.属性操作

<body>    <input type="text" class="apple" id="username" value="tom" address="beijing" /></body>    <script type="text/javascript">        $("#username").attr("value");// 获取属性值        $("#username").attr("value", "jack");// 设置属性值        $("#username").removeAttr("address");// 删除属性        //$("#username").removeAttr("type");// type属性禁止删除和修改！！！        var jn = {name:'zhangsan', class:'banana'};        $("#username").attr(jn);// 同时给多个属性设置值        // 设置某个属性的值为某个函数的返回值        $("#username").attr("value", getValue());        function getValue() {            return "lisi";        }    </script>

2.快捷操作

2.1 class属性值操作

<body>    <div class="apple orange" id="div_1">This is jquery subject.</div></body>    <script type="text/javascript">        $("#div_1").attr('class', 'banana');// 赋值        $("#div_1").attr('class');// 取值        $("#div_1").removeAttr('class');// 删除class属性        $("#div_1").addClass('apple');// 给class属性追加值        $("#div_1").addClass('orange');// 给class属性追加值        // class属性可以有多个值！！！        $("#div_1").removeClass('apple');// 删除class属性的某个值        $("#div_1").toggleClass('banana');// 开关效果，有就删除，没有就添加    </script>

2.2 标签包含内容操作

<body>    <div>This is <p>jquery <span>subject</span></p></div>    <input type="button" value="获取" onclick="getContent()" />    <input type="button" value="设置" onclick="setContent()" /></body><script>    function getContent() {        // 获取普通文本和html标签        // 结果：This is <p>jquery <span>subject</span></p>        console.log($("div").html());        // 获取普通文本内容        // 结果：This is jquery subject        console.log($("div").text());    }    function setContent() {        // 设置普通文本和html标签，且html标签可以被浏览器正常解析        // $("div").html("欢迎访问<a href='http://www.baidu.com'>百度</a>");        // 设置普通文本，如果有html标签，浏览器不能正常解析，显示的是符号实体        $("div").text("欢迎访问<a href='http://www.baidu.com'>百度</a>");    }</script>

html()和text()的区别：

获取内容
html()可以获取html标签和普通字符串内容
text()只能获取普通字符串内容
设置内容
html()可以设置html标签和普通字符串内容
text()只能设置普通字符串内容
html()和text()如果针对的操作内容是纯字符串内容，则使用的效果一样

2.3 css样式操作

$(...).css(key, value);// 设置值$(...).css(key);// 获取值$(...).css(json对象);// 一次设置多个css样式

2.4 value属性快捷操作

$(...).val();// 获取value属性值$(...).val(value);// 设置value属性值

val()方法在复选框、单选按钮、下拉列表中都有突出表现

2.4.1 复选框

<body>    <h1>复选框操作</h1>    爱好:    <input type="checkbox" class="hby" name="hobby" value="2"/>篮球&nbsp;    <input type="checkbox" class="hby" name="hobby" value="4"/>足球&nbsp;    <input type="checkbox" class="hby" name="hobby" value="6"/>排球&nbsp;    <input type="checkbox" class="hby" name="hobby" value="8"/>乒乓球&nbsp;    <br><br>    <input type="button" value="获取" onclick="getContent()" />    <input type="button" value="设置" onclick="setContent()" /></body><script>    // 获取复选框的选中情况    function getContent() {        var s = "";        for(var i = 0; i < $(".hby:checked").length; i++) {            s += $(".hby:checked:eq(" + i + ")").val() + ",";        }        // 删除最后的逗号","        s = s.substr(0, s.length - 1);        console.log(s);    }    // 设置复选框的选中情况    function setContent() {        // 设置复选框的多个元素为选中状态        $(".hby").val([2,4,8]);// 设置value为2、4、8为选中状态        // 注意：val([value1,value2])参数是一个数组，即使只选中一个也是数组！！！        // $(".hby").val([6]);// 设置value为6为选中状态    }</script>

2.4.2 下拉列表操作

<body>    <h1>下拉列表操作</h1>    学历:    <select multiple="multiple">        <option value="0">请选择</option>        <option value="1">小学</option>        <option value="2">中学</option>        <option value="3">大学</option>    </select>    <br><br>    <input type="button" value="获取" onclick="getContent()" />    <input type="button" value="设置" onclick="setContent()" /></body><script>    function getContent() {        // 获得选中情况        console.log($("option:selected").val());// 单选情况        console.log($("select").val());// 多选情况    }    function setContent() {        // 设置选中情况        $("select").val([1]);        // $("select").val([1,3]);    }</script>

2.4.3 单选按钮操作

<body>    <h1>单选按钮操作</h1>    性别:    <input type="radio" class="sx" name="sex" value="a" />男&nbsp;    <input type="radio" class="sx" name="sex" value="b" />女&nbsp;    <input type="radio" class="sx" name="sex" value="c" />保密&nbsp;    <br><br>    <input type="button" value="获取" onclick="getContent()" />    <input type="button" value="设置" onclick="setContent()" /></body><script>    function getContent() {        // 获得选中情况        console.log($(".sx:checked").val());    }    function setContent() {        // 设置选中情况        $(".sx").val(["b"]);    }</script>

2.5 复选框全选、全不选、反选操作

$(...).attr('checked', true);// 设置复选框选中$(...).attr('checked', false);// 取消复选框选中$(...).attr('checked');// 判断复选框选中情况，返回布尔值

<body>    <h1>复选框全选、全不选、反选操作</h1>    爱好:    <input type="checkbox" class="hby" name="hobby" value="2"/>篮球&nbsp;    <input type="checkbox" class="hby" name="hobby" value="4"/>足球&nbsp;    <input type="checkbox" class="hby" name="hobby" value="6"/>排球&nbsp;    <input type="checkbox" class="hby" name="hobby" value="8"/>乒乓球&nbsp;    <br><br>    <input type="button" value="全选" onclick="setAll()" />    <input type="button" value="全不选" onclick="setAllNot()" />    <input type="button" value="反选" onclick="setFan()" /></body><script>    // 全选    function setAll() {        $(".hby").attr("checked", true);    }    // 全不选    function setAllNot() {        $(".hby").attr("checked", false);    }    // 反选    function setFan() {        for(var i = 0; i < $(".hby").length; i++) {            var flag = $(".hby:eq(" + i + ")").attr("checked");            $(".hby:eq(" + i +")").attr("checked", !flag);        }    }</script>

阅读全文

0 0