一、动态添加表格

<!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. 织梦怎么调用栏目SEO标题

    点击[模板][默认模板管理]找到模板文件名[list_article.htm],点击模板后面的修改,弹出修改模板代码页面.更改模板文件中<title>{dede:field.title/} ...

  2. 最大流Dinic算法的一些优化 [网络流][最大流]

    明天省夏要讲网络流啦!晚上翻出自己的模板发现是蓝书模板QwQ..拿出以前的提交代码(AC过的?) 曾经的提交记录 在luogu上重新提交一遍,结果gg...OVO 没有去除多余的inline 去除了多 ...

  3. （转）Android 自定义标题栏（title栏）

    转:http://blog.csdn.net/jamin0107/article/details/6715678 第一步,向实现自定义标题栏,需要在onCreate方法里这样写 requestWind ...

  4. Mybatis笔记 - 原始Dao开发方法

    使用Mybatis开发Dao,通常有两个方法,即原始Dao开发方法和Mapper接口开发方法.原始Dao的开发方式是基于入门程序的基础上,对 控制程序 进行分层开发,程序员需要 编写 Dao接口 和 ...

  5. 04.基本数据类型(list,tuple)

    本节主要内容:1. 列表2. 列表的增删改查3. 列表的嵌套4. 元组和元组嵌套5. range一. 列表1.1 列表的介绍 列表是python的基础数据类型之一 ,其他编程语言也有类似的数据类型. ...

  6. Python3升级3.6强力Django+杀手级xadmin打造在线教育平台✍✍✍

    Python3升级3.6强力Django+杀手级xadmin打造在线教育平台 教程 Xadmin安装方法: settings.py 的配置: users App 下的 adminx.py 的配置:

  7. django零散知识点

    后端将对象以对象形式传到前端: from django.core.serializers import serialize def xxx(reqeust): project_list = model ...

  8. <数据分析>初级入门

    1.何为数据分析? 数据分析是指用适当的统计方法对收集来的大量数据进行分析,将它们加以汇总和理解消化,以求最大化地开发数据的功能,发挥数据的作用. 直接的理解:提炼杂乱无章的数据背后的信息,总结出研究 ...

  9. Linux操作系统系列-Linux发布Web项目

    安装JDK 下载jdk 验证是否安装JDK java 如果已经安装了jdk查看已经安装的版本 java -version 如果安装不是所需要的 卸载当前java SDK 通过rpm查看已经安装包 (r ...

  10. 【左偏树】[LuoguP1456] Monkey King

    多...多组数据... awsl 死命的MLE,原来是忘记清空数组了.... 左偏树模板? 对于每一个操作,我们把两个节点$x,y$的祖先$fx,fy$找到,然后把他们的左右儿子分别合并 最后把$v[ ...