jQuery笔记6-常见操作

最新推荐文章于 2021-08-31 08:58:27 发布
最新推荐文章于 2021-08-31 08:58:27 发布
阅读量125 收藏
点赞数
分类专栏： JQ 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zzzpiu/article/details/110366285
版权

文章目录

清空元素

  1. html("")方法
  2. empty()方法
  3. remove()方法

克隆元素

clone()方法

清空和克隆元素的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清空元素中的内容</title>
    <script src="../jquery-1.12.2.js"></script>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-top: 20px;
        }
    </style>
    <script>
        $(function () {
            // 点击按钮清空div中的内容
            $("#btn").click(function () {
                // $("#dv").html("");//清空元素中的内容
                // $("#dv").empty();//清空元素中的内容
                $("#dv").remove();//清空元素中的内容--直接将自己干掉了(div)
            });
            // 克隆元素
            $("#btn2").click(function () {
                var spanObj = $("#dv>span").clone();//克隆,复制了这个元素
                spanObj.css("fontSize","20px");
                $("#dv2").append(spanObj);
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="显示效果" id="btn2"/>
<div id="dv">
    <span>今天天气真好啊....</span>
</div>
<div id="dv2"></div>
</body>
</html>

获取value和文本内容

  1. val()方法:val()方法可以改变某一项选中:
    $("#se").val(4);
  2. text()方法
  3. demo:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>val方法</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            // 点击按钮把所有的表单的value属性值全部显示出来
            $("#btn").click(function () {
                // console.log($(this).val());//显示按钮的value属性值
                // console.log($("#txt").val());//显示文本框的value属性值
                // console.log($("#rad").val());//显示单选框的value属性值
                // console.log($("#ck").val);//显示复选框的value属性值
                // console.log($("#sm").val);//显示提交的value属性值

                //设置表单元素的value属性值
                // $(this).val("这是一个按钮");
                // $("#txt").val("这是一个按钮啊啊啊");
                // $("#rad").val("这是单选按钮");
                // $("#ck").val("兴趣来了");
                // $("#sm").val("这是sm按钮");

                //获取文本域中的内容:1. .text()方法  2  .val()方法--推荐
                console.log($("#tt").text());

                //点击按钮让下拉框中的 上海选中
            });

           /*$("#btn").click(function () {
               $("#se").val(4);//可以改变某一项中选中
           });*/
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<input type="radio" value="man" name="sex" id="rad" />男
<input type="checkbox" value="1" id="ck" />吃饭
<input type="submit" value="提交" id="sm" />
<!--表单元素-->
<textarea name="" id="tt" cols="30" rows="10">
    哈哈,我又变帅了....
</textarea>
<select id="se">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">重庆</option>
    <option value="5">东京</option>
</select>
</body>
</html>

attr设置属性

attr()可以写两个参数: 1.属性名,2.属性值
arrt()致谢一个参数,获取该元素的这个属性值
demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attr</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            // 点击按钮,在div中添加一个超链接,设置超链接的title属性和热点文字,地址
            $("#btn").click(function () {
                // 获取div,创建超链接
                var aObj = $("<a></a>");
                //attr();可以写两个参数:1 参数:属性,2:属性值
                //attr();致谢一个参数,获取钙元素的这个属性的值
                aObj.attr("title","百度");
                aObj.attr("href","http://www.baidu.com");
                aObj.text("百度");
                $("#dv").append(aObj);
                console.log(aObj.attr("href"));
            });
        });
    </script>
</head>
<body>
<input type="button" value="设置超链接" id="btn"/>
<div id="dv"></div>
</body>
</html>

复选框的问题

  1. 使用attr()方法是不能真正获取到复选框中的checked属性的值的,打印出来未定义undefined
  2. prop方法可以真正获取到复选框的checked属性值

demo:点击按钮获取复选框属性,判断是否选中,点击时如果选中就改成未选中,反之.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function (){
            $("#btn").click(function () {
                // console.log($("#ck").attr("checked"));//未定义undefined
                // pop()可以真正的获取元素知否选中的状态
                // console.log($("#ck").prop("checked"));
                //点击按钮让复选框选中,再点击按钮让复选框不选中
                var flag = $("#ck").prop("checked");//获取选中的状态
                if(flag){
                    //选中了
                    $("#ck").prop("checked",false);
                }else{
                    //没选中
                    $("#ck").prop("checked",true);
                }


            });
        });
    </script>
</head>
<body>
<input type="button" value="显示状态" id="btn"/>
<input type="checkbox" value="1" id="ck" />打豆豆
</body>
</html>

全选和全不选demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        //先获取j_cbAll的这个复选框,注册点击事件,点击的时候让下面tbody中所有的复选框选中和不全选
        //让tbody中所有的复选框的选中状态和当前的这个全选的复选框的选中状态一致
        $(function () {
            $("#j_cbAll").click(function () {//全选
                var cked=$(this).prop("checked");//保存当前复选框的选中状态
                //获取tbody中所有的复选框
                $("#j_tb").find(":checkbox").prop("checked",cked);
            });
            //获取tbody中所有的复选框
            $("#j_tb input[type='checkbox']").click(function () {
                //现获取tbody中所有的复选框的个数
                var length1 = $("#j_tb input[type='checkbox']").length;
                // 获取tbody中所有选中的复选框的个数
                var length2 = $("#j_tb input:checked").length;
                //比较二者,与最上面的复选框保持一致
                if(length1 === length2){
                    //都选中了
                    $("#j_cbAll").prop("checked",true);
                }else {
                    //有没选中的
                    $("#j_cbAll").prop("checked",false);
                }
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>课程名称</th>
            <th>所属学院</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>JavaScript</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>css</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>html</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>jQuery</td>
            <td>前端与移动开发学院</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

设置宽高

  1. 用css()方法获取,操作的是字符串.
  2. 用jq中的width和height的两个方法来操作是使用的数字方式.

demo:点击按钮获取宽高,设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置宽高</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        //获取宽高
        $(function () {
           $("#btn").click(function () {
               // 获取元素的宽高,获得是字符串,需要转成数字parseInt可以将前面为数字的字符转成数字,不包括后面的字符,如400px--->400
               // var width = parseInt($("#dv").css("width"))*2;
               // var height = parseInt($("#dv").css("height"))*2;
               // console.log(width,height);
               //设置样式:
               // $("#dv").css("width",width+"px");
               // $("#dv").css("height",height+"px");
               //上面的操作通过css操作都是字符类型

               //获取宽和高的属性值-->数字类型
               var width = $("#dv").width()*2;
               var height = $("#dv").height()*2;
               //设置元素的宽高-->参数可以是数字也可以是字符
               $("#dv").width(width);
               $("#dv").height(height);
           });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>

offset()方法返回的属性left和top

offset()方法返回的结果包含了两个属性left和top,均为数字类型

demo:点击按钮获取left和top,再重新设置left和top,设置是通过offset方法参数来实现的,参数是一个对象,包括left和top的键值对.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 100px;
            background-color: green;
            position: absolute;
            left:100px;
            top:50px;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //获取left和top的值--->都是数字类型
                //offset()方法返回的结果包含了两个属性left和top
                console.log($("#dv").offset().left);
                console.log($("#dv").offset().top);

                $("#dv").offset({"left":200,"top":200});
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>

获取滚动条的位置

scrollLeft()和scrollTop()方法

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 2000px;
            height: 2000px;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
           $(document).click(function () {
               console.log($(this).scrollLeft()+"======"+$(this).scrollTop());
           }); 
        });
    </script>
</head>
<body>
<div></div>
</body>
</html>
blog12138
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery笔记.docx
12-14
《jQuery学习笔记详解》 jQuery，作为JavaScript的一个强大库，其核心价值在于提供了一系列便捷的API，使得开发者能更高效地操作DOM（Document Object Model），处理事件、动画以及实现Ajax交互。本文将深入探讨...
11.【课堂笔记】 JQuery
08-05
jQuery 的设计目标是简化JavaScript的编写，通过封装常见的JavaScript功能，提供了一种更加简单易用的方式来操作HTML文档、处理事件、创建动画和处理Ajax请求。jQuery 的独特之处在于其链式语法，使得多个操作可以...
jquery 克隆div 复制div 克隆元素 复制元素
weixin_30388677的博客
12-02 1112
代码： $('.div1').clone() 定义和用法 clone() 方法生成被选元素的副本，包含子节点、文本和属性。 语法 $(selector).clone(includeEvents) 参数描述 includeEvents 可选。布尔值。规定是否复制元素的所有事件处理。 默认地，副本中不包含事件处理器。 转载于:https...
jquery复制克隆元素，复制div，复制tabel等元素，不影响原先元素
j18423532754的博客
12-10 3198
我们在写网页时，经常遇到，我们需要弹出的弹出框是网页上某一个div或者整个table。 当我们取出网页上元素的时候，然后装到弹出框或者其他网页上的其他的地方的时候我们发现 原先的元素不见了，然后整个布局都变了。我们就想，能不能复制的时候，只是复制，而不是复制后，原先的元素受到影响。 比如。A网页上的一个div，在E地方。我们想复制这个div在A网页上的F地方。或者弹出框G地方 这时候我们就...
html复制div,克隆一模一样的DIV
weixin_42510731的博客
06-11 2508
如何把网页中的某个div复制以后，生产另外一个div，后者与前者完全一样，就像克隆出来的一样，当然，唯一不同的，那就只有ID不能相同了，这该如何实现呢？网上很多地方都讲得不明白，其实，方法很简单。比如，网页原本就有如下的一个div对象div内容内容内容下面，我们使用JS代码来实现，将其克隆出来生成一模一样的div，当然，ID是绝对不能相同的，其它完全相同。var　GetDiv1 = documen...
jquery 克隆clone()使用实例
一样的代码，不一样的人生。
11-05 2698
WEB项目中脚本的位置是十分重要的，尤其在用户体验方面。  开发过程中可能需要动态创建hmtl控件，如使用提交服务器方法来实现实在是体验差，当前页面数据保存也是个麻烦事，jquery提供了clone()方法，其中有一个参数： true:克隆指定对象所以内容，包括控件，值，事件。 flse:克隆内容，事件不会克隆。 实例如下： //添加任务 function addTask() {
JQuery笔记---JQuery简介
rosinante
08-05 551
目录 一、JQuery简介 1.JQuery是什么 2.JQuery的发展历程 3.JQuery能做什么 4.JQuery的弊端 5.JQuery的优势 6.JQuery的使用 7.DOM对象与JQuery对象 二，JQuery选择器 1.基本选择器 2.层次选择器 3.过滤选择器 一、JQuery简介 1.JQuery是什么 一个优秀的JavaScript库 ...
jquery学习笔记--语法
zyp的博客
09-14 150
jquery语法： $(selector).action() $表明是jquery语法 selector标明要执行操作的html元素 action()对元素要执行的操作 选择器 jquery选择器可以指明对单个或一组html元素进行操作 jquery选择器基于元素的id，类，类型，属性，属性值等进行查找或选择 常见选择器 $("*") 选取所有元素 $(this) 选取当前...
jQuery入门笔记总结-pink老师
jxmchou的博客
08-31 1710
jquery入门笔记整理
自学jquery笔记库
08-11
1. 介绍 2. 数组的声明与初始化 3. 数组的访问与操作 4. 多维数组 5. 数组与函数 6. 数组的常见问题与技巧 7. 总结
jQuery学习笔记 操作jQuery对象 属性处理
10-27
在jQuery中，对HTML元素的属性进行操作是十分常见的任务，尤其在动态更新网页内容时。本文主要讨论如何使用jQuery来处理元素的属性，包括基本属性、class属性、HTML内容以及表单元素的属性。 首先，jQuery提供了`...
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
10-27
模态提示框是网页交互中常见的一种元素，它可以在用户执行特定操作时弹出，提供信息、警告或确认请求。在没有找到满足需求的现成jQuery插件后，作者决定自己动手实现。 首先，我们需要了解jQuery的基础。jQuery是一...
js实现选中div内容并复制到剪切板
sunon_的博客
11-10 1265
functioncopyUrl () { vardiv = document.getElementById('xxxx'); if(document.body.createTextRange) { varrange = document.body.createTextRange(); range.moveToElementText(div); range.select(); ...
div节点的操作（添加，删除，替换，克隆）
ma451152002的专栏
12-24 5527
div{ border: 1px solid #ff0000; height:100px; width:200px; margin:10px 10px; padding:10px 10px; } #div_1{ background-color:#ff0000; } #div_2{ background-c
LGK160I（2T4T）.pdf
06-20
LGK160I（2T4T）.pdf
小波神经网络MATLAB仿真模拟源程序
06-20
小波神经网络MATLAB仿真模拟源程序 人工智能学习 MATLAB小波神经网络仿真模拟程序
tensorflow-gpu-2.8.2-cp37-cp37m-win-amd64.whl
最新发布
06-20
format在python中的用法
PyOpenGL-3.1.6-cp310-cp310-win-amd64.whl
06-20
PyOpenGL-3.1.6-cp310-cp310-win_amd64.whl，之前的下载PyOpenGL网页消失了。
jquery-validation-1.14.0下载
01-20
jquery-validation-1.14.0 是一个用于验证表单的 jQuery 插件，可以帮助开发人员轻松地对表单进行实时验证。要下载 jquery-validation-1.14.0，首先需要打开 jQuery Validation 插件的官方网站或者在 GitHub 上搜索该插件的源代码。在页面上找到对应的版本，点击下载按钮即可下载压缩包文件。 另外，也可以在命令行使用 npm 进行下载。打开命令行工具，输入以下命令即可下载并安装 jquery-validation-1.14.0 插件： ```bash npm install jquery-validation@1.14.0 ``` 下载完成后，解压压缩包或者使用 npm 安装命令后，就可以将插件文件引入到项目中开始使用了。 在使用该插件之前，需要在 HTML 页面中引入 jQuery 库文件和 jquery-validation-1.14.0 的文件。然后按照插件文档的说明进行配置和调用，即可实现对表单的验证功能。 总之，要下载 jquery-validation-1.14.0 插件，可以通过官方网站、GitHub 或者 npm 进行下载安装。下载完成后，按照插件文档进行配置和调用，就可以方便地在项目中使用该插件对表单进行实时验证。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值