Welcome 微信登录

首页 / 脚本样式 / JavaScript

jQuery源码分析之jQuery.fn.each与jQuery.each用法

jQuery源码分析之jQuery.fn.each与jQuery.each用法

本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法。分享给大家供大家参考。具体分析如下:先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类复制代码 代码如下:$("div").each(function(index, elem){ $(this).addClass("red");}});上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的复制代码...
Javascript中的几种URL编码方法比较

Javascript中的几种URL编码方法比较

javascript中存在几种对URL字符串进行编码的方法:escape(),encodeURI(),以及encodeURIComponent()。这几种编码所起的作用各不相同。escape() 方法: 采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)。比如,空格符对应的编码是%20。不会被此方法编码的字符: @ ...
jQuery操作DOM之获取表单控件的值

jQuery操作DOM之获取表单控件的值

本文实例讲述了jQuery操作DOM之获取表单控件的值。分享给大家供大家参考。具体分析如下:HTML属性与DOM属性差别最大的地方,恐怕就要数表单控件的值了。比如,文本输人框的 value属性在DOM中的属性叫defaultValue,DOM中就没有value属性。而选项列表(select) 元素呢,其选项的值在DOM中通常是通过selectedIndex属性,或者通过其选项元素的 selected属性来取得。由于存在这些差异,在取得和设置表单控件的值时,...
jQuery中DOM树操作之使用反向插入方法实例分析

jQuery中DOM树操作之使用反向插入方法实例分析

本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下:使用反向插入方法这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效。可是我们现在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容。此时,利 用反向插入方法,可以帮我们解决问题。像.insertBefore()和.app...
PHP实现的各种中文编码转换类分享

PHP实现的各种中文编码转换类分享

目前该类库可以实现的编码转换有:简体中文 GB <-> 繁体中文 BIG5 编码互换,简/繁体中文 -> 拼音单向转换, 简/繁体中文 <-> UTF8 编码转换,简/繁体中文 -> Unicode单向转换。类源代码原作者是Hessian(solarischan@21cn.com),我合并了一下原来的Sample脚本,同时修改了一下类文件,为类构造函数增加了一个参数以便用户可以方便的在使用的时候设置配置文件路径,这样就可...
jQuery中DOM树操作之复制元素的方法

jQuery中DOM树操作之复制元素的方法

本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下:复制元素前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到复制元素的操作。例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上。实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会。毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何...
jQuery选择器querySelector的使用指南

jQuery选择器querySelector的使用指南

简介HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。复制代码 代码如下:element = document.querySelector("selectors")...
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)

Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)

我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了。如图我们可以很清楚的看到,文字都已经被选中了。那这个用户体验很不好,用起来也不方便。顺便提一下,我们之前加了一个return false;帮我们解决了很多问题,如果去掉这个的话,chrome也会出现一样的问题。那么也就是说这个return false;可以解决chrome ff IE9+ 这些浏览器的问题。实际上在我们开发中,页面上会...
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)

Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)

大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动。那这个问题怎么解决呢? 我们先来看看之前的运动框架function getStyle(obj, name) {if (obj.currentStyle) {return obj.currentStyle[name];} else {return getComputedStyle(obj, null)[name];}}functi...
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)

Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)

今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级。原理和之前的一样,简单吧。html代码:<div id="div2"><div id="div1"></div></div>css代码:<style type="text/css">#div1 {width: 100px;height: 10...
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)

Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)

拖拽的原理: 其实就是鼠标与左上角的距离保持不变。我们来看下图, 这红点就是鼠标。拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性。 那这个距离怎么求呢??鼠标的位置-物体位置的差值就是那个距离 是吧。那这个斜线就是横线和竖线组成的。我们距离看下程序怎么做。<div id="div1"></div>实际上他改的就是某个div 的left top ,那他就动起来了。 那样式中肯定要有绝对定位是吧。<...
使用jQuery实现input数值增量和减量的方法

使用jQuery实现input数值增量和减量的方法

本文实例讲述了使用jQuery实现input数值增量和减量的方法。分享给大家供大家参考。具体分析如下:在很多电商网站中,在购物车所在页面,涉及到商品数量的时候,都会提供一个+号按钮和-号按钮来实现增1和减1,并且只允许input中输入数值。Bootstrap TouchSpin这款插件就是针对此需求而写。(Bootstrap TouchSpin这款插件点击此处本站下载。)首先引入必要的css和js文件。复制代码 代码如下:<link href="bo...
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法

jQuery将所有被选中的checkbox某个属性值连接成字符串的方法

本文实例讲述了jQuery将所有被选中的checkbox某个属性值连接成字符串的方法。分享给大家供大家参考。具体如下:需求:对于一组checkbox,当点击每个checkbox后,把当前处于选中状态的checkbox的某个属性值取出来连接成字符串,并以逗号分开。实现方法:html部分:复制代码 代码如下:<input type="checkbox" id="1"/><label for="1">选项一</label>&l...
限制上传文件大小和格式的jQuery插件实例

限制上传文件大小和格式的jQuery插件实例

本文实例讲述了限制上传文件大小和格式的jQuery插件。分享给大家供大家参考。具体分析如下:在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题。本篇就来写一个"原生态"的jQuery插件,使之能限制上传文件的大小和格式。首先,写一个名称为checkFileTypeAndSize.js的插件。通过判断当前文件的后缀名是否被包含在预先设置所允许的后缀名数...
jQuery统计上传文件大小的方法

jQuery统计上传文件大小的方法

本文实例讲述了jQuery统计上传文件大小的方法。分享给大家供大家参考。具体如下:对于现代浏览器(支持html5)来说,在客户端统计上传文件的大小,可以通过$(selector)[0].files[0].size来实现。但在老版本的IE浏览器中,比如IE7,IE8或IE9,却不支持这种做法,但可以借助ActiveXObject对象来实现。复制代码 代码如下:<input type="file" name="f" id="f" value="上传文件"...
<< 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 >>