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 存在 ...
随机推荐
- renren-fast开源项目解析日志—1、项目的部署
renren_fast项目解析日志 一.环境搭建 1.后端部署 (1)下载源码 按照步骤,从码云上down了fast,zip的(引maven项目)项目包. (2)安装lombok插件 安装lombok ...
- 8天入门docker系列 —— 第五天 使用aspnetcore小案例熟悉容器互联和docker-compose一键部署
这一篇继续完善webnotebook,如果你读过上一篇的内容,你应该知道怎么去挂载webnotebook日志和容器的远程访问,但是这些还远不够,webnotebook 总要和一些数据库打交道吧,比如说 ...
- Eureka服务配置与进阶
1. Eureka服务配置与进阶 1.1. 主要配置 1.1.1. 服务端(eureka.server.*) enableSelfPreservation默认true,启用注册中心的自保护机制,Eur ...
- headfirst设计模式（7）—命令模式
一.前言 什么是命令模式? 在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比如要对行为进行“记录.撤销/重做.事务”等处理,这种无法抵御变化的紧耦合是不合适的.在这 ...
- iOS----------上传遇到的问题
插叙:之前电脑一直遇到VPN登录不了的问题,试了几台电脑都能正常连接,只有我的电脑不可以,VPN大佬建议我直接重装系统,索性就直接重新装了系统,结果就能连接了.昨天开始上传包的时候,发现用Applic ...
- Android 项目中用得最多最火的第三方框架可能都在这里了
分类 二级分类 框架名称 简介 Star 数 最近更新 UI 刷新 SmartRefreshLayout 智能下拉刷新框架 14k 18天 UI 刷新 Android-PullToRefresh 比较 ...
- SQL基础语法
数据库: 结构化查询语言(Structured Query Language)简称SQL: 数据库管理系统(Database Management System)简称DBMS: 数据库管理员(Data ...
- 超好用的C#控制台应用模板
本文是Wei的公众号投稿文章: 默认模板之缺 在工作学习中,我们经常需要创建一些简单的控制台应用(Console App)去验证某个想法,或者作为小工具交付给其他同事. 通常我们的选择是 Visual ...
- 经典排序算法 — C#版本（中）
归并排序比较适合大规模得数据排序,借鉴了分治思想. 归并排序原理 自古以来,分久必合合久必分. 我们可以这样理解归并排序,分-分到不能分为止,然后合并. 使用递归将问题一点一点分解,最后进行合并. 分 ...
- Kafka面试题
1.如何获取topic主题的列表bin/kafka-topics.sh --list --zookeeper localhost:2181 2.生产者和消费者的命令行是什么?生产者在主题上发布消息:b ...