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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
php实现文件上传基本验证
2020/03/04 PHP
JS动态调用方法名示例介绍
2013/12/18 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
js处理包含中文的字符串实例
2017/10/11 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python读取注册表中值的方法
2013/04/08 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
高中数学教学反思范文
2016/02/18 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
css3新特性的应用示例分析
2022/03/16 HTML / CSS
详解Python中*args和**kwargs的使用
2022/04/07 Python