看看Jquery,再看看传统的JS,我们来效仿一$(function(){$(“#a”).click=function(){};});吧

简介:

Jquery简化了传统JS实现功能的代码量,例如:

jquery的$(function(){});相当于传统JS的window.onload=function(){};

还是看一下我写的代码吧:

<script type="text/javascript">
        window.onload = function() {
            //定义一个类对象
            var Zhang = {
                Title: "",
                Width: "100",
                Height: "",
                Zhang: function(title, width, height) {
                    this.Title = title;
                    this.Width = width;
                    this.Height = height;
                },
                Zhang: function(title, height) {//方法的重载
                    this.Title = title;
                    this.Height = height;
                },
                init: { target: "_blank", src: "" },
                generate: function() {
                    var insertedNode = document.createElement('img'); //添加HTML標記
                    insertedNode.setAttribute('src', Zhang.init.src);
                    insertedNode.setAttribute("width", Zhang.Width);
                    insertedNode.setAttribute("height", Zhang.Height);

// var newTextNode = document.createTextNode("<img src='" + Zhang.init.src

// + "' width=" + Zhang.Width + " height=" + Zhang.Height + ">"); //添加文本

                    document.getElementsByTagName("body")[0].appendChild(insertedNode);
                }
            }
 
            var obj = document.getElementById("add");
            Zhang.Zhang("图像测试", "300", "600"); //覆盖原来的值100
            Zhang.init.src = "http://d4.sina.com.cn/201106/03/312669_78090-biaoxian.JPG";
            if (typeof (obj.addEventListener) != "undefined") { //判断浏览器
                obj.addEventListener("click", Zhang.generate, true); //触发单击事件
            } else {
                obj.attachEvent("onclick", Zhang.generate); //绑定方法
            }
 
        };
    </script>
,如需转载请自行联系原博主。
目录
相关文章
|
9月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
302 14
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
185 5
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
295 3
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
95 1
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
133 0
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
163 0
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
626 0