Uncaught Error:Syntax error,unrecognized expression
昨天开始调试这个异常,开始一直觉得 jquery 版本的问题,然后换了多个版本,都换到最新的版本了,还是一样的出现这个异常,
问题非常蹊跷,一旦我把下面井号换成“/#”这个再正常不过的超链接修改之后,就会出现上面的异常。
<li class="active"><a href="#">Home</a></li> 改成 <li class="active"><a href="/#">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#our-team">Team</a></li>
没办法只能从网上找调试定位的方法,苦于不能读懂jquery的代码,只能用排除法。
首先,jquery多个版本都试过,而且jquery是个标准的js,不可能存在这么明显的错误,所以,错误根源排除jquery。
这个时候仔细看会发现下面还有一个错误发生在main.js:20,就是说main.js的20行代码有问题,这时候确实发现main.js在20行有出现获取href信息的情况,
所以问题就定位到20行,试着把20行前后的函数屏蔽,问题就得到解决了。
附console调试技巧:
<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
<!--显示信息的命令 start-->
console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');
<!--显示信息的命令end-->
<!--占位符 start-->
console.log("%d年%d月%d日",2018,3,27);
<!--占位符 end-->
<!--信息分组 start-->
console.group("第一组信息");
console.log("第一组第一条:我的博客(http://www.ido321.com)");
console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条:程序爱好者QQ群: 259280570");
console.log("第二组第二条:欢迎你加入");
console.groupEnd();
<!--信息分组 end-->
<!--查看对象的信息 start-->
var info = {
blog:"http://blog.junebuy.com",
QQGroup:99597951,
message:"程序爱好者欢迎你的加入"
};
console.dir(info);
<!--查看对象的信息 end-->
</script>
<!--显示某个节点的内容 start-->
<div id="info">
<h3>我的博客:blog.junebuy.com</h3>
<p>程序爱好者:99597951,欢迎你的加入</p>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
<!--显示某个节点的内容 end-->
<!--判断变量是否是真 start-->
<script type="text/javascript">
var result = 0;
console.assert( result );
var year = 2014;
console.assert(year == 2018 );
</script>
<!--判断变量是否是真 end-->
<!--追踪函数的调用轨迹 start-->
<script type="text/javascript">
/*函数是如何被调用的,在其中加入console.trace()方法就可以了*/
function add(a,b){
console.trace();
return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
</script>
<!--追踪函数的调用轨迹 end-->
<!--计时功能 start-->
<script type="text/javascript">
console.time("控制台计时器一");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台计时器一");
</script>
<!--计时功能 end-->
<!--性能分析 start-->
<script type="text/javascript">
function All(){
alert(11);
for(var i=0;i<10;i++){
funcA(1000);
}
funcB(10000);
}
function funcA(count){
for(var i=0;i<count;i++){}
}
function funcB(count){
for(var i=0;i<count;i++){}
}
console.profile('性能分析器');
All();
console.profileEnd();
</script>
<!--性能分析 end-->
</body>
</html>