一、动态添加表格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>动态生成表格</title>

</head>

<body>

    <button>生成表格</button>

    <div>

        <table>

            <thead>

                <tr>

                    <th>名字</th>

                    <th>描述</th>

                </tr>

            </thead>

            <tbody></tbody>

        </table>

    </div>

    <!--引入jQuery-->

    <script src="jQuery1-12-4.js"></script>

    <script>

       $(function(){

           //模拟后台数据

            var datas = [{name:"西瓜",desc:"甜润美味，清凉可口"},

                        {name:"黄瓜",desc:"清润香甜，齿间留香"}];

           $("button").click(function () {

               //方式1：

            //    for (var i = 0; i < datas.length; i++) {

            //         $("tbody").append($("<tr><td>"+datas[i].name+"</td><td>"+datas[i].desc+"</td></tr>"));

            //    }

            //方式2：由于方式1是每次都会生成一个jQuery对象，添加到对应的地方，对内存影响大，所以出现了需要拼接完，再去添加的额情况

            // var str = "";

            // for (var i = 0; i < datas.length; i++) {

            //    str += "<tr><td>"+datas[i].name+"</td><td>"+datas[i].desc+"</td></tr>";

            // }

            // $("tbody").append($(str));

            //方式3：使用数组进行拼接

            var arr = [];

            for (var i = 0; i < datas.length; i++) {

                arr.push("<tr><td>"+datas[i].name+"</td><td>"+datas[i].desc+"</td></tr>");

            }

            $("tbody").html(arr);

           });

       });

    </script>

</body>

</html>

