js中function $(id)与jquery发生冲突的解决方法

文章2016-02-244,211 人已阅来源：网络
本文章来给大家介绍js中function $(id)与jquery发生冲突的解决方法，有碰到此类问题的朋友可进入参考。

$(id)是js document.getElementById(id)的简写，定义了这个方法以后调用的时候就可以直接用类似于jquery中那样的$("img-icon").onclick简单封装。所以很多人喜欢这样写：

var $ = function(id){
return document.getElementById(id);
};

但是这一类js代码会和与JQuery对象获取函数冲突会与JQuery冲突的，导致JQuery获取不了对象，出现类似于：Uncaught TypeError: Cannot set property 'onclick' of null 这样的错误提示。
安全的写法可以这样

var $id = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

或者：

var $id = function (id) {
return typeof id == "string" ? document.getElementById(id) : id;
};

或者：

function $(id) {
if (typeof jQuery == 'undefined' || (typeof id == 'string' && document.getElementById(id))) {
return document.getElementById(id);
} else if (typeof id == 'object' || !/^w*$/.exec(id) ||
/^(body|div|span|a|input|textarea|button|img|ul|li|ol|table|tr|th|td)$/.exec(id)){
return jQuery(id);
}
return null;
}

相关内容

  • 精选8个菜单导航切换特效代码分享（免费下载）

    菜单导航在一个网站中是至关重要的，它可以直接影响用户的体验，一个有吸引力的导航能够引导用户浏览网站中的更多内容。本篇文章给大家分享8个菜单导航切换特效代码，全部免费，可以点击文...

    精选8个菜单导航切换特效代码分享（免费下载）
  • 你值得了解的JavaScript“继承之jquery”使用方法（代码详解）

    之前的文章《深入解析JS中数组reduce方法（附代码）》中，给大家了解一下JS中数组reduce方法。下面本篇文章给大家了解一下JS-继承之jquery使用方法，小伙伴们可以...

    你值得了解的JavaScript“继承之jquery”使用方法（代码详解）
  • js对象怎么转换jquery对象

    js对象转换jquery对象的方法：1、定义一个js对象，对象名为“jsObj”；2、通过“varjqueryObj=$(jsObj);”方法将js对象转换为jquery对象即...

    js对象怎么转换jquery对象
  • js/jq动态添加Class或者元素，无法添加点击事件

    js/jq动态添加的Class或者元素，有时候绑定事件没有效果。具体解决方法一、可以在标签上加onclick；二、可以使用如下代码来添加<script>$(documen...

  • 为什么css放上面js放下面

    css放上面js放下面的原因：1、在加载html生成DOMtree的时候，可以同时对DOMtree进行渲染，这样可以防止闪跳，白屏或者布局混乱；2、javascript加载后会...

    为什么css放上面js放下面
  • 浅谈jQuery+CSS实现前端网页加载进度条的三种方式

    【推荐教程：CSS视频教程】前端网页加载进度条的实现有三种方式，看自己需求：一、顶部进度条在html代码中间插入jq代码执行动画。页面加载到哪部分，进度条就会相应的向前走多少当...

    浅谈jQuery+CSS实现前端网页加载进度条的三种方式
  • jq如何动态添加动态css样式

    jq动态添加动态css样式的方法：首先准备jquery库文件，并声明一个class样式；然后准备一个事件加载初始化的方法，并直接用匿名函数；接着addClass方法给div元素...

    jq如何动态添加动态css样式
  • js如何修改css

    js修改css的方法：1、使用【obj.style.cssTest】来修改嵌入式的css；2、使用【bj.className】来修改样式表的类名；3、使用更改外联的css文件，...

    js如何修改css
  • js如何改变css样式

    js改变css样式的方法：1、使用cssText方法；2、使用【setProperty()】方法；3、使用css属性对应的style属性。本教程操作环境：windows7系统、...

    js如何改变css样式
  • 如何使用纯CSS、JS实现图片轮播效果

    本篇文章给大家详细介绍一下使用纯CSS、JS实现图片轮播效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。<!DOCTYPEhtml>&l...

    如何使用纯CSS、JS实现图片轮播效果
浏览更多有关 的内容