经常看见有些后端程序员童鞋抱怨前端不好做,我就写一个来分享一下。虽然网上很多了,但为了坚持每天写博客,我还是写一个,无奈我也是业余的,文笔不高,技术不行,路过的权当笑话。此文仅针对一些初用jQuery的朋友,在使用的时候需要注意的东西。

    虽然偶尔也会听到有“大牛”说JQ就是垃圾,用JQ怎么怎么地,猪哥不是大牛,做的项目也不多,但我相信,JQ是一个牛逼的作品,虽然他确实很臃肿,但它也确实让我的工作轻松了很多,如同语言之争一样,就算是草泥马他也有他的价值,至少我们看到他的时候会哈哈一笑。JQ在企业网站建设中可以极大简化我们的开发流程,各种焦点图,各种切换,各种tab,都离不开他。所以,能让我们边喝茶边做东西的才是好东西。

    哈哈,吐槽结束,开始正文。

1、与原生JS的区别

    很多没接触过JS或者一知半解的亲都把JS和jQ看作两个东西,其实jQ就是一个js库,注意是库不是框架,它封装了很多东西,但不能直接来解决你的业务逻辑,所以它是库。

jQ用原生JS封装了很多强大的方法,极大简化了我们的前端开发,尤其是在现在这个快节奏加二笔领导横行的年代,我们更需要“速度”。JQ是js,但它也有一些和原生js不一样的地方。

(1)获取对象方法不同

js获取对象是这样的

document.getElementById("abc") 
JQ获取对象是这样的:
$(tag);//可以是#id、.class和tagname 
    js获得的是DOM树的对象,不能使用jq对象的各种方法。经常会看到有很多朋友混搭,其实猪哥不建议这样,或许原生的要更绿色一些,但在现在的计算机配置下,那一点点的性能消耗是完全可以忽略的,相反统一的风格跟更能让你的开发变得清晰整洁。

(2)属性设置、获取方法不一样

js中设置一个元素的属性是jsdom.属性名称="值";(基本是这样)

jq中设置一个元素的属性是jq.操作方法('值');

举个例子:

//js设置元素内容
jsdom.innerHTML='我爱猪哥';
//jQ设置元素内容
jq.html('我爱猪哥');

//js表单元素赋值
jsinput.value='我爱猪哥';
//jQ表单元素赋值
jqinput.val('我爱猪哥');

//JS修改样式
jsdom.style.fontSize='12';
jsdom.className='lovezhuge';
//jQ修改样式
jQ.css('font-size',12);
jq.addClass('lovezhuge');
2、其他使用注意事项

(1)选择器冲突

如果在使用中发现选择器和现有js有冲突而又无法避免时,可以在头前做如下声明,

var jq= jQuery.noConflict(); //声明后$符号用jq代替

(2)tag如何写

    这块需要亲们有一定前端基础,html里一个标签有标签名、ID和class,其中ID是唯一的,class可以重复,相应的我们在选择器里就可以用$(标签名)、$('#id')和$('.class')来选择元素,其中只有id选择是选择单一对象,其他的都是以数组形式存储(这块只需知道即可,JS里的数组和其他的数组不一样)。
子对象选择大家参考手册里即可,这里不做赘述。但要注意$('.tag :hidden')和$('.tag:hidden')选择到的是不一样的。一个是选择子元素,一个是选择class=tag元素集合里的被隐藏掉的元素。

(3)css()和height()、width()

css设置\获取元素具体样式值的方法,如下:

$("p").css("color","red");//单个属性的设置
$("p").css({fontSize:"16px", color:"#ccc"}); //多属性设置
//多属性设置中如果属性带有"-"符号,例如font-size、background-color等属性,
就要用驼峰式写法如上面的fontSize

css()方法是设置样式值,而addClass(),removeClass()则是设置元素的class属性。

css()方法中获取到的height值是你定义的样式,而height()\width()获取到的是元素经过浏览器解析以后的实际值,于设置的样式值无直接关系。

(4)事件绑定

    我们经常会需要对某个区域的未添加元素进行预事件绑定,这就需要用到$.live()方法,他可以对未添加的元素进行预处理,绑定需要的事件动作。

------------------------------------------

    先写到这里吧,这篇文章写的很粗糙,主要是现在快12点了,我写不下去了。当然,这篇文章不是教你怎么用JQ,只是告诉你在使用中需要注意的一些东西。具体怎么用,网上已经很多了。就不再赘述。文中或许有不对的地方,哈哈,我就不开放评论,你喷不到我。