在进入主题之前，我们先来看一个前台页面经常用到的功能：点击页面输入框时自动选择其中文本。 很容易想到利用输入框的focus事件，当输入框获得焦点时，再调用jQuery的select()方法。 Okay，想法很简单，逻辑似乎也无错。具体我们来看一下现实到底能不能实现。 1.页面构造个表单，放上几个输入框。代码看起来是这样子的。 代码如下:出来的界面在Chromium里差不多是这个样子的： 2.然后开始写我们的JavaScript代码来实现单击选中框内...
隐藏模态窗口技术是一种很好的解决方案，用于处理不是特有必要出现在网页上的界面元素。社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单。在博客和杂志网站也适用于与主网站分开的作者登陆页面，模态窗口比在JavaScript中创建新窗口更容易，因为使用HTML标记显示，所有 的东西能都呈现在同一个窗口中。 我将演示如何利用jQuery插件leanModal建立一个常规模态窗口。如果你有MIT general license，那么这个插件是...
代码如下: 无标题文档 #Adiv div {float:left; width:100px;border:1px solid #333;margin-top:100px;} #SDiv {width:135px;position: absolute;} $(function(){ var x = -90; var y = -70; $("#Adiv div").mouseenter(function(e){ this.xx = ($(this).index() + 1) * 100; this.yy = $(this).offset().top; var login = $(this).attr("href"); if($("#SDiv")){$("#SDiv").remove();} var div = ""; $("body").append(div...
代码如下:jQuery 表格自动增加table { width:800px; margin:50px auto; border-collapse:collapse; border-spacing:0; }table tr, table th, table td { border:1px solid #ddd; font-size:12px; }table tr td:first-child { width:30px; text-align:center; }table td input { width:100%; height:100%; padding:5px 0; border:0 none; }table td input:focus { box-shadow:1px 1px 3px #ddd inset; outline:none; } 序号姓名金...
代码如下: //引入Jquery //编写创建的div的样式 #tooltip { position: absolute; border: 1px #solid #333; background: #f7f5d1; padding: 1px; color: #333; display: none; } //编写JS代码 $(function () { var x = 10; var y = 10; $("a.tooltip").mouseover(function (e) { //当鼠标指针从元素上移入时 this.myTitle = this.title; this.title = ""; var tooltip = "" + this.myTitle + ""; $("body").append(tooltip); $...
代码如下: New Document //创建一个弹出层,title 标题，width 宽度，height 高度，content 内容，url 如果url不为空时则覆盖content加载url页面中的内容 function CreatePopLayerDiv(title,width,height,content,url){ var titles = title || "标题"; var Iheight=$(window).height(); var Iwidth =$(window).width(); var heights = height || 300; var widths = width || 500; var Oheight= (Iheight -heights) / 2; var...
如何一气呵成地，on the fly地操作DOM元素呢？ 例如顺序执行【创建】-> 【修改】-> 【添加】三个动作。 由于jQuery支持链式操作，其实就是设计模式的builder模式，所以我们可以把三个操作串在一起来执行。 首先创建一个p元素，内容包含一个a元素。 代码如下: $(jQuery) 然后为a元素添加一个href属性 代码如下: $(jQuery).find(a).attr(href, http://www.jquery.com) 最后把新添加的p元素添加到body中 代码如下: $(jQuery).fin...
采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置，从而看起来会非常高大上。 滚动到顶部：代码如下:$(.scroll_top).click(function(){$(html,body).animate({scrollTop: 0px}, 800);}); 滚动到指定位置：代码如下:$(.scroll_a).click(function(){$(html,body).animate({scrollTop:$(.a).offset().top}, 800);}); 完整实例源码参考： 代...
通过 JSON 字符串来创建对象First Name: Last Name: //txt为字符串 var txt = '{"employees":[' + '{"firstName":"Bill","lastName":"Gates" },' + '{"firstName":"George","lastName":"Bush" },' + '{"firstName":"Thomas","lastName":"Carter" }]}'; //通过eval()方法 //var obj = eval ("(" + txt + ")"); //通过JSON解析 //obj = jQuery.parseJSON(txt); obj = JSON.parse(txt);document.getElementById("fname").innerHTM...
本文实例讲述了jQuery动态创建html元素的常用方法，在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下： 一般来说，可以通过以下几种方式动态创建html元素： 1、使用jQuery创建元素的语法 2、把动态内容存放到数组中，再遍历数组动态创建html元素 3、使用模版 1.使用jQuery动态创建元素追加到jQuery对象上。运行效果如下图所示：2.先把内容放到数组中，然后遍历数组拼接成html运行效果如下图所示：...
本文实例讲述了jQuery创建DOM元素的使用技巧。分享给大家供大家参考。具体分析如下： 利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。 而jQuery使用$就可以直接创建DOM元素代码如下:var oNewP = $("使用jQuery创建的内容"); 以上代码等同于javascript代码如下:var oNewP2 = document.createElement("p"); var oText = document.createTextNode("这是使...
利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。 而jQuery使用$就可以直接创建DOM元素代码如下: var oNewP = $("使用jQuery创建的内容");以上代码等同于javascript代码如下:var oNewP2 = document.createElement("p");var oText = document.createTextNode("这是使用javascript方法创建的内容");oNewP2.appendChild(oText);例：使用jQuery创建DOM代码如...
本文实例讲述了基于jQuery创建鼠标悬停效果的方法。分享给大家供大家参考。具体实现方法如下： 1. 创建HTML：2. 选择.mainnav的class：$(".mainnav").hover(function () {},function () {} );3. 建立变量imgPath，指定图片SRC：$(".mainnav").hover(function () {// Grab the sourcevar imgPath = $(this).attr("src");},function () {// Grab the sourcevar imgPath = $(this).attr("src");} );4. 找到字符串off，用on替换：$(".m...
本文实例讲述了jQuery创建自定义的选择器用以选择高度大于100的超链接实现方法。分享给大家供大家参考。具体分析如下： jQuery创建一个自定义的选择器，自己定义的这个选择器实际上可以是一个函数，下面的JS代码定义了一个over100pixels的选择器，选择出高度大于100的链接，这类技巧非常实用$.extend($.expr[':'], {over100pixels: function(a) {return $(a).height() > 100;} }); $('.box:over100pixels').click(function() {aler...
本文总结了帮助你创建更好jQuery插件的10条建议。分享给大家供大家参考。具体说明如下： 在开发过很多 jQuery 插件以后，我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以 copy & paste 大部分的代码结构，只要专注最主要的逻辑代码就行了。使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题，不论插件简单还是复杂。我在这里分享10条我总结的经验。...