一、动态添加表格

<!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. Windows ping

    用法: ping [-t] [-a] [-n count] [-l size] [-f] [-i TTL] [-v TOS]            [-r count] [-s count] [[-j ...

  2. C++ 字符串相互转换 适合 lua project

    #include <iostream> #include <Windows.h> #include <assert.h> #define Main main voi ...

  3. Oracle闪回查询恢复delete删除数据

    Flashback query(闪回查询)原理 Oracle根据undo信息,利用undo数据,类似一致性读取方法,可以把表置于一个删除前的时间点(或SCN),从而将数据找回. Flashback q ...

  4. luogu P1332 血色先锋队[bfs]

    题目描述 巫妖王的天灾军团终于卷土重来,血色十字军组织了一支先锋军前往诺森德大陆对抗天灾军团,以及一切沾有亡灵气息的生物.孤立于联盟和部落的血色先锋军很快就遭到了天灾军团的重重包围,现在他们将主力只好 ...

  5. C#字符串、字节数组和内存流间的相互转换 - IT浪潮之巅

    定义string变量为str,内存流变量为ms,比特数组为bt 1.字符串=>比特数组 (1)byte[] bt=System.Text.Encoding.Default.GetBytes(&q ...

  6. mysql用户管理和pymysql

    mysql用户管理 为了使不同的人员访问到对应身份的数据库资源,每个人都有不同的权限. mysql本质上是一款cs软件,它具备用户认证,那么如何实现呢?那就是写入文件,但是在mysql把文件称作表,只 ...

  7. 一文教会你用Python实现最有效的剪切板实时监控

    前言 上网浏览网页的时候,看见好的内容免不了要使用复制粘贴,但是我们看到的内容.心里想要的内容和实际粘贴后的内容往往不一致.数据的获取始于复制,终于粘贴,那么问题来了,在这中间系统做了哪些操作,我们怎 ...

  8. vue表格之tableHeaderColor（修改表头背景色）

    <el-table :header-cell-style="tableHeaderColor"></el-table> // 更改表头样式 tableHea ...

  9. 关于Android 的网址

    Android 官方API查询网址 https://developer.android.google.cn/ 第三方镜像Android API查询网址 (比官方浏览速度快一些,缺点现有API较低) h ...

  10. [记录]Wdinwos scikit-learn 安装

    安装的软件有: Python: 3.6.0 numpy-1.11.3+mkl-cp36-cp36m-win_amd64.whl(全名) scipy-0.19.0-cp36-cp36m-win_amd6 ...