jQuery技术

JQuery ID选择器中的不能包含特殊字符的处理

字号+ 作者:H5之家 来源:H5之家 2017-11-06 09:15 我要评论( )

最近在开发一个界面时发现了某些特殊情况下ID选择器就会出现无效的情况,查明是ID选择器中的不能包含特殊字符的原因。本文将介绍解决方法。

  问题的起因是动态生成的Dom 元素的ID中包含“=”导致(你可能会问为什么会在ID中有“=”号,我只能说这种情况虽然不多,但是有,比如我的情况,我的ID是某个字符串Base64编码之后的字符串)。

  JQuery中的1.2.6版本至1.3.2版本都有这种情况,下面是测试的代码:

  

view plaincopy to clipboardprint?
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "1/DTD/xhtml1-transitional.dtd"> 
  <html xmlns="" > 
  <head> 
  <title></title> 
  <script src="Javascript/jquery.1.3.2.js" type="text/javascript"></script> 
  <script type="text/javascript"> 
  $(function() {              
  var div = $("#hellodiv=");  
  if (div.length > 0) {  
  alert("获取到了Div");  
  }  
  else {  
  alert("哎呀ID中不能包含=");  
  }  
  var div2 = document.getElementById("hellodiv=");  
  if (div2) {  
  alert("我可以获取到哦");  
  }  
  else {  
  alert("哎呀我也获取不到");  
  }  
  });  
  </script> 
  </head> 
  <body> 
  <div></div> 
  </body> 
  </html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "1/DTD/xhtml1-transitional.dtd">
  <html xmlns="" >
  <head>
  <title></title>
  <script src="Javascript/jquery.1.3.2.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(function() {           
  var div = $("#hellodiv=");
  if (div.length > 0) {
  alert("获取到了Div");
  }
  else {
  alert("哎呀ID中不能包含=");
  }
  var div2 = document.getElementById("hellodiv=");
  if (div2) {
  alert("我可以获取到哦");
  }
  else {
  alert("哎呀我也获取不到");
  }
  });
  </script>
  </head>
  <body>
  <div></div>
  </body>
  </html>查看Jquery的源代码可以看到堆选择器的解析有这么一段:

view plaincopy to clipboardprint?
  var match = quickExpr.exec( selector );  
  
  // Verify a match, and that no context was specified for #id  
  if ( match && (match[1] || !context) ) {  
  
  // HANDLE: $(html) -> $(array)  
  if ( match[1] )  
  selector = jQuery.clean( [ match[1] ], context );  
  
  // HANDLE: $("#id")  
  else {  
  var elem = document.getElementById( match[3] ); 

    var match = quickExpr.exec( selector );

            // Verify a match, and that no context was specified for #id
  if ( match && (match[1] || !context) ) {

                // HANDLE: $(html) -> $(array)
  if ( match[1] )
  selector = jQuery.clean( [ match[1] ], context );

                // HANDLE: $("#id")
  else {
  var elem = document.getElementById( match[3] );其中quickExpr是个正则表达式对象

quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,

  ^#([\w-]+)$是判断ID选择符,很明显只能匹配包括下划线的任何英文字符数字和下划线中划线。

  所以其他的字符如= @等都会出现问题。你解决的办法可以修改JQuery代码中的正则表达式

  如我要添加=号,那么我可以改成quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-\=]+)$/,

  或者避免出现=的ID出现。。随便,本文只是为了大家遇到类似问题时可以快速找到问题。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用jQuery实现两个div中按钮互换位置的实例代码

    使用jQuery实现两个div中按钮互换位置的实例代码

    2017-11-05 17:00

  • jquery属性 用jQuery操作元素的属性与样式

    jquery属性 用jQuery操作元素的属性与样式

    2017-11-05 13:03

  • 舍利子的形成和详解 详解Jquery对象和Dom对象

    舍利子的形成和详解 详解Jquery对象和Dom对象

    2017-11-05 12:01

  • jQuery的区别:$().click()和$(document).on('click','要选择的

    jQuery的区别:$().click()和$(document).on('click','要选择的

    2017-11-05 12:00

网友点评