jQuery——前端框架(jquery.js、node.js、argus.js)
它是一个快速的js库,对js进行了封装,用来更方便的处理HTML、event、dom以及动画效果。
一、首先需要知道两个概念:jQ对象&DOM对象
第一个——jQ对象:通过jQ包装DOM对象后产生的对象,jQ对象无法使用DOM对象的任何方法,他有自己的方法。
第二个——DOM对象:(document object model)每个DOM都可以表示成一棵树。
js:var 变量 = dom对象
jq:var $变量名 = jq对象
记住:只有jq对象才能调用jq中的方法。
二、然后,需要知道jQ的代码风格
第一个:链式操作风格
1、对于同一个对象的较多操作,每一行写一个操作。
2、对于同一个对象的少于三个操作,可以写到一行。
3、对于多个对象的少量操作,可以每个对象写一行,有子元素的,缩进写上。
第二个:为代码添加注释
三、接下来,要知道jQ对象和DOM对象的互转
1、jQ对象转成DOM对象
jQ对象类似一个数组对象,可以通过[index]得到相应的DOM对象。
var $jq = $("div");
var dom = $jq[0];
也可以通过get(index)方法得到相应的DOM对象。
var $jq = $("div");
var dom = $jq.get(0);
2、DOM对象转成jQ对象
只需要包DOM对象包装起来。
var dom = document.getElementById("div");
var $jq = $(dom);
四、额外知识,如何解决jQ和其它库的冲突?
第一个:可以在其它库导入之后导入jQ库。
jQuery.noConflict();//将变量$的控制权移交给其它js库
第二个:在其它库之前导入jQ库。
直接使用$()作为其它库的快捷方式
五、jq核心语法结构
$(“选择器”).方法名();——对象.方法名() 方法名中调用一个方法或者事件
这是jq的工厂函数,将dom对象变为一个jq对象
选择器:可以选择到HTML中的任意元素(标签)
掌握了以上基础知识,就可以开始书写舒服的jQ代码了!