【前言】在大型项目的开发中，插件化是一种趋势，将相似的多次使用的东西封装成公共的插件，以提高开发效率。其他开发人员在调用插件的时候，只需简单的一两行代码就可以实现非常复杂的内容或者效果。在这一节里面我就跟大家分享一下，我是如何封装一个输入框插件的。【呈现分析】（1）默认展示：边框为灰色，中间有输入提示信息（2）获取焦点：边框为蓝色，无输入内容时中间有输入提示信息，有输入内容的时候中间显示输入内容（3）...
实例如下： var LILL ={};//创建全局 (function (wd) { function $(id) { return document.getElementById(id); } function alertNodeName(id) { alert($(id).nodeName); }var name = "aaaa"; function showName()//函数 { alert(name); } alert(wd); wd[test] = {};//创建对象 wd[test][debuglog] = alertNodeName; wd[test][name] = name; showName(); })(LILL);之后引用写好的js文件，然后在html页面调用<script>window.onload=...
1. 禁止右键点击$(document).ready(function(){$(document).bind("contextmenu",function(e){return false;}); });2. 隐藏搜索文本框文字$(document).ready(function() { $("input.text1").val("Enter your search text here");textFill($(input.text1)); });function textFill(input){ //input focus text functionvar originalvalue = input.val();input.focus( function(){if( $.trim(input.val()) == originalvalue ){ input.v...
本文实例讲述了javascript封装addLoadEvent实现页面同时加载执行多个函数的方法。分享给大家供大家参考，具体如下： 如果想同时执行多个函数，可以将这些函数放入一个数组中，然后在onload事件里循环数组并执行，或者使用另一个方便的函数addLoadEvent： function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != function) {window.onload = func;} else {window.onload = function() {if (oldon...
声明，该DEMO依托于某个培训机构中，非常感谢这个培训结构。话不多说，现在开始改demo的制作。 首先，在前端的学习过程中，轮播图是我们一定要学习的，所以为了更加高效的实现各种轮播图，封装了一个运动的框架。 function getStyle(obj,attr) {if(obj.currentStyle){return obj.currentStyle[attr];//为了获取IE下的属性值}else{return window.getComputedStyle(obj,null)[attr];//为了获取W3C浏览器下的属性值} }function animat...
首先，我们需要xhr对象。这对我们来说不难，封装成一个函数。 var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp");} catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest();} catch (e2) { window.alert("您的浏览器不支持ajax，请更换！");}} return xhr; }; 然后，我们来写核心函数。 var ajax = function(conf) { // 初始化 //type参数,可选 var type ...
示例如下： <script>//函数： 反复执行的代码块//全局只有一个对象，防止全局变量污染var itcast = {getElen : {tag : function(tag){return document.getElementsByTagName(tag);},id : function(id){return document.getElementById(id);}},css : {addStyle : function(){},removeStyle : function(){},addClass : function(){}}}//调用itcast.getElen.tag(body)[0];</script>以上这篇封装获取dom元素的简单实例就是小编分享给大...
最近一直在啃犀牛书，有感，于是写了个简单的js的dom查询 $ = function (val) {switch(val.charAt(0)) {case # :return document.getElementById(val.substring(1));break;case . :val = val.replace(.,);if(document.getElementsByClassName)return document.getElementsByClassName(val);else {var obj = document.getElementsByTagName(*),len = obj.length,arr=[];for(var i=0;i<len;i++) {if(obj[i].className == val) {arr[a...
经过前两部分的讲解，我们大概知道内容滑动切换的基本开发思路和技巧，现在我们在第三部分将前面两部分的代码进行优化，封装成一个jQuery插件：jquery.hwSlide.js。开发者可以轻松创建各种图片轮播效果、焦点图效果、图文混排滑动效果。下载源码hwSlider具有以下特性：?多个参数定制，满足不同项目需求。 ?支持移动端触控滑动。 ?支持图文混排，支持各种html元素。 ?响应式自适应屏幕尺寸。 ?同一页面支持多个滑动切换。 ?轻量级的...
在实际开发中，有些通过get方式与后台交换数据的时候，需要用到的数据在url中，因此就需要我们来获取到url中有用的信息，下面封装的函数已经可以将url解析的很彻底了，可以拿来直接用的： function parseURL(url) {var a = document.createElement(a);a.href = url;return {source: url,protocol: a.protocol.replace(:,),host: a.hostname,port: a.port,query: a.search,params: (function(){var ret = {},seg = a.search.replace...
1.prototype对象 1.1构造函数的缺点 JavaScript通过构造函数生成新对象，因此构造函数可以视为对象的模板。实例对象的属性和方法，可以定义在构造函数内部。 function Cat (name, color) {this.name = name;this.color = color; }var cat1 = new Cat(大毛, 白色);cat1.name // 大毛 cat1.color // 白色上面代码的Cat函数是一个构造函数，函数内部定义了name属性和color属性，所有实例对象都会生成这两个属性。但是，这样做是对系统...
本文大概分为三步实现jquery ajax通过js封装，通过代码实例讲解，代码附有注释，比较容易理解，具体详情如下所示： 第一步：引入jQuery库<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> 第二步：开发Ajax封装类，已测试通过，可以直接调用，直接贴代码，讲解就省了/***************************************************************** jQuery Ajax封装通用类 (linjq) ******************...
闲的蛋疼，封装了个二级城市下拉 先保证html里有 <SPAN style="BACKGROUND-COLOR: #ffffff; COLOR: #ff0000"><select id="province" size=1 > </select> <select id="city" style="width:60px"> </select> <input type="hidden" id="pro_city" /></SPAN> 然后引用js 最终通过new SelectCity() 调用。 懒得分离这里js就写在页面了 一言不合上代码 <html> <head> <meta charset="UTF-8"> </head> <body> <select id="pr...
为接下来要做一个动态输入的表格积累的资料，非常不错，下面分享给大家，供大家参考，如果有更好的插件和封装的东西，共享下哈。。关键代码如下：<script type="text/javascript"> var currentActiveRow; //选中的颜色 var customTable = function() { }; customTable.prototype = { init: { ajaxUrl: "", tId: "tbody", delMsg: "确认要删除吗?" }, ajax: function(params, callback) { var that = this; $.ajax({ type: "get", c...
本文实例汇总了基于jQuery的项目常见函数封装。分享给大家供大家参考，具体如下： /// <reference path="jquery-1.8.0.min.js" /> /* * DIV或元素居中 * @return */ jQuery.fn.mCenterDiv = function () {this.css("position", "absolute");this.css("border", "1px solid #ccc");this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");this.css("left", ($(window).width() - this.width())...