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.表单中学到的元素的两个对象集合石什么? ...
随机推荐
- SpringCloudBus
不重启微服务的情况下更新配置 配置服务端 tensquare_config配置依赖 <dependency> <groupId>org.springframework.clou ...
- 【转载】opencl中设备内存
地址空间限定符 一般的内核代码中,里面的内核参数或声明变量时,都会有地址空间限定符 地址空间限定符,地址空间限定符的主要作用是指出数据应该保存在哪个地方 地址空间限定符有4个: 全局内存: 限定符:_ ...
- python实现全局配置和用户配置文件
一.文件目录格式 二.代码 1.conf.__init__.py import importlib import os from conf import gsettings class Setting ...
- linux安装splunk-enterprise
一.介绍 Splunk是一款功能强大,功能强大且完全集成的软件,用于实时企业日志管理,可收集,存储,搜索,诊断和报告任何日志和机器生成的数据,包括结构化,非结构化和复杂的多行应用程序日志. 它允许您以 ...
- PAT甲级——A1114 Family Property【25】
This time, you are supposed to help us collect the data for family-owned property. Given each person ...
- 深入分析Service启动、绑定过程
Service是Android中一个重要的组件,它没有用户界面,可以运行在后太做一些耗时操作.Service可以被其他组件启动,甚至当用户切换到其他应用时,它仍然可以在后台保存运行.Service 是 ...
- 安装MySql社区版（35-3）
1,https://dev.mysql.com/ --------------------------------------------------------------------------- ...
- 深夜Python - 第2夜 - 爬行
深夜Python - 第2夜 - 爬行 我曾经幻想自己是一只蜗牛,有自己的一只小壳,不怕风,不怕雨,浪荡江湖,游历四方……夜猫兄一如既往地打断了我不切实际的幻想:“浪荡?游历?等你退休了都爬不出家门口 ...
- 配置vue项目的自定义config.js
[1]不采用脚手架的config文件夹中的配置文件 [2]在static文件夹下,自定义一个congfig.js文件 // 配置开发环境下服务器地址 window.Glod = { pmsApiUrl ...
- Python版本OpenCV安装配置及简单实例
# 2018-06-03 # 1. Python下载:https://www.python.org/downloads/ 选择对应平台对应版本的的Python进行安装. 2. Python版OpenC ...