初学之jQuery相关二

紫色下雪

于 2021-01-27 17:04:42 发布

阅读量146

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xy_best_/article/details/113252926

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

1、样式操作：

addClass();     // 添加指定的CSS类名。
removeClass();  // 移除指定的CSS类名。
hasClass();     // 判断样式存不存在
toggleClass();  // 切换CSS类名，如果有就移除，如果没有就添加。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义模态框</title>
    <style>
        /*背景颜色，为了盖住原始页面*/
        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: darkgrey;
            /*z-index: 999;*/
        }

        /*需要弹出的窗口颜色以及样式*/
        .modal {
            width: 600px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="我就问你，你敢点吗，啊。" id="b1">

<!--为了背景颜色可用-->
<div class="cover hide"></div>

<!--弹出窗口的格式-->
<div class="modal hide">
    <p>
        <label>用户名
            <input type="text" value="">
        </label>
    </p>

    <p>
        <label>密码
            <input type="text">
        </label>
    </p>

    </p>
    <label>
        <input type="button" value="登录">
        <input id="i3" type="button" value="关闭">
    </label>
    </p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    // 找到点击染出模态框的按钮
    var tButton = $("#b1");
    tButton.click(function () {
        //显示出背景（移除hide）
        $(".cover").removeClass("hide");
        // 显示表单信息（移除hide）
        $(".modal").removeClass("hide");
    });
    // 关闭模态框
    var cButton = $("#i3");
    cButton.click(function () {
        $(".cover").addClass("hide");
        $(".modal").addClass("hide");
    });
</script>

</body>
</html>

2、位置操作

offset()    // 获取匹配元素在当前窗口的相对偏移或设置元素位置
offset({top:100,left:100}  -- 设置位置
offset()  --获取位置，对于左上角的定位	
position()    // 获取匹配元素相对父元素的偏移
scrollTop()   // 获取匹配元素相对滚动条顶部的偏移
scrollLeft()   // 获取匹配元素相对滚动条左侧的偏移

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位置相关方法</title>

    <!-- $(".c1").offset()  获取位置，对于左上角的定位-->

    <!-- $(".c1").offset({top:100, left:100}) 设置位置并移动位置-->

    <!-- $(".c3").position() 获取匹配元素相对父元素的偏移-->

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .c1,
        .c2,
        .c3{
            height: 100px;
            width: 100px;
        }
        .c1 {
            background-color: red;
        }
        .c2 {
            position: relative;  /*相对定位*/
            left: 200px;
            top: 200px;
            background-color: pink;
        }

        .c3 {
            position: absolute;  /*绝对定位*/
            left: 100px;
            top: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>

<div class="c1">我是div</div>
<div class="c2">
    <div class="c3">我是c3的div</div>   <!--绝对定位是相对于c2的定位-->
</div>
<script src="jquery-3.4.1.js"></script>

</body>
</html>

3、文本操作：

例子：

<div id=c1>你好</div>

$("#c1").html() 	  // 取值，取得第一个匹配元素的html内容
$("#c1").html('你好')  // 设置值，设置所有匹配元素的html内容
$("#c1").text() 	     // 取值，取得所有匹配元素的内容
$("#c1").text('你好')  // 设置值，设置所有匹配元素的内容

例子：

<input class="need" id="input-name" name="uesrname" type="text" value="">

$("#input-name").val()  //取得第一个匹配元素的当前值
$("#input-name").val('22')  //设置所有匹配元素的值,22

例子：

<p>性别:
       <label>男
           <input name="gender" type="radio" value="1">
       </label>
       <label>女
           <input name="gender" type="radio" value="2">
       </label>
       <label>保密
           <input name="gender" type="radio" value="0">
       </label>
 </p>

获取被选中的checkbox或radio的值：
checked：选中的意思
$('input[name='gender']:checked').val()  // 获取用户选中的内容

4、属性操作：

用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值

例子一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
    <!--图片上下切换功能-->
</head>
<body>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg" alt="">
<input type="button" id="c1" value="下一个">
<script src="jquery-3.4.1.js"></script>
<script>
    var newURL = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4171735524,1073408263&fm=26&gp=0.jpg";
    $("#c1").click(function () {
        var $imgEle = $("img");

        // 获取老的图片地址
        var oldURL = $imgEle.attr("src");

        // 知识点：
        //  1、attr(attrName, attrValue) 为所有匹配元素设置一个属性值
        // 2、attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
        // $imgEle.attr("src",newURL); // 设置一个新的图片地址
        $imgEle.attr({"src": newURL, title: "我的备胎"}); // 设置一个键值对，新的图片地址以及title信息

        newURL = oldURL; // 将老的地址变为新的，新的变为了老的，这样就可以来回一直切换
    })
</script>
</body>
</html>

例子二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选</title>
    <style>
        .c1 {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <th><input type="checkbox"></th>
        <td>小黑</td>
        <td>男</td>
    </tr>
    <tr>
        <th><input type="checkbox"></th>
        <td>小红</td>
        <td>男</td>
    </tr>
    <tr>
        <th><input type="checkbox"></th>
        <td>小蓝</td>
        <td>女</td>
    </tr>
    <tr>
        <th><input type="checkbox"></th>
        <td>小紫</td>
        <td>女</td>
    </tr>
    </tbody>

</table>

<div class="c1">
    <input type="button" id="b1" value="全选">
    <input type="button" id="b2" value="反选">
    <input type="button" id="b3" value="取消">
</div>

<script src="jquery-3.4.1.js"></script>
<script>
    // ------知识要点--------
    // 用于checkbox和radio
	// prop() // 获取属性----->>>返回布尔值（true/false）
	// removeProp() // 移除属性

    // 点击全选，属性将checked设置为true
    $("#b1").click(function () {
        $(":checkbox").prop("checked",true); // checked：选中的意思
    });

    // 点击取消，属性将checked设置为false
    $("#b3").click(function () {
        $(":checkbox").prop("checked",false);
    });

    // 点击反选，循环获取每一个属性值true或者false，然后判断，再将值变为相反值
    $("#b2").click(function () {
        var $checkEle = $(":checkbox"); //获取所有的checkbox元素

        //循环获取每一个checkbox属性值,是true还是false
        for (var i = 0; i < $checkEle.length; i++) {
            // 属性值是true还是false
            var checkprop = $($checkEle[i]).prop("checked");

            if (checkprop == true) {
                // 将选中变为不选中
                $($checkEle[i]).prop("checked", false)
            }
            else {
                // 将不选中变为选中
                $($checkEle[i]).prop("checked", true)
            }
        }
    })
</script>
</body>
</html>

5、文档操作：

<ul>
	<li id="c1">1</li>
	<li id="c2">2</li>
	<li id="c3">3</li>
</ul>

var ele = document.createElement("li")
ele.innerText = 0.5
$("#c1").before(ele)   // 在1前面添加0.5

$(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的前面

移除和清空元素
$(A).remove()// 从DOM中删除所有匹配的元素。
$(A).empty()// 删除匹配的元素集合中所有的子节点。

事件

事件绑定
	$("xxx").on( events [, selector ],function(){})
	events： 事件
	selector: 选择器（可选的）
	function: 事件处理函数

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击在表格最后添加一条记录</title>
</head>
<body>

<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>小绿</td>
        <td>数钱</td>
        <td>
            <button class='delete'>删除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>小雪</td>
        <td>数金条</td>
        <td>
            <button class='delete'>删除</button>
        </td>
    </tr>
    </tbody>

</table>

<button id="b1">添加一条数据</button>
<script src="jquery-3.4.1.js"></script>

<script>
    // 绑定事件
    $("#b1").on("click",function () {
        // 生成要添加的tr标签及数据
        var trEle = document.createElement("tr");

        // 定义写好的内容
        $(trEle).html("<td>3</td><td>小紫</td><td>玩游乐场</td><td><button class='delete'>删除</button></td>");

        // 找到标签后进行添加到tbody里面
        $("#t1").find("tbody").append(trEle);
    });

    // 每一行的删除=删除按钮绑定事件,
    // 以后都要用JQuery的on，后面新增的删除功能，需要是页面一刷新就有的才可以
    // 用法：.on( events [, selector ],function(){})
    $("tbody").on("click",".delete",function () {
        console.log(1);
        $(this).parent().parent().remove();
    })
</script>
</body>
</html>

6、动画效果：

<img src='xxxx' alt=''>

$("img").hide(5000);   // 5秒之内慢慢的消失
$("img").toggle(5000)   // 5秒之内慢慢的消失,再次执行后，5秒内再完全显示,即当前状态相反的命令
$("img").fadeTo(5000,0.1)   // 5秒内，透明度变为0.1

7、操作表格学习代码

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑新增内容</title>

    <style>
        /*新增按钮的颜色以及大小*/
        #add {

            margin-top: 10px;
            background-color: wheat;
            color: red;
            font-size: 20px;
        }

        /*表格中的字体大小*/
        .tbody01 td {
            padding: 5px;
            font-size: 20px;
        }

        .hide {
            display: none;
        }

        /*模态框的背景颜色*/
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: darkgrey;
            opacity: 0.7;
        }

        /*调整模态框的弹出的位置以及弹出框的大小*/
        .modal {
            width: 600px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -200px;
        }

        /*调整模态框里面的文字大小以及文字距离*/
        .modal p {
            padding-left: 200px;
            padding-top: 10px;
            font-size: 20px;
            color: pink;
        }

        #modal_cancel {
            margin-left: 150px;
        }


    </style>


</head>
<body>


<!--弹出模态框时盖板的背景颜色-->
<!--当把hide移除后，页面颜色会铺满整个屏幕-->
<div class="cover hide"></div>


<!--模态框的内容-->
<div class="modal hide">
    <p>
        <lable for="input_name">姓名
            <input id="input_name" type="text">
        </lable>
    </p>

    <p>
        <lable for="input_hobby">爱好
            <input id="input_hobby" type="text">
        </lable>
    </p>

    <p>
        <lable>
            <button id="modal_submit">提交</button>
            <button id="modal_cancel">取消</button>
        </lable>
    </p>

</div>

<!--表格中的内容-->
<table border="1px">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>


    <tbody class="tbody01">
    <tr>
        <td>1</td>
        <td>小雪</td>
        <td>篮球</td>
        <td>
            <button class="operation_edit">编辑</button>
            <button class="operation_del">删除</button>
        </td>
    </tr>

    <tr>
        <td>2</td>
        <td>小紫</td>
        <td>足球</td>
        <td>
            <button class="operation_edit">编辑</button>
            <button class="operation_del">删除</button>
        </td>
    </tr>

    <tr>
        <td>3</td>
        <td>小红</td>
        <td>台球</td>
        <td>
            <button class="operation_edit">编辑</button>
            <button class="operation_del">删除</button>
        </td>
    </tr>

    <tr>
        <td>4</td>
        <td>小白</td>
        <td>棒球</td>
        <td>
            <button class="operation_edit">编辑</button>
            <button class="operation_del">删除</button>
        </td>
    </tr>

    </tbody>
</table>

<button id="add">新增</button>


<script src="jquery-3.4.1.js"></script>
<script>

    // 定义一个弹出模态框的函数
    function showModal() {
        $(".modal").removeClass("hide");  // 显示出背景 移除hide;显示表单信息，移除hide
        $(".cover").removeClass("hide");  // 显示出背景 移除hide;显示表单信息，移除hide
    }

    // 定义一个关闭模块框的函数
    function closeModal() {
        let modalEle = $(".modal");
        // 点击取消后，清空input框中的内容
        modalEle.find("input").val("");
        // 将模态框内容以及背景添加上hide
        $(".cover").addClass("hide");
        modalEle.addClass("hide");
    }

    // 点击表格的新增按钮，显示出模态框
    let $addEle = $("#add");
    $addEle.on("click", function () {
        showModal();
    });

    // 点击表格的取消按钮后，关闭模态框
    let $cancelEle = $("#modal_cancel");
    $cancelEle.on("click", function () {
        closeModal();
    });

    // 给每一行的编辑按钮绑定事件
    // 要使用事件委托，基于已经存在的元素（页面加载完之后存在的标签）绑定事件
    // 原理：后面新增的记录，由于在页面加载之后生成的，不能编辑，使用事件委托之后，标签无法处理时会一直向上进行寻找，直到有标签可以管理，该行是tbody为最大管理
    $("tbody").on("click", ".operation_edit", function () {
        // 把模态框弹出来
        showModal();

        // 把原来的数据填写到模态框中的input框中
        let $currentTrEle = $(this).parent().parent(); // 当前编辑的这一行，具体指的是tr标签，this指的是button，
        // console.log(this); // <button class="operation_edit">编辑</button>
        // 将当前行的JQuery对象保存起来,方便后续判断该变量是否有值，有值为【编辑】，没有值为【新增】
        $(".modal").data("currentTrEle", $currentTrEle);

        let name = $currentTrEle.children().eq(1).text(); // 取到第2个值= 姓名,指的是tr标签中第2个td标签的值
        let hobby = $currentTrEle.children().eq(2).text(); // 取到第3个值 = 爱好,指的是tr标签中第3个td标签的值
        // console.log(name, hobby);
        $("#input_name").val(name); // 将值填写到input框中
        $("#input_hobby").val(hobby);
    });

    // 给每一行的删除按钮绑定事件
    $("tbody").on("click", ".operation_del", function () {

        // 找到被点击删除按钮的那一行
        let $currentEle = $(this).parent().parent();

        // 需要先变序号，然后再进行删除
        // 找到当前删除这一行所有后面的tr标签的id,进行循环减1
        $currentEle.nextAll().each(function () {

            // 找每一行tr标签的孩子td标签中的第一个，first就是序号，last是【编辑、删除】
            let tr_id = $(this).children().first().text(); // 取到原来的序号
            $(this).children().first().text(tr_id - 1)  // 将原来的序号减1，再赋值回去
        });

        // 真正删除
        $currentEle.remove()
    });

    // 给模态框的提交按钮绑定事件
    $("#modal_submit").on("click", function () {
        // 取到用户填写的input的值
        let name = $("#input_name").val();  // 取到模态框的姓名
        let hobby = $("#input_hobby").val(); // 取到模态框中的爱好

        // 开始判断模态框中是为“新增”还是“编辑”？
        let $myModal = $(".modal");
        let $current_data = $myModal.data("currentTrEle"); // 取到编辑按钮时存放的变量
        // console.log($current_data);
        if ($current_data !== undefined) {
            // 说明是编辑状态
            $current_data.children().eq(1).text(name);
            $current_data.children().eq(2).text(hobby);
            // 清空之前保存的当前行(变量)
            $myModal.removeData()
        }
        else {
            // 判断内容不能为空
            // 创建tr标签把数据填写进去
            let number = $("tr").length; //添加内容的序号
            let trEle = document.createElement("tr"); // 创建tr标签
            $(trEle).html("<td>" + number + "</td>" +
                "<td>" + name + "</td>" +
                "<td>" + hobby + "</td>" +
                '<td>\n' +
                '            <button class="operation_edit">编辑</button>\n' +
                '            <button class="operation_del">删除</button>\n' +
                '        </td>'
            );
            // 把创建好的tr添加到tbody中
            $("tbody").append(trEle);
        }

        // 隐藏模态框
        closeModal()

    })

</script>
</body>
</html>

紫色下雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学之jQuery相关二

文章目录1、样式操作：2、位置操作3、文本操作：4、属性操作：5、文档操作：6、动画效果：7、操作表格学习代码1、样式操作：addClass(); // 添加指定的CSS类名。removeClass(); // 移除指定的CSS类名。hasClass(); // 判断样式存不存在toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。例子：<!DOCTYPE html><html lang="en"><head&
复制链接

扫一扫

专栏目录