二、删除和复制元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>删除和复制元素</title>

    <style>

        div{

            width: 200px;

            height: 500px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <p>我是原始的p元素</p>

    <div></div>

    <section>

        <h1>h1</h1>

    </section>

    <script src="jQuery1-12-4.js"></script>

    <script>

    //把p元素复制到div中

    $("div").append($("p").clone());//默认不带有事件的复制，而true是带有事件的复制

    //把section删除

    // $("section").remove();//自杀式删除，断子绝孙型

    // $("section").html("");//清空内部

    $("section").empty();//清空内部

    </script>

</body>

</html>

三、操作表单

$("this").val();这样获取的是文本框、密码框、单选框、复选框、按钮、文本域的值

可以获取，同样可以设置$("this").val("123");

注意：$(this).text();也是同样可以设置可以获取，但设置和获取的是两个标签中间的文本值

四、操作属性

1、添加属性

　　　　$(this).attr("属性名","属性值"); //<a 属性名=属性值>我是a标签</a>

2、读取属性值

　　$(this).attr("属性名");

3、删除属性

　　$(this).removeAttr();//删除所有属性

　　$(this).removeAttr("属性名");//删除特定属性

五、复选框的操作

获取某个值是否是选中状态   $(this).prop("checked");//true选中false未选中

设置某个值是选中状态  $(this).prop("checked",true);

例：全选和反选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>全选反选</title>

    <style>

        body{

            font-size:18px;

        }

    </style>

</head>

<body>

    <div id="act">

        <label><input type="checkbox" name="" id="all">全选</label>

        <label><input type="checkbox" name="" id="noAll">反选</label>

    </div>

    <div id="content">

        <label><input type="checkbox" name="" id="">西瓜</label>

        <label><input type="checkbox" name="" id="">香蕉</label>

        <label><input type="checkbox" name="" id="">苹果</label>

        <label><input type="checkbox" name="" id="">橙子</label>

        <label><input type="checkbox" name="" id="">葡萄</label>

    </div>

    <script src="jQuery1-12-4.js"></script>

    <script>

        var datas = $("#content label input");

        //点击全选，全部选中

        $("#all").click(function () {

            for (var i = 0; i < datas.length; i++) {

                $(datas[i]).prop("checked", $(this).prop("checked"));

            }

        });

        //点击每一个元素时，判断是否应该勾选全选按钮

        for (var i = 0; i < datas.length; i++) {

            $(datas[i]).click(function () {

                //所有都选中才选中

                for (var j = 0; j < datas.length; j++) {

                    if (!$(datas[j]).prop("checked")) {

                        $("#all").prop("checked", false);

                        return;

                    }

                }

                $("#all").prop("checked", true);

            });

        }

        //点击反选按钮们进行反向选择

        $("#noAll").click(function () {

            for (var i = 0; i < datas.length; i++) {

                $(datas[i]).prop("checked") ? $(datas[i]).prop("checked", false) : $(datas[i]).prop("checked",

                    true);

            }

            //判断全选

            for (var j = 0; j < datas.length; j++) {

                if (!$(datas[j]).prop("checked")) {

                    $("#all").prop("checked", false);

                    return;

                }

            }

            $("#all").prop("checked", true);

        });

    </script>

</body>

</html>

六、样式的操作

　　1、获取元素的宽高

　　　　$(this).css("height")   $(this).css("width")  //都是带单位的

　　　　$(this).height();  $(this).width(); //不带单位的

　　2、获取定位元素相对于父级的位置

　　　　$(this).offset().top    $(this).offset().left //无单位

　　3、窗口滚动的距离

　　　　$(this).scrollTop();//无单位

jQuery4操作表单+属性+样式的更多相关文章

  1. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

  2. 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

    一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...

  3. jsp——js事件修改属性样式的两种方法（直接赋值、修改属性）、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存

    代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...

  4. UIAlertController警告视图和操作表单

    //创建一个myAlert1操作表单对象(UIAlertControllerStyleActionSheet为操作表单,UIAlertControllerStyleAlert为警告视图) UIAler ...

  5. 【原】React操作表单

    最近的项目中开发中都是用react,其中有用到react去操纵表单.然后自己就在每个表单元素中添加 ref,  然后再像jquery操作dom一样去操纵这个ref, 代码如下: 首先我在每个表单元素那 ...

  6. JQuery：各种操作表单元素方法小结

    来源:http://www.ido321.com/1220.html 表单元素无处不在,已然成了Web应用不可或缺的一个部分.对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值.那在JQu ...

  7. jQuery使用（三）：DOM操作之val()方法操作表单元素value值

    操作表单元素属性value的值 <form action="./" method='GET'> <h3 >选择你喜欢的明星</h3> <s ...

  8. 前端 ----jQuery操作表单

    05-使用jQuery操作input的value值   表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用j ...

  9. js进阶 9 js操作表单知识点总结

    js进阶 9 js操作表单知识点总结 一.总结 一句话总结:熟记较常用的知识点,对于一些不太常用的知识点可以在使用的时候查阅相关资料,在使用和练习中去记忆. 1.表单中学到的元素的两个对象集合石什么? ...

随机推荐

  1. 2018-2019-2 20175323 实验一《Java开发环境的熟悉》实验报告

    java开发环境的熟悉-1 java开发环境的熟悉-2 下载IDEA和破解的过程我参考了https://blog.csdn.net/shengshengshiwo/article/details/79 ...

  2. ThinkPHP5的简单使用

    目录的介绍 thinkphp5 的控制器的创建 第一步:新建一个控制器 第二步:admin.php控制器内容如下 第三步:如何显示模型页面 第四步:显示模板页面 第五步:定义模板变量 第六步:运行结果 ...

  3. QString组合、拆分。

    1.组合字符常用arg()函数 QString test=QString("_haha_%1_hehe%2") .arg("ee").arg("aa& ...

  4. Python接口测试框架实战与自动化进阶✍✍✍

    Python接口测试框架实战与自动化进阶  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看 ...

  5. <每日一题>题目3:编写装饰器,为多个函数加上记录调用功能,要求每次调用函数都将被调用的函数名称写入文件

    def log(func): def inner(*args,**kwargs): with open('log',mode='a',encoding='utf-8') as f: #以追加的方式打开 ...

  6. Luogu P3802 小魔女帕琪(期望)

    P3802 小魔女帕琪 题意 题目背景 从前有一个聪明的小魔女帕琪,兴趣是狩猎吸血鬼. 帕琪能熟练使用七种属性(金.木.水.火.土.日.月)的魔法,除了能使用这么多种属性魔法外,她还能将两种以上属性组 ...

  7. Android开发 MediaPlayer将视频播放时尺寸适配完美

    前言 视频播放有一个较为蛋疼的问题,那就是尺寸适配.如果不做尺寸适配视频将会变形拉伸或者压缩.下面我就介绍个人实现的算法. 满足一边的算法 满足一边?你可能是疑问是什么意思.意思是就是始终将视频的高度 ...

  8. 44道JS难题

    国外某网站给出了44道JS难题,试着做了下,只做对了17道.这些题涉及面非常广,涵盖JS原型.函数细节.强制转换.闭包等知识,而且都是非常细节的东西,透过这些小细节可以折射出很多高级的JS知识点. 你 ...

  9. Java 生成pdf表格文档

    最近在工作做一个泰国的项目,应供应商要求,需要将每天的交易生成pdf格式的报表上传到供应商的服务器,特此记录实现方法.废话不多说,直接上代码: THSarabunNew.ttf该文件是泰国字体自行网上 ...

  10. input 数值验证

    1.手动校验数字为整数 Number.isInteger <el-input class="radioInput" v-model.number="ruleForm ...