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来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
jquery拖动改变div大小
Jul 04 jQuery
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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生成HTML静态页面实例代码
2008/08/31 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
Angular2 http jsonp的实例详解
2017/08/31 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
python matplotlib库的基本使用
2020/09/23 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
个人自荐材料
2014/05/23 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
文明礼仪倡议书
2015/04/28 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python