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.表单中学到的元素的两个对象集合石什么? ...
随机推荐
- Python 学习杂项
#print("Hello World!") #name = "nihfjkds" age = 454 num1 = 1 num2 = 2 #print(nam ...
- 牛客多校第四场 A meeting 树的半径
题意: 有一棵树,树上有许多人,他们要聚会,找一个点使得所有人到这个点的距离的最大值最小. 题解: 首先,以一个有人的点为根,求一个生成树,删掉所有没有人的子树,保证所有的悬挂点(只连接一条边的点)都 ...
- timestamp的自动更新 ON UPDATE CURRENT_TIMESTAMP
最近有一个关于MySQL版本升级的事,涉及到一些关于时间类型的细节问题需要查明,因此到官网找到相关文章,翻出来比较方便自己理解,博客这里也贴一下. 参考官网网址: https://dev.mysql. ...
- POJ-2255-Tree Recovery-求后序
Little Valentine liked playing with binary trees very much. Her favorite game was constructing rando ...
- Spring Cloud Config的配置中心使用非对称性加密
首先,我们需要通过keytool工具来生成密钥对. keytool是JDK中的一个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认 ...
- PAT甲级——A1104 Sum of Number Segments【20】
Consider a positive integer N written in standard notation with k+1 digits ai as ak⋯a1a0 ...
- 纯CSS3实现图片展示特效
本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无 ...
- Mysql图解安装向导
注:本次安装为解压缩版: 1.设置Mysql环境变量: MYSQL_HOME: D:\Java\MySql\mysql-5.7.9-winx64 PATH: %MYSQL_HOME%\bin; 2.安 ...
- 锐速与BBR的原理简单解析
锐速与BBR的原理简单解析 4 前言 昨天,有一位朋友在我的文章下留言说,锐速和BBR不都是一样,是拥塞算法嘛.因为这方面需要讲的东西比较多,所以我还是专门水一篇文章吧. 锐速 参考资料: http ...
- Extjs & Ext.net中的一些属性
Extjs & Ext.Net 弹出整个浏览器对话框的方法 top.Ext.Msg.alert("值"); top.Ext.Msg.confirm("值" ...