![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
mole
这个作者很懒,什么都没留下…
展开
-
Google Chrome代码调试(一)——Console的使用
GoogleChrome控制台为开发者提供了网页和应用程序调试的几种方法,本文通过基本操作、控制台API、命令行API来介绍控制台的使用。基本操作1、开启控制台 可以通过下列三种方式开启控制台: a)按下Chrome界面右上方的Chrome代码调试(一)" TITLE="Console的使用——Google Chrome代码调试(一)" />按钮,选择菜单:更多工具原创 2015-01-04 21:55:37 · 5417 阅读 · 0 评论 -
jQuery选择器代码详解(四)——Expr.preFilter
原创文章,转载请注明出处,多谢!Expr.preFilter是tokenize方法中对ATTR、CHILD、PSEUDO三种选择器进行预处理的方法。具体如下:Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1、属性名称解码 * 2、属性值解码 * 3、若判断符为~=,则在属性值两边加原创 2015-02-13 19:58:02 · 1708 阅读 · 0 评论 -
jQuery选择器代码详解(一)——Sizzle方法
对jQuery的Sizzle各方法做了深入分析后,将结果分享给大家。我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法。若需要转载,请写明出处,多谢。/* * @param selector 选择器字符串 * @param context 执行匹配的最初的上下文(即DOM元素)。若context没有赋值,则取document。 * @param res原创 2015-02-12 11:24:00 · 2527 阅读 · 0 评论 -
jQuery选择器代码详解(二)——select方法
select方法是Sizzle选择器包的核心方法之一,其主要完成下列任务:1、调用tokenize方法完成对选择器的解析2、对于没有初始集合(即seed没有赋值)且是单一块选择器(即选择器字符串中没有逗号), 完成下列事项: 1) 对于首选择器是ID类型且context是document的,则直接获取对象替代传入的context对象 2) 若选择器是单一选择器,且是id、class、tag类型的,则直接获取并返回匹配的DOM元素 3) 获取最后一个id、class、ta原创 2015-02-12 14:55:39 · 1822 阅读 · 1 评论 -
jQuery选择器代码详解(五)——实例说明tokenize的解析过程
原创文章,转载请写明出处,多谢!以下分析基于jQuery-1.10.2.js版本。下面将以$("div:not(.class:contain('span')):eq(3)")为例,说明tokenize和preFilter各段代码是如何协调完成解析的。若想了解tokenize方法和preFilter类的每行代码的详细解释,请参看如下两篇文章:jQuery选择器代码详解(三)——token原创 2015-02-14 00:04:49 · 1638 阅读 · 0 评论 -
jQuery选择器代码详解(六)——Sizzle选择器匹配逻辑分析
近期看了一些网上关于Sizzle的分析文章,就匹配次序往往就说使用了从右到左的逆向匹配法,但是具体如何并没有详细介绍,或者就像我之前的几篇文章一样,就代码一行一行做详细介绍,但缺乏整体概念,这里就jQuery-1.10.2版本的Sizzle的匹配逻辑(预编译结果)做一整体说明,这里就不谈过多的细节了。Sizzle的匹配过程采用的是以从右到左的逆向匹配法为基础的改进版本,因为HTML的搜索毕竟和原创 2015-02-25 11:16:15 · 1373 阅读 · 1 评论 -
jQuery选择器代码详解(七)——elementMatcher函数
要读懂Sizzle的Compile执行过程,首先需要弄清楚涉及的各个子程序的功能和关键变量和作用,我将逐一对jQuery-1.10.2版本的Compile代码进行说明,望能给予大家帮助。elementMatcher(matchers)1、源码function elementMatcher(matchers) { return matchers.length > 1 ? funct原创 2015-02-26 19:15:53 · 1305 阅读 · 0 评论 -
jQuery选择器代码详解(八)——addCombinator函数
function addCombinator(matcher, combinator, base)1、源码function addCombinator(matcher, combinator, base) { var dir = combinator.dir, checkNonElements = base && dir === "parentNode", doneName =原创 2015-02-26 20:05:22 · 1324 阅读 · 0 评论 -
如何用jQuery将辅助信息合并到二进制文件里一起上传到WCF
在上传文件的时候,往往需要传递当前用户的一些其它的辅助信息,在此提供一个将这些辅助信息合并入二进制文件中一起上传的方法。下面代码将选中文件上传的同时,将传送会话Id、文件后缀、文件类型三个参数。整个合并后的二进制流分成三部分,如下图。第一段用1个字节表示辅助信息的长度,当然,若第二段比较长,则可以用双字节来表示;第二段是辅助信息,这里用json格式的字符串转换成ASCII码数组来表示;第三段为选中文件的实际内容。原创 2015-04-21 21:44:25 · 844 阅读 · 0 评论 -
Javascript如何将中文转换UTF16和UTF8字节数组
之前因为项目的需要,需要把带有中文的字符串转换成字节数组和图片数据合并后,以二进制数据上传给服务器端。之前,看到网上有利用Array.prototype.map.call(str, function (c) { return c.charCodeAt(0); })方法将字符串转换成字节数组,但实测结果表明该方式实现了下列功能:1、若字符是单字节字符,则用一个小于128的数值来表示。2、原创 2015-04-29 16:25:01 · 6250 阅读 · 1 评论 -
动态添加的HTML的自动渲染
这两天在写一个用EasyUI的前台,遇到动态向Layout添加HTML内容时没有自动渲染的问题,查了一下网上的资料后得以解决,具体如下:$("#content").html(data);$.parser.parse("#content");其中,#content 是 layout 的 Id ,data 是向#content容器中添加的HTML代码。第一行代码作用是将 Id 是#con原创 2015-07-08 15:21:26 · 6417 阅读 · 1 评论 -
jQuery选择器代码详解(三)——tokenize方法
原创文章,转载请注明出处,多谢!/* * @param selector 待解析的选择器字符串 * @param parseOnly 为true时,说明本次调用是匹配子选择器 * 举个例子:若初始选择器为"div:not(.class:not(:eq(4))):eq(3)" * 代码首先匹配出TAG选择器div, * 之后匹配出的pseudo选择器字符串是原创 2015-02-12 21:02:01 · 1846 阅读 · 1 评论 -
详解jQuery选择器正则表达式
1、空白whitespace = "[\\x20\\t\\r\\n\\f]",在字符串中,斜杠是用于转义的,若想输出斜杠,必须采用双斜杠来表示。上述字符串若直接用正则表达式对象来表示,如下:whitespace = /[\x20\t\r\n\f]/,之所以将五种字符定义为空白,出此CSS3标准,其原话:Only the characters "space" (U+002原创 2015-02-02 18:26:45 · 6616 阅读 · 0 评论 -
正则表达式执行exec方法的问题
在使用正则表达式执行exec方法分解选择器属性值时,发现有些节点能正常获取数据,有些执行后获得是null,经过排查,发现是正则表达式中后面加了一个g的缘故。因为对于不带g的正则表达式对象RegExp来说,每次执行都是从传入字符串的头部开始查找符合规则的项,但是对于带g的全局正则表达式来说,第二次执行(传入的字符串不变)是在第一次执行的基础上继续获取后续符合条件的项,若获取不到,则返回null。因此原创 2015-01-24 11:36:45 · 1026 阅读 · 0 评论 -
如何将JSON字符串转换成JavaScript元素
可以使用JSON.parse函数将JSON格式的数据转换成JavaScript元素。下面按定义、参数说明、举例、其它四部分来说明JSON.parse的具体用法和效果。定义: JSON.parse ( text [ ,reviver] ) 将JSON字符串转换成Javascript元素(通常是对象或数组)。参数: text 必需。待转换的有效JSON字符串。 reviver 可选。控制转换结果的函数(reviv原创 2015-01-04 21:55:31 · 769 阅读 · 0 评论 -
Javascript创建对象的几种方法
创建对象的几种方法1. 利用json创建对象 var company = {}; company.name= '华为'; company.address = '北京'; company.produce = function(message) { alert(message); }2.使用JavaScript中的Object类型转载 2015-01-04 21:54:32 · 435 阅读 · 0 评论 -
如何将div高度填满剩余高度
下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度<div id="body"> <div id="navbar"></div> <div id="content"></div></div>css如下:html,body { padding: 0px; margin: 0px; heig原创 2015-01-04 21:55:26 · 5654 阅读 · 0 评论 -
Javascript自定义数组排序方式
对于Javascript的数组函数sort(),默认的排序方式是根据字母先后顺序排序。若需要根据自己定义的规则来排序,则需要将一个排序函数作为参数传递给sort函数。该自定义函数需要有两个参数,若希望第一个参数排在第二个参数前面,则自定义函数返回小于0的数字;若希望第一个参数排在第二个参数后面,则自定义函数返回大于0的数字;如果返回0,则表示两个参数一样大。例如,想以数字的大小来排序:原创 2015-01-04 21:54:35 · 1327 阅读 · 0 评论 -
Javascript返回多个值的应用
Javascript可以方便的返回多个值,对实际应用非常方便,其具体方式有两种,具体如下:第一种:以索引编号方式返回多个值函数定义如下:function getViewPort1(){ return[ document.body.clientWidth, document.body.clientHeight ];}以上述方式返回值时,原创 2015-01-04 21:54:09 · 535 阅读 · 0 评论 -
关于jQuery的isFunction函数定义
今天在看jQuery源码的时候,发现一个非常有趣的问题,isFunction函数是通过extend函数添加到jQuery.fn中的,但是在extend函数定义中,确引用了isFunction方法,初看一下感觉有点问题,但是,实际上在现实运行过程中几乎不会出错。我们先来看一下源代码:jQuery.extend = jQuery.fn.extend = function() { var tar原创 2015-01-10 21:59:52 · 1625 阅读 · 1 评论 -
判断是否是数值的几种不同方式的效率比较
今天针对不同的数值判定方式在chrome上做了一个效率的对比,结果如下:注意:通过正则表达式仅能用于字符串中的内容是否是纯数值,而不能用于判断是否是数值对象。放在此处仅用于对比。其代码如下: var ret; var o = 1; var pattern = /^(-?\d*.?\d*)$/; var toStr = {}.toString; var arra原创 2015-01-12 14:03:05 · 760 阅读 · 0 评论 -
判断是否是数组的几种不同方式的效率比较
今天针对不同的数组判定方式在chrome上做了一个效率的对比,结果如下:其代码如下: var ret; var o = [1,2,3]; var toStr = {}.toString; var array = {}; array["[object Array]"] = "array"; console.log("各种判断是否数组的速度比较!")原创 2015-01-12 13:57:09 · 526 阅读 · 0 评论 -
DOM元素的childNodes和children的区别
对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象。具体看一下针对children和childNodes在chrome环境下的测试:原创 2015-01-19 15:17:20 · 1846 阅读 · 0 评论 -
JavaScript如何创建dictionary对象
对于JavaScript来说,其自身的Array对象仅仅是个数组,无法提供通过关键字来获取保存的数据,jQuery源码中提供了一种非常好的方式来解决这个问题,先看一下源码:function createCache() { var keys = []; function cache(key, value) { // Use (key + " ") to avoid collision原创 2015-02-16 22:27:30 · 1208 阅读 · 0 评论 -
DOM的OffsetX、ClientX和ScrollX
点击 内部div的各层宽度如上图。var b = document.getElementById('b');console.log ('b.offsetLeft=' + b.offsetLeft) // 13console.log ('b.clientLeft=' + b.clientLeft) // 5console.log ('b.scrollLeft=' + b.scr原创 2017-09-17 22:08:13 · 1602 阅读 · 0 评论