JQuery

JQuery是一种目前最流行的前端js框架之一

ExtJS Vue.js Angular.js(推荐) rect.js......

 

设计思想:write less,do more

 

JQuery与其他JavaScript库

jQuery Bootstrap Zepto Ext YUI

 

jQuer能做什么:

与Ajax技术完美结合

扩展Jquer插件

对页面事件进行处理

控制页面样式

访问和操作DOM元素

 

JQuer能做的javaScrip都能做,但使用JQuer能大幅提高开发效率

 

jQuery的优势:

体积小,只有100K

强大选择器

出色的DOM封装

可靠的事件处理机制

出色的浏览器兼容性

使用隐式迭代简化编程

丰富的插件支持

 

jQuery版本1.10之后又两个分支

 

版本号.min.js(发布版) 无压缩版本用于学习测试开发

版本号.js(开发版) 用于发布产品和项目,经过服务器的Gzip压缩

 

在页面引入jQuery

<script src="路径" type="javascript/js"></script>

 

注意:版本升级,不向下向上兼容,每次升级会涉及到源码

 

 

 

1.在页面加载完成事件

原生js window.οnlοad=function(){}

jQuery $(document).ready(function(){}) 可以简化为 $(function(){})

 

window.onload对于一个页面只能出现异常,而&$(function(){})可以出现多次

意义在于:更好的实现团队合作

 

 

3.$(function(){})能够跟快速的响应用户操作,能在生成DOM树时,完成页面响应. js需要在资源文件加载完成,才响应页面

 

 

$---->>jQuery的核心操作符号 就是jQuery的单词简写 区分大小写

if($==jQuery) true 也叫工厂函数

 

 

jQuery选择器:用来选择页面元素 语法:$(选择器) jQuery的选择器完成继承了CSS

 

 

DOM对象和jQuery对象之分:

通过原生js提供的doucument.getElenebt[s]ByXXX四个方法选择的对象成为DOM对象

通过jQuery选择器,选中的对象称为jQuery

 

jQuery对象不能调用DOM方法 DOM对象也不能调用jQuery对象方法

 

90%的DOM操作在jQuery中都进行了完美的封装,也存在某些DOM操作在jQuery中没有封装,那么这时我们必须采用DOM的方式

 

DOM对象和jQuery对象的互转

1.DOM----jQuery $(DOM对象)-------jQuery对象

2.jQuery----DOM jQuery对象其实就是DOM对象数组

a.jQuery对象[index]-获取相应的DOM对象

b.jQuery对象.get(index)

 

 

页面操作元素:jQuery对象没有属性操作只有方法的封装

addClass("className")方法添加样式 相当于DOM中ClassName="xxx"

Show()显示某元素 底层动态操作了元素的display属性

Hide()隐藏某元素

next()

Css("样式名","样式值") 相当于DOM对象.style.样式="值" 走的是行内样式(少用) 补充:css(js对象)在这个对象中封装多个样式属性{"样式一":"值","样式二":"值"}

补充:toggle(有参);

 

 

 

对于样式名中带有-的样式可以和CSS完全相同,也可以采用DOM操作的样式表示

 

 

jQuery链式风格:

链式操作:对一个对象进行多重操作,并返回一个对象

 

 

jQuery中大部分方法操作完成后返回调用该方法的当前对象本身

基于一个对象进行多次方法调用,形成一个调用链(链式编程)

 

(重要)在动态事件绑定的函数中this代表当前事件源对象,此对象为一个DOM对象,往往需要通过工厂函数$(this)将其转化为jQuery对象,享用jQuery封装的DMO操作