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操作