jQuery中DOM操作实例分析


Posted in Javascript onJanuary 23, 2015

本文实例讲述了jQuery中DOM操作的方法。分享给大家供大家参考。具体分析如下:

这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式)、属性的修改、样式的修改、动态绑定事件
代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<title>动态创建对象</title>

</head>

<body>

<div id="testDiv">测试图层</div>

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA"/>

<input type=text id=inputTest readonly=true />

<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>

<div id="testDiv6">获取自定义数据-2</div>

<script type="text/javascript">

//document.getElementById("testDiv").innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>";

var testDiv = document.getElementById("testDiv");

var select = document.createElement("select");

select.options[0] = new Option("加载项1", "value1");

select.options[1] = new Option("加载项2", "value2");

select.size = "2";

var object = testDiv.appendChild(select);

$("img").each(function(index) {

this.alt = "changed";//修改dom属性信息

//alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);

});

$("#inputTest").removeAttr("readonly");

//alert($("#inputTest").attr("readonly"));

$(function()

{

alert("attr(\"width\"):" + $("#testDiv").attr("width"));//undifined

alert("css(\"width\"):" + $("#testDiv").css("width"));//auto(ie6) 或1264px(ff)

alert("width():" + $("#testDiv").width()); //正确的数值1264

alert("style.width:" + $("#testDiv")[0].style.width ); //空值

})

//动态绑定单击事件

$("#testDiv5").bind("click", function(event)

{ alert($(event.target).attr("customer")); });

//绑定只执行一次的单击事件

$("#testDiv6").one("click", { customer: "customer data 2",a:"aaa" }, function(event)

{ alert(event.data.customer) });

</script>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
jquery实现点击页面计算点击次数
Jan 23 #Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 #Javascript
PHP实现的各种中文编码转换类分享
Jan 23 #Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 #Javascript
PHPExcel中的一些常用方法汇总
Jan 23 #Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 #Javascript
使用angular写一个hello world
Jan 23 #Javascript
You might like
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python操作CouchDB的方法
2014/10/08 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
详解Python中的路径问题
2020/09/02 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
编辑求职信样本
2013/12/16 职场文书
党员活动日总结
2014/05/05 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2015年老干部工作总结
2015/04/23 职场文书
2016读书月活动心得体会
2016/01/14 职场文书