一、动态添加表格

<!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. String 详解

    String String对象不可变,当对象创建完毕之后,如果内容改变则会创建一个新的String对象,返回到原地址中. 不可变优点: 多线程安全. 节省空间,提高效率. 源码: public fin ...

  2. C/C++ 公有函数无法返回私有的类对象解决方案

    { 能出这种错的说明还需要提升C++,增强对类的理解 解决方案:把你的私有的对象的私有的拷贝构造或者同类赋值改为公开的 }

  3. 剑指Offer-14:输入一个链表，输出该链表中倒数第k个结点。

    题目描述: 输入一个链表,输出该链表中倒数第k个结点.例如有一个链表有六个节点1,2,3,4,5,6.则它的倒数第二个节点为5 节点定义如下: public class ListNode { int ...

  4. PHP缓存技术简单介绍

    一.数据缓存 这里所说的数据缓存是指数据库查询缓存,每次访问页面的时候,都会先检测相应的缓存数据是否存在,如果不存在,就连接数据库,得到数据,并把查询结果序列化后保存到文件中,以后同样的查询结果就直接 ...

  5. 2018湖南NOIP集训报告7.15~7.26

    Day1 主打内容:dfs/bfs及其优化剪枝,以及贪心算法的应用. 老师:\(Gromah\) 不得不说这个老师真的是个有趣的强大怪... 今天讲的挺水的,其实就是搜索吧,也没啥好听的,追会儿小说\ ...

  6. OBJC依赖库管理利器cocoapods 安装及使用详细图解

    cocoapods: github:https://github.com/CocoaPods/CocoaPods 官方网站:http://www.cocoapods.org/ 1.安装 RubyGem ...

  7. WordPress 3.8 中文正式版下载 - 建站与学习首选！全球最流行的开源PHP博客网站程序

    转载自:http://www.iplaysoft.com/wordpress.html 话说虽然我一直都在网站底部写着本站基于 WordPress 构建,但时常还是有人问我网站是用什么程序建的,还真有 ...

  8. tp5 mkdir() 没有权限

  9. django2 连接mysql实现第一个rest framework

    1.安装pymysql,mysqlclient,创建项目django-admin startproject django2 2.settings中把DataBase配置换掉 DATABASES = { ...

  10. 多进程并发socket通信

    实现多个客户端同时接入server端,并且可以同时向客户端发送信息 server端 def dunc(conn,client_addr): while True: data=conn.recv(102 ...