jQuery常用知识(二)

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容 ----不能识别标签
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值----- 即登陆框输入的内容

$("#id").next()          ------匹配之后紧挨的同辈元素
$("#id").nextAll()       ------匹配之后所有的同辈元素

$("#id").children();// 所有儿子们
$("#id").siblings();// 所有兄弟们

jquery过滤选择器前加空格与不加空格的区别

/加空格表示 选择class为test的元素当中的隐藏后代元素，由前往后读
 alert($(".test :hidden").length);
 
 //不加空格表示 选择隐藏的class为test的元素，由后往前读
 alert($('.test:hidden').length);

$('div p')
w.fn.init [p.c1, prevObject: w.fn.init(1)]
$('div').find('p') -------等同上面
w.fn.init [p.c1, prevObject: w.fn.init(2)]
$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div').filter('.c1')  ----等同上面
w.fn.init [div.c1, prevObject: w.fn.init(2)]

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移



$(window).scrollTop() -----滚动条距离窗口顶部的距离
    通过判断可以配合if 可以制作返回顶部模态框的动态显示

innerHeight()   -----content+padding
innerWidth()   
outerHeight()  ------content+padding+border
outerWidth()

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值,注意是字典的形式
removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性

//可以用于制作反选，取消，全选

添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面


移除和清空元素
remove()// 从DOM中删除所有匹配的元素。（可用于删除表格特定行）
empty()// 删除匹配的元素集合中所有的子节点。

replaceWith()    --------$(selector).replaceWith(content)
replaceAll()       --------$(content).replaceAll(selector)


replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。

clone()   ------生成被选元素的副本，包含子节点、文本和属性
        $(selector).clone(includeEvents)


注意：克隆需要注意如果本体不存了，后面进行的克隆操作不会在生产克隆体

练习作业：表格的增删改以及模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单增删改查</title>
    <style>
        /*盖板样式*/
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 999;
        }

        /*模态框样式*/
        .modal {
            width: 300px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -150px;
            margin-left: -100px;
            background-color: white;
            z-index: 1000;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<button id="b1">增加</button>
<div class="cover hide"></div>
<div class="modal hide">
    <p>
        <label for="username">姓名</label>
        <input type="text" name="username" id="username">
    </p>
    <p>
        <label for="hobby">爱好</label>
        <input type="text" name="hobby" id="hobby">
    </p>
    <p>
        <button id="submit">确认</button>
        <button id="cancel">取消</button>
    </p>
</div>
<table border="1px">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>喊麦</td>
        <td id="clone">
            <input type="button" value="编辑" class="edit">
            <input type="button" value="删除" class="delete">
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>足球</td>
        <td>
            <input type="button" value="编辑" class="edit">
            <input type="button" value="删除" class="delete">
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>游泳</td>
        <td>
            <input type="button" value="编辑" class="edit">
            <input type="button" value="删除" class="delete">
        </td>
    </tr>
    </tbody>
</table>

<script src="jquery-3.3.1.min.js"></script>

<script>
    //点击’增加‘按钮弹出模态框
    $('#b1').click(function () {
        $('.cover,.modal').removeClass('hide');
    });

    //增加内容
    $('#submit').click(function () {
        //创建一行
        let trEle = document.createElement('tr');
        $(trEle).appendTo('tbody');
        //创建3列
        for (let i = 0; i < 3; i++) {
            let tdEle = document.createElement('td');
            trEle.appendChild(tdEle);       //创建3个空单元格
            $('#clone').clone(true).insertAfter($(trEle.children)[2]);  //克隆操作
            $($(trEle.children)[0]).text($('tr').length - 1); //第一列内容
            $($(trEle.children)[1]).text($('#username').val()); //第二列内容
            $($(trEle.children)[2]).text($('#hobby').val());  //第三列内容
        }
    });
    //点击’取消，确认‘按钮隐藏模态框并取消输入的内容
    $('#cancel,#submit').click(function () {
        $('.cover,.modal').addClass('hide');
        $('#username,#hobby').val('')
    });
    //删除操作
    $('.delete').click(function () {
        $(this).parent().parent().remove();
        //删除之后动态调整序号
        let len = $('table tr').length;
        for (let i = 1; i < len; i++) {
            $('table tr:eq(' + i + ') td:first').text(i);
        }
    })
</script>
</body>
</html>

View Code

jQuery常用知识(二)

练习作业：表格的增删改以及模态框

猜你喜欢