原生缺点:

1. JS的出现使得网页与用户之间实现了一种实时/动态/交互的关系,网页可以包含更多活跃的元素和精彩的内容

2. JS的弊端在于复杂的DOM对象,而JQuery封装了很多预定义的对象和使用函数简化了DOM操作,使得我们可以快速创建有高难度交互的富客户端页面,且兼容各大浏览器


简单介绍:

1. JQuery是一个优秀的JavaScript库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性和链式操作等功能,目前团队主要推核心库(JQuery)/UI(JQuery UI)/移动端(JQuery Mobile)


小试牛刀:

说明: 官网下载最新版,.min.js结尾的表示压缩版,自己开发学习可以使用未压缩版,需要明确的是在JQuery库环境下$就是JQuery简写形式,其实两个是等价的,以后开发中更多用的当然是$符号了~

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>前端开发</title></head><body><scripttype="text/javascript"src="js/jquery-3.1.1.min.js"></script><scripttype="text/javascript">//常规写法$(document).ready(function(){alert('HelloWord!')})//简写方式$(function(){alert('HelloWord!')})</script></body></html>

说明: 如上代码的$(document).ready(function(){})其实类似于传统JS中的window.onload方法,但是不同点一是前者只要等待DOM结构绘制完毕后执行,可能DOM元素关联的东西还没有加载完,而后者是必须等待所有的东西加载完毕才能执行,不同点二是前者支持同时编写多个,而后者编写多个就无法正确执行,不同点三是前者还支持简化写法$(function(){})


小小项目:

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>前端开发</title><styletype="text/css">#menu{width:300px;}.sub_menu{color:#ffffff;cursor:pointer;background-color:#555555;}div{padding:0;margin:1px0;}diva{background:#888888;display:none;float:left;width:300px;}.highlight{color:#ffffff;background-color:green;}</style></head><divid="menu"><divclass="sub_menu"><span>第1章-认识JQuery</span><ahref="">1.1-Javascript和Javascript库</a><ahref="">1.2-加入JQuery</a><ahref="">1.3-编写简单JQuery代码</a><ahref="">1.4-JQuery对象和DOM对象</a><ahref="">1.5-解决JQuery和其它库的冲突</a><ahref="">1.6-JQuery开发工具和插件</a></div><divclass="sub_menu"><span>第2章-JQuery选择器</span><ahref="">2.1-JQuery选择器是什么</a><ahref="">2.2-JQuery选择器的优势</a><ahref="">2.3-JQuery选择器</a><ahref="">2.4-应用JQuery改写示例</a><ahref="">2.5-选择器中的一些注意事项</a><ahref="">2.6-类似淘宝品牌列表的效果</a><ahref="">2.7-还有其它选择器吗?</a></div><divclass="sub_menu"><span>第3章-JQuery中的DOM操作</span><ahref="">3.1-DOM操作的分类</a><ahref="">3.2-JQuery中的DOM操作</a><ahref="">3.3-某网站超链接和图片提示效果</a></div></div><body><scripttype="text/javascript"src="js/jquery-3.1.1.min.js"></script><scripttype="text/javascript">$('.sub_menu').click(function(){//对点击的对象添加highlight类$(this).addClass('highlight').children('a').show()//重新定位到上次操作的节点.end().siblings().removeClass('highlight').children('a').hide()})</script></body></html>

说明: 如上代码简单实现了一个手风琴的效果, 通过$('.sub_menu')定位到class属性包含.sub_menu的元素,并给其绑定一个click事件,回调函数内部$(this)其实就是触发回调函数的源对象,当点击时先通过.addClass('highlight').children('a').show()展开自己的子元素,然后通过.end()重新定位到上次操作的节点$(this),然后通过.siblings()..removeClass('highlight') .children('a').hide()让其它兄弟元素不高亮且子元素隐藏.


两种对象:

1. DOM对象是文档原生对象模型,只能通过原生的方法对其添加/删除/查询/修改,不能使用JQuery对象下的任何方法

2. JQuery对象是基于DOM对象封装的对象,可以通过JQuery特有的方法对齐添加/删除/查询/修改,不能使用DOM对象下的任何方法.

3. DOM对象变量声明常定义为var xm = 10,JQuery对象变量声明常定义为var $xm = 10,这个是约定俗称的规定.

4. DOM对象可以通过$()转换为JQuery对象,从此遍可以使用JQuery对象的方法,反之JQuery对象也可以通过[]或get()转换为DOM原生对象,从此便可使用DOM对象的方法

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>前端开发</title></head><body><divid="container">asdasdas</div><scripttype="text/javascript"src="js/jquery-3.1.1.min.js"></script><scripttype="text/javascript">//将JQuery对象转换为DOM对象var$div=$('#container')vardiv=$div[0]console.log(div)vardiv=$div.get(0)//将DOM对象转换为JQuery对象vardiv=document.getElementById('container')var$div=$(div)console.log($div)</script></body></html>