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 存在 ...
随机推荐
- 运用《深入理解Java虚拟机》书中知识解决实际问题
前言 以前看别人博客说看完<深入理解Java虚拟机>这本书并没有让自己的编程水平提高多少,不过却大大提高了自己的装逼水平.其实,我倒不这么认为,至少在我看完一遍这本书后,有一种醍醐灌顶的感 ...
- Elasticsearch【快速入门】
前言:毕设项目还要求加了这个做大数据搜索,正好自己也比较感兴趣,就一起来学习学习吧! Elasticsearch 简介 Elasticsearch 是一个分布式.RESTful 风格的搜索和数据分析引 ...
- Java虚拟机三：OutOfMemoryError异常分析
根据Java虚拟机规范,虚拟机内存中除过程序计数器之外的运行时数据区域都会发生OutOfMemoryError(OOM),本文将通过实际例子验证分析各个数据区域OOM的情况.为了更贴近生产,本次所有例 ...
- 结合JDK源码看设计模式——桥接模式
前言: 在我们还没学习框架之前,肯定都学过JDBC.百度百科对JDBC是这样介绍的[JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Jav ...
- 简单地做一下“回到顶部”按钮，用jQuery实现其隐藏和显示
1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...
- arcgis api 4.x for js 结合 react 入门开发系列初探篇（附源码下载）
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
- grep 及正则表达式
grpe 及正则表达式 文本查找的需要:grep,egrep,fgrepgrep: 根据模式,搜索文本,并将符合模式的文本行显示出来.Pattern : 文本字符以及正则表达式的元字符组合而成的匹配条 ...
- 20170319 - pycurl 提示 libcurl link-time version is older than compile-time version
使用 conda update anaconda 升级后,运行程序得到如下提示: ImportError: pycurl: libcurl link-time version (7.45.0) is ...
- 快速构建SPA框架SalutJS--项目工程目录 二
目录结构 上面这张图是salut的目录文档,从github上将其下载后直接运行node run和 node json 可以直接启动项目.下面逐个介绍每个目录的存放的文件和作用. constructio ...
- 聊聊2018.2的Scriptable Build Pipeline以及构建Assetbundle
0x00 前言 在这篇文章中,我们选择了过去几周Unity官方社区交流群以及UUG社区群中比较有代表性的几个问题,总结在这里和大家进行分享.主要涵盖了Scriptable Build Pipeline ...