一、动态添加表格

<!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. 校园商铺-4店铺注册功能模块-3thumbnailator图片处理和封装Util

    1. 初步使用thumbnailator 1.1 下载依赖 <!-- https://mvnrepository.com/artifact/net.coobird/thumbnailator - ...

  2. elasticsearch+filebeat+kibana提取多行日志

    filebeat的配置文件filebeat.yml以下三行去掉注释 multiline.pattern: ^\[ multiline.negate: true //false改为true multil ...

  3. js面试总结2

    原型和原型链: 题目,知识点,解答: 1.如何准确地判断一个变量是数组类型 2.写一个原型链继承的例子 3.描述new一个对象的过程 4.zepto(或其他框架)源码中如何使用原型链. 知识点 构造函 ...

  4. CUDA 关于 BLOCK数目与Thread数目设置

    GPU的计算核心是以一定数量的Streaming Processor(SP)组成的处理器阵列,NV称之为Texture Processing Clusters(TPC),每个TPC中又包含一定数量的S ...

  5. echarts renderItem-在区间段内展示连续数据

    一.需求背景: 贴图说明:要求数据在不同类型的区间段内展示. 二.实现思路及代码 实现方法: 利用echarts的自定义配置:option.series[i].type='custom'中的rende ...

  6. 应用程序正常初始化（0xc0150002）失败的终极解决方案

    转自VC错误:http://www.vcerror.com/?p=62 最近做一个项目写了一个VC6下的MFC程序,结果传到别人的机子上(WIN7)出现了应用程序正常初始化(0xc0150002)失败 ...

  7. (2)mysql数据类型

    数据类型 1.整数类型 浮点类型 定点数类型 decimal(M,D)也看作(numeric) decimal(8,2) M是定点精度,D是小数位数.指定小数点左边.右边加一起共8位数.也就是整数部分 ...

  8. Jenkins 自动部署

      一.安装插件[系统管理 → 插件管理 ] 为了通过SSH上传war包,我们需要安装Publish Over SSH 插件. 二.添加SSH 服务器[系统管理→系统设置] 参数说明: Name:ss ...

  9. Python机器学习的步骤

    原文出处: kdnuggets   译文出处:数据工匠 开始.这是最容易令人丧失斗志的两个字.迈出第一步通常最艰难.当可以选择的方向太多时,就更让人两腿发软了. 从哪里开始? 本文旨在通过七个步骤,使 ...

  10. Python中%r和%s的详解及区别_python_脚本之家

    Python中%r和%s的详解及区别_python_脚本之家 https://www.jb51.net/article/108589.htm