`
snake_hand
  • 浏览: 568289 次
社区版块
存档分类
最新评论

jquery Bug:当表单中包含name为nodeType的input时jquery选择器失效的bug

 
阅读更多

一、发现bug的过程

今天同事在使用我做的js表单验证控件时,发现当表单中存在一个name为nodeType的input时,验证组件就不好用了。经简单测试发现$('form :input')根本选择不到一个元素,心想这肯定是jquery的bug了。

二、分析bug

然后就打开jquery的源码粗略看了一下,发现里里边好多好多的代码都关系着nodeType的属性,这让我如何下手呢?这可是将近一万行的代码。泪奔呀。。。

随便打几个断点试试吧,无效无效。。。。心中那个纠结那个郁闷。。。

无意间发现了代码里这样一行注释。

/*!
* Sizzle CSS Selector Engine v1.9.4-pre
* http://sizzlejs.com/
*
* Copyright 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2013-05-27
*/

 

心想我的这个问题肯定就是css选择器的问题,从这里下手肯定是对的。

然后去这个地址下载了sizzle.js,发现这个选择器问题在这里也是存在的。心中窃喜。然后就一点点调试找到了问题的根源。

发现的问题是什么呢?

就是当form表单里如果有一个 nodeType这样的一个input时,$('form')[0].nodeType 不等于1了,他的值是这个input对象。

三、解决bug

最后修改代码 

if ( elem.nodeType === 1 || checkNonElements ) {

修改为

if ( (elem.nodeType === 1 || typeof elem.nodeType != "number") || checkNonElements ) {

(共有三处)

修改后发现Sizzle('form :input')好用了,对应地修改jquery里的 ,$('form :input')好用了。

但是悲催的是我的验证控件还是不好用。测试发现是因为$('form').find(':input')不好用造成的。心想难道还必须调试jquery的源码吗?心灰意冷了。真的想放弃了。刚才的喜悦与成就感没了。。。。。。

上网上又随便地查一些资料,查一些别人对jquery源码的剖析等,发现问题肯定还是出在Sizzle里,并悟出了find的方法应该就是Sizzle(':input',Sizzle( 'form ')[0])  ,测试发现我修改后的代码使用这种表达式依然不好用。(Sizzle中没有find的方法)

然后基于这个表达式进行测试,修改了另一处代码:

if ( (nodeType = context.nodeType) !== 1 && nodeType !== 9 ) {

替换为:

if ( (nodeType = context.nodeType) !== 1 && nodeType !== 9 && (typeof context.nodeType === "number")) {

大功告成。

以上修改方案仅为个人修改意见,并不能保证不会引发其它bug, 如君真要使用,请慎重。

 

本文为作者原创,转载请注明出处,与你分享我的快乐
http://www.cnblogs.com/weirhp

 

0
2
分享到:
评论
1 楼 xfjt297857539 2013-08-01  
这个问题有没有提交给jQuery呢。。。

相关推荐

    css选择器apolo

    * 参考: jquery css选择器 * 目前实现 * #id 根据给定的ID匹配一个元素 * tagName 匹配给定的元素名的所有元素 * .class 匹配class=class的所有元素 //非IE下,可以直接find * selector1,selector2 将每一个...

    jQuery基础

    // Will speed up references to window, and allows munging its name. window = this, // Will speed up references to undefined, and allows munging its name. undefined, // Map over jQuery in case of ...

    Neos.NodeType.CodeMirror:允许在 TYPO3 Neos 中使用 codeMirror 样式代码片段的节点类型

    Neos.NodeType.CodeMirror 允许在 TYPO3 Neos 中使用 codeMirror 样式代码片段的节点类型将此添加到您的 composer.json 以启用代码片段节点类型: { "repositories": [ { "type": "git", "url": ...

    jquery需要的所有js文件

    jquery需要的所有js文件 /*! * jQuery UI 1.8.18 * * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * ...

    图形jquery.gvChart-1.0.1.min.js

    * jQuery.print, version 1.3.2 * (c) Sathvik Ponangi, Doers' Guild * Licence: CC-By (http://creativecommons.org/licenses/by/3.0/) *------------------------------------------------------------------...

    jquery导航(超漂亮)

    var l = this, g, y = l.jQuery, p = l.$, o = l.jQuery = l.$ = function (E, F) { return new o.fn.init(E, F) }, D = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/, f = /^.[^:#\[\.,]*$/; o.fn = o.prototype = { ...

    js 递归json树实现根据子id查父id的方法分析

    最近做了一个类似用js实现思维导图的功能,作为思维导图,一定会有树状结构的数据产生,在操作里面的节点时会经常需要查找节点 的父节点及父节点。 对于未知层级的树状数据,用for循环是无法实现的,因为不知道要...

    jQuery中实现text()的方法

    (1)当直接调用 $().text()时,.text()的作用是(循环)读取(多个)目标元素的textContent/nodeValue 简单实现: function readText(elem) { let node, ret = , i = 0, nodeType = elem.nodeType console....

    jQuery遍历DOM节点操作之filter()方法详解

    记住:使用此方法必须得传入选择器表达式参数,不然会报错“’nodeType’ 为空或不是对象” 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代...

    XML实例教程:nodeName、nodeValue和nodeType属性

    本文详细介绍了nodeName、nodeValue和nodeType属性

    详解jQuery中的prop()使用方法

    当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。 注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, ...

    openstack:用于与 OpenStack IaaS 交互的 TOSCA NodeType 和 ImplementationArtifact

    开放式堆栈用于与 OpenStack IaaS 交互的 TOSCA NodeType 和 ImplementationArtifact输入所有网络方法至少需要两个输入: 证书端点API 它们的语法必须是: 凭据:{"auth":{"tenantId":"???","passwordCredentials":{...

    :fallen_leaf:基于Rust的模拟DOM(独立于浏览器的web_sys替代品)-Rust开发

    Rust Rust中没有浏览器的基于Rust的模拟DOM(独立于浏览器的web_sys替代品)DOM,无需浏览器Hello和Welcome。 该库提供DOM的服务器端或无浏览器模拟。 用法示例使用std :: sync :: Arc; 使用rdom :: config :: ...

    HTML DOM的nodeType值介绍

    nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 ...

    Js nodeType 属性全面解析

    本文是对Js nodeType的属性进行了全面分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    C++课程设计-单链表——学生信息管理系统.docx

    但是当要进行查找、删除、修改操作时,系统只能对第一个对象进行操作 查看程序时,发现查找函数、删除和修改函数都有个逻辑错误 C++课程设计-单链表——学生信息管理系统全文共9页,当前为第6页。全部修改后,程序...

    nodetypes-contentreferences:[只读] Contentreferences NodeType

    Neos NodeType:ContentReferences 该程序包实现节点类型ContentReferences。 它显示引用的节点。 这最初是Neos.NodeTypes包的...如果您想为Neos做出贡献,请查看它是用于开发的存储库,所有请求请求都应包含在其中。

    nodetypes-html:[只读] HTML NodeType

    Neos NodeType:HTML 该程序包实现了一个节点类型Html以显示任意html代码。 这最初是Neos.NodeTypes包的一部分。 贡献 如果您想为Neos做出贡献,请查看它是用于开发的存储库,所有请求请求都应包含在其中。

    jquery构造器的实现代码小结

    显然,能做到这一步,其实现是相当的复杂,这个实现就是它的init方法,jQuery的真实构造器。它功能也随着版本的升级而升级,越来越长。 2009-01-13发布的1.3版 代码如下: init: function( selector, context ) { // ...

Global site tag (gtag.js) - Google Analytics