javascript尚学堂百战程序员json解析html jquery

HTMLjQuery1课程介绍课程大纲1.jQuery概述 1.1前端工程师的工作 1.2jQuery简介 1.3整体感知2.$()函数 2.1size()方法和length属性 2.2jQuery全面支持css2.1的选择器 2.3jQuery全面支持css3的选择器 2.4jQuery自己发明的伪类 2.5$()函数和jQuery函数等价 2.6$()函数得到的是jQuery对象 2.7关于引号1.jQuery概述1.1前端工程师的工作1.2jQuery简介1.3整体感知1.1前端工程师的工作

菜鸟级：设计图的还原，就是根据PSD文件，写HTML+CSS。

入门级：加页面特效。轮播图、菜单、选项卡、无缝滚动等等。 HTML5+CSS3炫酷页面，手机端页面。 Canvas游戏。 jQuery是页面特效的完美解决方案。 普通级：碰到了数据，拿到了后台工程师的数据，组件页面，Ajax。 高端级：自己写服务，自己写后台，Node.js。 大神级：前端架构师，MVC，路由控制，后台协作。Angular、设计模式等等。 也就是说，一个前端开发工程师的成长之路，一定要制作页面特效。而jQuery就是制作页面特效的时候大家都比较青睐的一种解决方案。说白了，未来几天的工作是是：

写特效！！！！！！ 特效是什么？ 特技？ Duang？ 成龙？

个人理解：特效就是【页面元素能够根据人的动作，而产生交互的变化】。 从技术角度考虑：

给元素加监听 document.getElementById(“box”).onclick=function(){} 改变元素的CSS样式 box.style.backgroundColor=“red” 改变元素的类 box.className=“haha” 改变元素的属性 img.src=“1.jpg” 动画 setInterval但是上面的这些技术在原生JS中实现的时候，会出现很多问题：

(1)书写麻烦，我们必须重复书写getElementsBy等方法来得到元素；(2)操作不是批量的，我们必须书写for()循环语句来批量控制元素。(3)存在兼容性问题。(4)运动非常复杂，需要使用setInterval()使元素动起来。(5)操作类名、属性也不方便。而jQuery就彻底解决了上面所有的问题！

因此我们为了更快、更好、更容易的写出更多、更美观、更高大上的页面特效，我们要来学习使用jQuery。1.2jQuery简介官网：logo:口号：writeless,domore.写更少的代码，做更多的事情。简介：jQueryisafast,small,andfeature-richJavaScriptlibrary. ItmakesthingslikeHTMLdocumenttraversalandmanipulation, eventhandling,animation,andAjaxmuchsimplerwithan easy-to-useAPIthatworksacrossamultitudeofbrowsers.本质：jQuery是一个快速、简洁的JavaScript框架， 是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）

jQuery有三条产品线：jQuery1.x.x:兼容IE6、7、8，花了很大的气力让IE6、7、8等低级浏览器都兼容。jQuery2.x.x:不兼容IE6、7、8，从1代中剔除了所有兼容代码。jQuery3.x.x:全面支持HTML5和CSS3。创始人JohnResig：用了jQuery，妈妈再也不用担心我写不好JS了！1.3整体感知

首先我们使用jQuery的时候，必须要先引包（和我们之前自己封装的xxx.js一样）： <scripttype="text/javascript"src="jquery-1.12.3.min.js"></script> <scripttype="text/javascript"> //自己的代码 </script>

当然，我们也可以把jQuery的声明语句写在head标签当中。 另外，jQuery的引入我们还可以采用CDN的方式来进行引入。

ps：以上引入jQuery的方式作用都是相同的，都是为了将库文件添加至我们的工程当中。而jQuery的行文习惯，也颠覆了我们之前对于js中DOM开发的认知。

jQuery有非常便利的选择元素的能力，用一个$()函数就能够搜寻页面上的元素。 所以它十分擅长查找元素，连名字都叫做jQuery（query：查询）。那么jQuery的操作过程是什么样的呢？

(1)jQuery操作页面元素一定是从一个$()开始的！ (2)$()函数里面有引号，引号里面写CSS选择器。

