JavaScript 库:
仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。
JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。可以快速高效的使用这些封装好的功能了。比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)
jQuery 是一个快速、简洁的 JavaScript 库,即倡导写更少的代码,做更多的事情。
j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质: 就是学习调用这些函数(方法)。jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率.
-
- 优点: 轻量级。核心文件才几十kb,不会影响页面加载速度
- 跨浏览器兼容。基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持,大大简化了DOM操作
- 支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
- 免费、开源
jQuery 的使用步骤: 1. 引入 jQuery 文件 2. 使用即可
jQuery 的入口函数:
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
jQuery 的顶级对象 $
1.$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法。
jQuery 对象和 DOM 对象
1. 用原生 JS 获取来的对象就是 DOM 对象
2. jQuery 方法获取的元素就是 jQuery 对象。
3. jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。
注意:只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。
jQuery 对象和 DOM 对象
DOM 对象与 jQuery 对象之间是可以相互转换的。
因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1. DOM 对象转换为 jQuery 对象: $(DOM对象) ---->$(‘div’)
2. jQuery 对象转换为 DOM 对象(两种方式) ----->$(‘div’)[index] index是索引号
----->$(‘div’).get(index) index是是索引号
jQuery 基础选择器
原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。
$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号
jQuery 层级选择器
jQuery 设置样式------>$('div').css('属性', '值')
隐式迭代(重要)
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
jQuery 筛选选择器
jQuery 筛选方法(重点)
重点记住: parent() children() find() siblings() eq()
jQuery 里面的排他思想
想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
$(this).css(“color”,”red”); //this是当前选中的元素
$(this).siblings(). css(“color”,””);
链式编程
链式编程是为了节省代码量,看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
使用链式编程一定注意是哪个对象执行样式.
重点:jQuery 得到当前元素索引号 $(this).index() 可以通过 eq(index) 方法去选择 指定的东西,多选一,排他思想
显示元素 show() 隐藏元素 hide()
操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。
- 参数只写属性名,则是返回属性值 ------>$(this).css(''color'');
- 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号 ----->$(this).css(''color'', ''red'');
- 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号,------->$(this).css({ "color":"white","font-size":"20px"});
jQuery 样式操作 ->设置类样式方法
可以操作类样式, 注意操作类里面的参数不要加点。
- 添加类------->$(“div”).addClass(''current'');
- 移除类------->$(“div”).removeClass(''current'');
- 切换类------->$(“div”).toggleClass(''current'');
类操作与className区别
原生 JS 中 className 会覆盖元素原先里面的类名。Var one =documenrt.querySelector(“.one”);
One.className = “two” //再去标签名上看class的类名已经为 “two”
jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。 $(.”one”).addClass(“two”); //再去标签名上看class的类名已经为“one two”
transform: rotate(720deg)
transform变换 1.ranslate(x,y) 设置盒子位移2.scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切spective 设置透视距离