jQuery-jQuery属性

Posted 2020-12-08 hedger-lee

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery-jQuery属性相关的知识，希望对你有一定的参考价值。

jQuery属性

addClass 添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height:200px;
            width: 200px;
            border-radius: 50%;
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

jQuery代码：

$(‘.c1‘).addClass(‘green‘)

结果：

div标签背景颜色变成了绿色

removeClass 删除样式

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height:200px;
            width: 200px;
            border-radius: 50%;
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1 green"></div>
</body>
</html>

jQuery代码：

$(‘.c1‘).removeClass(‘green‘)

结果：

div标签背景又变成了红色

html、text文本

HTML代码：

<div class="a1">
    <a href="">百度</a>
</div>
<div class="a2"></div>

jQuery代码：

取值：
    $(‘.a1‘).html()
    $(‘.a1‘).text()
设置值：
    $(‘.a2‘).html(‘<a href="">京东</a>‘)
    $(‘.a2‘).text(‘<a href="">京东</a>‘)

结果：

取值结果：
    html：<a href="">百度</a>
    text：百度
设置值结果：
  html中的内容会生成一个标签
  text中的内容还是一个文本内容显示，不能识别成标签

val 值

HTML代码：

<input type="text" id="username">

<input type="radio" class="a1" name="sex">男
<input type="radio" class="a1" name="sex">女

<input type="text" class="a2" name="hobby">抽烟
<input type="text" class="a2" name="hobby">喝酒
<input type="text" class="a2" name="hobby">烫头

<select name="city" id="s1">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
</select>
<select name="lover" id="s2" multiple>
    <option value="1">波多</option>
    <option value="2">苍井</option>
    <option value="3">小泽</option>
</select>

jQuery代码：

获取值：
    文本输入框：$(‘#username‘).val();
    单选radio框：$(‘.a1:checked‘).val();
    多选checkout框：$(‘.a2:checked‘).val()是不行的;需要循环取值，如下：
    var d = $(‘:checkbox:checked‘);
        for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
        }
    单选select框：$(‘#city‘).val()；
  多选select框：$(‘#lover‘).val();
  
设置值：
    文本输入框：$(‘#username‘).val(‘you are my love‘);
    单选radio框：$(‘.a1‘).val([2]);  #注意里面必须是列表，写的是value属性对应的值
    多选checkout框：$(‘.a2‘).val([‘2‘,‘3‘])
    单选select框：$(‘#city‘).val(‘1‘)；
  多选select框：$(‘#lover‘).val([‘2‘,‘3‘])

案例：模态框添加和编辑功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }
        .modal {
            width: 300px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>开车</td>
        <td>
            <button class="fire">开除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>景女神</td>
        <td>茶道</td>
        <td>
            <button class="fire">开除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊（苑局）</td>
        <td>不洗头、不翻车、不要脸</td>
        <td>
            <button class="fire">开除</button>
        </td>
    </tr>
    </tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
    <div>
        <label>姓名：
            <input type="text" id="name">
        </label>
    </div>
    <div>
        <label>爱好：
            <input type="text" id="hobby">
        </label>
    </div>
    <button id="cancel" type="button">取消</button>
    <button id="submit" type="button">提交</button>
</div>
<script src="jquery.js"></script>
<script>
    // 定义一个清空输入框并且隐藏模态框的方法
    function hideModal(){
         // 1. 清空input的值
        $("#name,#hobby").val(‘‘);
        // 2. 隐藏起来
        $(".cover,.modal").addClass(‘hide‘);
    }
    // 开除按钮的功能
    $("table").on(‘click‘, ‘.fire‘, function () { //我们先去学冒泡事件、事件委托然后再回来学这个例子，事件里面都是用的匿名函数，这里用on是因为我
        //们要将新添加进来的每行里面的button标签能够继承这个点击删除的事件
        // 点击开除按钮要做的事儿
        // 把当前行移除掉
        //this  --> 触发当前点击事件的DOM对象
        $(this).parent().parent().remove();  // 链式操作
    });
    // 新增按钮的功能
    $("#add").click(function () {
        // 点击新增按钮要做的事儿
        // 1. 移除cover和modal的hide样式
        $(".cover,.modal").removeClass(‘hide‘);
    });
    // 点击modal中的cancel按钮
    $("#cancel").click(function () {
       hideModal();
    });
    // 点击modal中的submit按钮
    $("#submit").click(function () {
        // 1. 获取用户输入的值
        var name = $("#name").val();
        var hobby = $("#hobby").val();
        // 2. 隐藏模态框，清空输入框
        hideModal();
        // 3. 创建一个tr标签，把数据塞进去
        var trEle = document.createElement("tr");
        $(trEle).append(‘<td><input type="checkbox"></td>‘);
        $(trEle).append(‘<td>‘ + name + ‘</td>‘);
        var tdTmp = document.createElement(‘td‘);
        tdTmp.innerText = hobby;
        $(trEle).append(tdTmp);
        $(trEle).append(‘<td><button class="fire">开除</button></td>‘)
        // 4. 把上一步的tr追加到表格的tbody后面
        $(‘tbody‘).append(trEle);
    });
</script>
</body>
</html>

prop 属性值

HTML代码：

<input type="checkbox" id="i1" value="1">

jQuery代码：

$("#i1").prop("checked")

结果：

false

案例：表格全选、反选、取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
   <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
   </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>开车</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>景女神</td>
        <td>茶道</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊（苑局）</td>
        <td>不洗头、不翻车、不要脸</td>
    </tr>
    </tbody>
</table>
<script src="jquery.js"></script>
<script>
    // 点击全选按钮 选中所有的checkbox
    // DOM绑定事件方法
    // $("#all")[0].onclick = function(){}
    // jQuery绑定事件方法
    $("#all").click(function () {
        $(":checkbox").prop(‘checked‘, true);
    });
    // 取消
    $("#cancel").on("click", function () {
         $(":checkbox").prop(‘checked‘, false);
    });
    // 反选
    $("#reverse").click(function () {
        // 1. 找到所有选中的checkbox取消选中
        // $("input:checked").prop(‘checked‘, false);
        // 2. 找到没有选中的checkbox选中
        // $("input:not(:checked)").prop(‘checked‘, true);
        //你会发现上面这么写，不行，为什么呢？因为你做了第一步操作之后，再做第二步操作的时候，所有标签就已经全部取消选中了，所以第二步就把所有标签选中了
        // 方法:for循环所有的checkbox,挨个判断原来选中就取消选中，原来没选中就选中
        var $checkbox = $(":checkbox");
        for (var i=0;i<$checkbox.length;i++){
            // 获取原来的选中与否的状态
            var status = $($checkbox[i]).prop(‘checked‘);
            $($checkbox[i]).prop(‘checked‘, !status);
        }
    })
</script>
</body>
</html>

以上是关于jQuery-jQuery属性的主要内容，如果未能解决你的问题，请参考以下文章

jQuery-jQuery文档处理

jQuery-jquery scrollTop怎么解决所有浏览器兼容问题

jQuery-jQuery引入和jQuery选择器

Asp.net入门3-02使用jQuery-jQuery 入门