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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
PHP与以太坊交互详解
2018/08/24 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
详解Python编程中time模块的使用
2015/11/20 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
Python应用库大全总结
2018/05/30 Python
python多线程抽象编程模型详解
2019/03/20 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python进度条的制作代码实例
2019/08/31 Python
Python实现代码块儿折叠
2020/04/15 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
How TDD works
2012/09/30 面试题
用Python写一个for循环的例子
2016/07/19 面试题
医生见习报告范文
2014/11/03 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题