(3)然后加上jQuery自己的方法（不能使用js原生的方法。） 我们先学习下面这条语句： $("#box").css("background-color","red"); 这行语句的作用是：将页面上的id为box的盒子的背景颜色变为红色。jQuery课程十分简单：第一步：学习怎么选择元素?使用$()函数选择元素第二步：学习选择元素之后能干吗？比如.css().animate().addClass().html()第三步：综合特效今天我们的任务是走完第一步，然后给第二步开个头。2.$()函数2.1size()方法和length属性2.2jQuery全面支持css2.1的选择器2.3jQuery全面支持css3的选择器2.4jQuery自己发明的伪类2.5$()函数和jQuery函数等价2.6$()函数得到的是jQuery对象2.7关于引号2.1size()方法和length属性

前面提到过$()在选择元素的时候是批量的，因此jq提供了一个机制来访问获得元素的数量。这个机制就是size()方法和length属性。

var$div=$("div").size()

var$div=$("div").length

两种方法都能够获取通过$()函数得到的页面元素的个数。2.2jQuery全面支持css2.1的选择器

前面提到过$()在选择元素的时候括号中先写引号，在引号中写css选择器。 而这里提到的选择器可以是id选择器、类选择器、标签选择器、包含选择器等css2.1中提到的任意的选择器组合。 例如：

$("div.box#span1").animate({"font-size":400},1000);

我们在函数参数里传入了一个字符串，而$()函数在内部会采用正则表达式来解析我们的字符串。最终在页面中寻找符合条件的所有的元素。 2.3jQuery全面支持css3的选择器

对于css3选择器的支持，简单来说就是对像属性选择器、关系选择器等在css3中被提出的选择器的支持。可以直接在$()函数中使用他们。 例如：

$("span[frank=123]").css("background-color","red");

ps：css3选择器最大的问题实际上是浏览器的兼容性问题，但是使用jq则没有兼容性问题。2.4jQuery自己发明的【伪类】

其实这里我个人觉得更精准的说法应该是jq自己发明的【筛选器】。因为他们的作用是能够从指定元素集合中【筛选】出想要的元素。

jq中自创的筛选器有七种：

选择器:first 选中指定元素集合中的第一个元素 选择器:last 选中指定元素集合中的最后一个元素 选择器:eq(n) 选中指定元素集合中从0开始，第n个元素 选择器:lt(n) 选中指定元素集合中从0开始，第n个元素之前的所有元素 选择器:gt(n) 选中指定元素集合中从0开始，第n个元素之后的所有元素 选择器:odd 选中指定元素集合中从0开始，所有奇数序号的元素 选择器:even 选中指定元素集合中从0开始，所有偶数序号的元素 下面我们通过案例来说明他们的语法和作用。

<p></p> <p></p> <p></p> <p></p> <p></p> <scripttype="text/javascript"src="jquery-1.12.3.min.js"></script> <scripttype="text/javascript"> $("p").css("background-color","red"); //$("p:first").css("background-color","red"); //$("p:last").css("background-color","red"); //$("p:eq(2)").css("background-color","red"); //$("p:lt(2)").css("background-color","red"); //$("p:gt(2)").css("background-color","red");

//$("p:odd").css("background-color","red"); //$("p:even").css("background-color","red"); </script>分别展开每一个注释，查看筛选器的效果特别的对于筛选器:eq(n)来说，还可以将这个筛选器提炼为一个方法来使用。例如：

$("p").eq(2).css("background-color","red"); 完全等价于： $("p:eq(2)").css("background-color","red");ps：既然筛选器:eq(n)能提炼成方法来使用，那么其他筛选器能不能呢？2.5$()函数和jQuery()函数等价

事实上在jq中做出了一个声明，这个声明就是$==jQuery。 也就是说

$()和jQuery()这两种写法是等价的。

$("p:eq(2)").css("background-color","red"); 等价于 jQuery("p:eq(2)").css("background-color","red");

ps：$()函数并不是jq所独有的一个函数，在很多其他框架例如prototype框架中也对$()函数做 出了声明。根据js语法，同名函数后声明的会覆盖前面的。 因此在工程中如果引入了多个框架，那么使用jQuery()这种写法是最保险的。 但是如果仅对于jq框架来说，这两种写法就是等价的。2.6$()函数得到的是jQuery对象

js中规定函数都会有一个执行结果，或者说是返回值。

jq是使用js封装的一个框架，因此$()函数也不例外。

jq中规定$()函数返回的是一个jq对象

例如：

var$p=$("p")；//此处$p就是一个jq对象(集合)

对于jq对象来说我们需要知道的内容有：

(1)jq对象仅能够调用jq中设定的属性和方法，对于原生js的属性和方法都无法调用

(2)jq对象可以在必要的时候转换为js原生对象。

a)jq对象可以通过【jq