jQuery4操作表单+属性+样式
一、动态添加表格
<!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操作表单+属性+样式的更多相关文章
- 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操作盒 ...
- 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标
一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...
- jsp——js事件修改属性样式的两种方法（直接赋值、修改属性）、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存
代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...
- UIAlertController警告视图和操作表单
//创建一个myAlert1操作表单对象(UIAlertControllerStyleActionSheet为操作表单,UIAlertControllerStyleAlert为警告视图) UIAler ...
- 【原】React操作表单
最近的项目中开发中都是用react,其中有用到react去操纵表单.然后自己就在每个表单元素中添加 ref, 然后再像jquery操作dom一样去操纵这个ref, 代码如下: 首先我在每个表单元素那 ...
- JQuery：各种操作表单元素方法小结
来源:http://www.ido321.com/1220.html 表单元素无处不在,已然成了Web应用不可或缺的一个部分.对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值.那在JQu ...
- jQuery使用（三）：DOM操作之val()方法操作表单元素value值
操作表单元素属性value的值 <form action="./" method='GET'> <h3 >选择你喜欢的明星</h3> <s ...
- 前端 ----jQuery操作表单
05-使用jQuery操作input的value值 表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用j ...
- js进阶 9 js操作表单知识点总结
js进阶 9 js操作表单知识点总结 一.总结 一句话总结:熟记较常用的知识点,对于一些不太常用的知识点可以在使用的时候查阅相关资料,在使用和练习中去记忆. 1.表单中学到的元素的两个对象集合石什么? ...
随机推荐
- pom parent 标签
<!--parent用于引用父工程 1.统一管理jar包的版本,其依赖需要在子工程中定义才有效(比如此例) 2.统一的依赖管理(父工程的<dependencies>,子工程不必重新引 ...
- MYSQL - 外键、约束、多表查询、子查询、视图、事务
MYSQL - 外键.约束.多表查询.子查询.视图.事务 关系 创建成绩表scores,结构如下 id 学生 科目 成绩 思考:学生列应该存什么信息呢? 答:学生列的数据不是在这里新建的,而应该从学生 ...
- php开发面试题---php面试题英语(How do you debug a PHP application)
php开发面试题---php面试题英语(How do you debug a PHP application) 一.总结 一句话总结: xdebug or use die() do it; 1.Whi ...
- VS2010-MFC（对话框：消息对话框）
转自:http://www.jizhuomi.com/software/171.html 前面几节讲了属性页对话框,我们可以根据所讲内容方便的建立自己的属性页对话框.本节讲解Windows系统中最常用 ...
- Ubuntu下搭建Pixhawk开发环境
安装提示 需要网络环境,不然下载会很慢. 工具安装 1. 权限设置 sudo usermod -a -G dialout $USER 代码输入可以拷贝,但是不可以用快捷键. 需要输入密码,输入密码无显 ...
- [kuangbin带你飞]专题一 简单搜索 - E - Find The Multiple
//Memory Time //2236K 32MS #include<iostream> using namespace std; ]; //保存每次mod n的余数 //由于198的余 ...
- centos7 将home目录空间扩容到根目录
[root@localhost ~]# umount /home/ [root@localhost ~]# lvremove /dev/mapper/centos-home Do you really ...
- js中一个标签在按顺序执行没有被读取到时可以用window.onload
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <!DOCTYPE html PUBLIC " ...
- POJ - 2778 ~ HDU - 2243 AC自动机+矩阵快速幂
这两题属于AC自动机的第二种套路通过矩阵快速幂求方案数. 题意:给m个病毒字符串,问长度为n的DNA片段有多少种没有包含病毒串的. 根据AC自动机的tire图,我们可以获得一个可达矩阵. 关于这题的t ...
- Markdown语法--整理
Markdown基本语法 [TOC] 优点: 1.因为是纯文本,所以只要支持Markdown的地方都能获得一样的编辑效果,可以让作者摆脱排版的困扰,专心写作. 2.操作简单.比如:word编辑时标记个 ...