1.什么是JQuery。
JavaScript开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。
把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)
常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个
jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。
1.1jQuery的优点好处
jQuery设计的宗旨是'Write Less,Do More',即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的操作,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
极大地简化了 JavaScript 编程。
1.2JQuery中页面加载事件
- // 第一种写法
- $(document).ready(function() {
-
- });
- // 第二种写法
- $().ready(function() {
-
- });
- // 第三种写法
- $(function() {
-
- });
jQuery入口函数与window.onload的对比
JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
1.3JQuery优点总结:
- -查找元素的方法多种多样,非常灵活
- -拥有隐式迭代(自动循环遍历)特性,因此不再需要手写for循环了。
- -完全没有兼容性问题。
- -实现动画非常简单,而且功能更加的强大。
- -代码简单、粗暴。
2.选择器
2.1JQuery基本选择器
名称 |
用法 |
描述 |
ID选择器 |
$("#id"); |
获取指定ID的元素 |
类选择器 |
$(".class"); |
获取同一类class的元素 |
标签选择器 |
$("div"); |
获取同一类标签的所有元素 |
并集选择器 |
$("div,p,li"); |
使用逗号分隔,只要符合条件之一就可 |
交集选择器 |
$("div.redClass"); |
获取class为redClass的div元素 |
2.2JQuery层级选择器
名称 |
用法 |
描述 |
子代选择器 |
$("ul>li"); |
使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 |
$("ul li"); |
使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
2.3JQuery过滤选择器
名称 |
用法 |
描述 |
:eq(index) |
$("li:eq(2)").css(“color”,"red"); |
获取到的li元素中,选择索引号为2的元素,索引号index从0开始 |
:odd |
$("li:odd").css("color","red"); |
获取到的li元素中,选择索引号为奇数的元素 |
:even |
$("li:even").css("color","red"); |
获取到的li元素中,选择索引号为偶数的元素 |
2.4JQuery筛选方法
名称 |
用法 |
描述 |
children() |
$("ul").children("li"); |
相当于$("ul-li"),子类选择器 |
find() |
$("ul").find("li"); |
相当于$("ul li"),后代选择器 |
siblings() |
$("#first").siblings("li"); |
查找兄弟节点,不包括自己本身 |
parent() |
$("first").parent(); |
查找父级元素 |
eq(index) |
$("li").eq(2); |
相当于$("li:eq(2)"),index从0开始 |
next() |
$("li").next(); |
找下一个兄弟 |
prev() |
$("li").prev(); |
找上一个兄弟 |
closest |
$("li").closest("ul") |
找最近一个祖先元素 |