Javascript类库作用以及对比

1. Prototype

Prototype是之前应用最为广泛的Ajax开发框架,其的特点是功能实用而且尺寸较小,非常适合在中小型的Web应用中使用。开发Ajax应用需要编写大量的客户端JavaScript脚本,而Prototype框架可以大大地简化JavaScript代码的编写工作。更难得的是,Prototype具备兼容各个浏览器的优秀特性,使用该框架可以不必考虑浏览器兼容性的问题。但是由于Prototype成型年代早,从整体上对于面向对象的思想把握不是很到位,导致了结构比较的松散

2. Dojo

Dojo的强大之处在于提供了很多其他javascript库所没有提供的功能。例如:离线存储的API,生成图标的组件等等。并且在应用方面得到了IBM,SUN等大公司的支持。但是Dojo的缺点也很明显:学习曲线陡,文档不齐全,最严重的是API不稳定,每次升级都可能导致已有的程序失效。

3.YUI

作为开源前端框架的鼻祖,在框架上的功力非常之深。有着自己的解析 DOM的核心框架,并且在特效、动画、图表等方面都有丰富的扩展,并可以通过 YQL 直接访问 Yahoo!的数据。在用户经常使用的功能方面都有着不错的表现

4.BootStrap

目前桌面端最为流行的开发框架,一经 Twitter 推出,势不可挡。Bootstrap 主要针对桌面端市场,Bootstrap3 提出移动优先,不过目前桌面端依然还是 Bootstrap 的主要目标市场。

Bootstrap 框架在布局、版式、控件、特效方面都非常让人满意,都预置了丰富的效果,极大方便了用户开发。在风格设置方面,还需要用户在下载时手动设置,可配置粒度非常细,相应也比较繁琐,不太直观,需要对 Bootstrap 非常熟悉配置起来才能得心应手


JQuery的介绍及其优势

1. JQuery的介绍

JQuery的宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种常用浏览器。

JQuery是一个快速的,简洁的JavaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

JQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。JQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可

2. JQuery的优势
  • 一款轻量级的js框架。JQuery核心js文件才几十kb,不会影响页面加载速度

  • 丰富的DOM选择器,JQuery的选择器用起来很方便,比如要找到某个dom对象的相邻元素,js可能要写好几行代码,而JQuery一行代码就搞定了,再比如要将一个表格的隔行变色,JQuery也是一行代码搞定

  • 链式表达式。JQuery的链式操作可以把多个操作写在一行代码里,更加简洁

  • 事件、样式、动画支持。JQuery还简化了js操作css的代码,并且代码的可读性也比js要强

  • Ajax操作支持。JQuery简化了AJAX操作,后台只需返回一个JSON格式的字符串就能完成与前台的通信

  • 跨浏览器兼容。JQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋

  • 插件扩展开发。JQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件,并且用JQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用

选择器

1. id选择器:
$("#id")
2. class选择器:
$(".classname")
3. 标签选择器
$("tagname")
4. 组合选择器
$("#id, .classname, tagname")
5. 层级选择器
$("#id a") ----> 所有的后代a元素
$("#id > a")---> 第一个儿子元素
6. 基本选择器
:first :eq() :last
7. 属性选择器
<input type='text'>
<input type='checkbox'>
<input type='password'>

$("input[type='checkbox']")

实例:表格的全选和反选以及取消

筛选器

1. 下一个元素
$("#one").next()
$("#one").nextAll()
$("#one").nextUntil('#i2')
2. 上一个元素
$('#one').prev()
$('#one').prevAll()
$('#one').prevUntil('#ii1')
3. 父亲元素
$('#one').parent()
$('#one').parents()
$('#one').parentsUntil()
4. 儿子和兄弟元素
$('#one').children()
$('#one').siblings()
5. 查找元素
$('#one').find() 

案例:左侧菜单


样式操作

1. 添加整块样式
addClass()
2. 删除整块样式
removeClass()
3. 判断样式存不存在
hasClass()
4. 相当于开关,有这个样式则去掉,没有则添加
toggleClass()

案例:开关灯效果 以及 模态框、五星好评


文本操作

1. 对纯文本操作
$("#one").text(); --- 获取值
$("#one").text('fuck'); --- 设置值
2. 对HTML操作
$("xxx").html()
$("xxx").html('<a href=""></a>')    
3. 对val操作(针对input系列)
$("xxx").val()
$("xxx").val('123')

案例:模态弹出框含有文本


属性操作

1. 用于自定义属性
$('xxx').attr('n')
$('xxx').attr('n','v')
$('xxx').removeAttr('n')
2. 用于checkbox,radio
$('xxx').prop('checked')
$('xxx').prop('checked', true)

注意:

<input type='checkbox' id='i1' checked=checked />
此处选中复选框的时候,我们可以直接使用attr来进行赋值操作,但是在1以及2版本的jquery中会出错,在3版本的jquery中没有任何问题

因此,我们在处理checkbox,radio等标签的时候,我们尽量使用特定的prop,不要使用attr(“checked”,”checked”)


文档处理

1. 插入到指定元素”里面”的后面
$('xxx').append()
$('xxx').appendTo()
2. 插入到指定元素”里面”的前面
$('xxx').prepend()
$('xxx').prependTo()
3. 插入到指定元素”外面”的后面
$('xxx').after()
4. 插入到指定元素”外面”的前面
$('xxx').before()
5. 移除和清空元素
$('xxx').remove()
$('xxx').empty()
6. 替换元素
$('xxx').replaceWith()
$('xxx').replaceAll()

案例:两个框之间互相选择

动画效果

show()
hide()
toggle()

fadeIn()
fadeOut()
fadeToggle()

slideIn()
slideOut()
slideToggle()

案例:图片的淡入和淡出

事件

1. 常见的事件
$('xxx').click(function(){})
$('xxx').mouseout(function(){})
$('xxx').mouseover(function(){})
$('xxx').hover(function(){})
$('xxx').blur(function(){})          
$('xxx').focus(function(){})
2. 第二种绑定事件的方式
$("xxx").bind("click",function(){})
$("xxx").unbind("click",function(){})
$("xxx").on("click",function(){})
$("xxx").off("click",function(){})
3. 阻止事件发生
return false

常见:阻止表单的提交
4. 页面加载完成之后,执行函数体中的内容
$(function(){})
$(document).ready(function(){})

案例:轮播图片大案例