jQuery元素操作
jQuery中创建元素及追加元素
DOM中可以动态创建元素:document.createElement(“标签的名字”);
jQuery中同样可以创建元素标签,并且返回的就是jQuery对象,可以直接调用方法
进行使用
1.append 方法用来在元素的末尾追加元素（最后一个子节点）。增加元素末尾
2.prepend ，在元素的开始添加元素（第一个子节点）。增加元素开始
3.after ，在元素之后添加元素（添加兄弟）增加元素后面
4.before ：在元素之前添加元素（添加兄弟）增加元素前面
案例：
权限选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
//第一个按钮:获取按钮添加点击事件,获取第一个下拉框中被选中的option添加到第二个下拉框
$("#toRight").click(function () {
$("#se2").append($("#se1>option:selected"));
}); //第二个按钮
$("#toLeft").click(function () {
$("#se1").append($("#se2>option:selected"));
});
//第三个按钮
$("#toAllRight").click(function () {
$("#se2").append($("#se1>option"));
});
//第四个按钮
$("#toAllLeft").click(function () {
$("#se1").append($("#se2>option"));
});
}); </script>
</head>
<body>
<div style="margin-left: 500px; margin-top: 20px; background-color: #999999">
<select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se1">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>查询</option>
<option>打印</option>
</select>
<div style="width: 50px; float: left;">
<input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
<input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
<input type="button" name="name" value=">>" style="width: 50px;" id="toAllRight" />
<input type="button" name="name" value="<<" style="width: 50px;" id="toAllLeft" />
</div>
<select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se2">
</select>
</div> </body>
</html>
创建元素的方式:
1.html方法设置内容,返回的是当前的对象,如果不传入参数,获取的是标签中的内容
2.html 方法可以创建元素
3.$(“html 标签”) 可以创建元素
案例：点击按钮动态创建表格
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} div {
margin-left: 300px;
margin-top: 100px;
} table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
} th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
} td {
font: 14px "微软雅黑";
} tbody tr {
background-color: #f0f0f0;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
// 模拟从后台拿到的数据
var datas = [
{
name: "传智播客",
url: "http://www.itcast.cn",
type: "IT最强培训机构"
},
{
name: "黑马程序员",
url: "http://www.itheima.com",
type: "大学生IT培训机构"
},
{
name: "传智前端学院",
url: "http://web.itcast.cn",
type: "前端的黄埔军校"
}]; $(function () {
$("#btnCreate").click(function () {
var arr=[];
//遍历数组
for(var i=0;i<datas.length;i++){
var obj=datas[i];//数组中的每一个对象
//创建行和列,加入到tbody中
arr.push("<tr><td><a href="+obj.url+">"+obj.name+"</a></td> <td>"+obj.type+"</td></tr>");
}
$("#tbd").html(arr);
});
});
</script>
</head> <body>
<input type="button" value="获取数据" id="btnCreate"/>
<div>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody id="tbd">
</tbody>
</table>
</div>
</body> </html>
设置和获取表单的value
input标签:文本框,radio,select,textarea(文本域),checkbox….常见的表单标签都可以通过val方法获取和设置value值
例如：
$("#txt1").val("admin");
$("#txt2").val("123456");
$("#txt3").val(" 这是一个条款");
$("#s1").val(2);// 设置 value 为 2 的选中
案例:设置和获取系统属性值或者自定义属性
$("#btn1").click(function () {
$("a").attr("title"," 传智播客")
$("a").attr("href","http://www.itcast.cn");
});
$("#btn2").click(function () {
// 获取属性值
console.log($("a").attr("title"));
});
attr()方法:可以设置属性值,两个参数:1.属性名字,2,属性值
attr()方法:可以获取属性值,一个参数:1.属性名字
案例:全选和反选案例
设置复选框选中:(attr设置checkbox的选中有问题)prop
prop用法和attr一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.2.js"></script>
<script>
//两个按钮:1按钮全选,2全不选
$(function () {
//获取第一个按钮,点击---全选
$("#btnAll").click(function () {
$("#dv :checkbox").prop("checked",true);
});
//获取第二个按钮,点击---全不选
$("#btnNoAll").click(function () {
$("#dv :checkbox").prop("checked",false);
});
});
</script>
</head>
<body>
<input type="button" value="全选" id="btnAll"/>
<input type="button" value="全不选" id="btnNoAll"/>
<div id="dv">
<input type="checkbox" value="1"/>吃饭
<input type="checkbox" value="2"/>睡觉
<input type="checkbox" value="3"/>打豆豆
<input type="checkbox" value="4"/>打篮球
<input type="checkbox" value="5"/>打足球
<input type="checkbox" value="6"/>打铅球
<input type="checkbox" value="7"/>打桌球
</div>
</body>
</html>
设置和获取元素的宽和高
通过.css()方法写一个属性可以获取宽或者高,是字符串类型如果获取后重新设置需要转换,麻烦
1.width()方法获取宽度
2.height()方法获取高度
获取的时候直接就是数字类型
例如：
console.log($("div").width());
console.log($("div").height());
位置操作
Offset()方法返回的是对象,并且,对象中有一个left和一个top,并且值是数字类型，设置的时候也可以没有px，设置的时候元素在设置前如果没有脱离文档流,设置的时候会自动进行脱离文档流,默认为relative，如果设置前有脱离文档流,那么设置的时候直接改变位置
例如：
// 获取的是对象 , 并且没有 px
console.log($("div").offset());
console.log($("div").offset().left);
console.log($("div").offset().top);
注意:如果层和层中的标签同时定位,并且,标签距离左上角50px.通过按钮设置层距离左上角100px,那么标签此时距离左上角为150px。
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢
jQuery元素操作的更多相关文章
- jQuery元素操作1
元素操作 1.2.1 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 1. ...
- 测开之路一百零二：jquery元素操作
jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...
- JQuery 元素操作 each循环
参考:http://jquery.cuishifeng.cn/css.html 1.属性操作 --------------------------属性 $("").attr(); ...
- javascript(JQuery)元素操作
html代码如下: <div id="picK"> <ul> <li style="float:left;width:90px;" ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）
主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...
- jquery元素节点操作
jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...
- 深度解析JQuery Dom元素操作技巧
深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...
- jquery/js iframe 元素操作
1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...
随机推荐
- .net core redis 驱动推荐，为什么不使用 StackExchange.Redis
前言 本人从事 .netcore 转型已两年有余,对 .net core 颇有好感,这一切得益于优秀的语法.框架设计. 2006年开始使用 .net 2.0,从 asp.net 到 winform 到 ...
- Linux安装kubernetes
使用KUBEADM安装KUBERNETES V1.14.0 一.环境准备 操作系统:Centos 7.5 一台或多台运⾏行行着下列列系统的机器器: Ubuntu 16.04+ ...
- 结合JDK源码看设计模式——装饰者模式
定义 在不改变原有对象的基础之上,将功能附加到对象上 适用场景 扩展一个类的功能 动态的给对象增加功能,当功能不需要的时候能够动态删除 详解 在看到定义的时候,可能很多人会想,这不就是继承吗?的确很像 ...
- Snapde一个全新的CSV超大文件编辑软件
今天介绍如果数据量超过104万行Excel无法打开了,用什么软件可以打开呢?Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它在C++语言开发的Snapman多人协作电子 ...
- 理解Linux文档的默认安全机制、隐藏属性、特殊权限，妈妈在也不用担心你从删库到跑路！！！
写在前面 前面的章节 详解Linux文档属性.拥有者.群组.权限.差异,介绍了文档的基本权限,包括读写执行(r,w,x),还有文档若干的属性,包括是否为目录(d).文件(-).链接文件(l).拥有者. ...
- 【视频】ASP.NET Core MVC 2.* 入门
比较初级的入门教程,网址在B站:https://www.bilibili.com/video/av33728783/ 内容如下: 1. ASP.NET Core 简介和开发工具 2. ASP.NET ...
- numpy操作
python中使用了numpy的一些操作,特此记录下来: 生成矩阵,替换值 import numpy as np # 生成一行10列的矩阵 dataset = np.zeros((1, 10)) # ...
- perl学习笔记--搭建开发环境
windows下perl开发环境搭建 perl下载地址:http://www.activestate.com/developer-tools 各个插件的安装方法:(通过代理上网的方法) 方法一:pad ...
- 过程 sp_addextendedproperty， 对象无效。不允许有扩展属性，或对象不存在。
过程 sp_addextendedproperty, 对象无效.不允许有扩展属性,或对象不存在. 首先这个是创建数据表的SQL,有Power Designer创建模型,直接生成的创建SQL会出现的问题 ...
- 【Android Studio安装部署系列】十四、Android studio移除工程和删除项目
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio删除工程.项目的操作步骤. 移除工程 主要用于从最近打开的项目列表中移除.硬盘中还是存在这个项目的. F ...