一,jquery是什么 1、jQuery是一个JavaScript函数库。(自己封装的库就太次了) 2、特点("写的少,做的多") 3、jQuery库包含以下功能:HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。 二,jquery的引入 1,下载到本地,直接引入 <script src="jquery-1.10.2.min.js"></script> 2,从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> 三,jquery入口函数 1、所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ // 开始写 jQuery 代码... } ); 2、简洁写法(与以上写法效果相同): $(function(){ // 开始写 jQuery 代码... }) 四,jquery中元素的获取 1,基础选择器 名称 用法 描述 ID选择器 $(“#id”); 获取指定ID的元素 类选择器 $(“.class”); 获取同一类class的元素 标签选择器 $(“div”); 获取同一类标签的所有元素 并集选择器 $(“div,p,li”); 使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素 交集选择器(标签指定式选择器) $(“div.redClass”); 注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。 2,层级选择器 名称 用法 描述 子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 3,过滤选择器 用法 描述 :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元素中,选择索引号为偶数的元素 4,筛选选择器 用法 说明 children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”),子类选择器 find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器 siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点,不包括自己本身。 parent() $(“#first”).parent(); 查找父亲 eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始 next() $(“li”).next() 找下一个兄弟 prev() $(“li”).prev() 找上一次兄弟 Index() $(“li”).index() 获取当前的位置(索引) 五,jquery中的事件 1,点击事件 click dblclick 2,鼠标事件 mouseover mouseout mousemove mouseenter mouseleave 3,键盘事件 keyup keydown keypress 4,框内事件 blur focus 5,滚动事件 scroll 六,jquery中的方法1 1,抽屉动画方法 slideUp slideDown slideToggle 2,渐变色方法 fadeIn fadeOut fadeToggle 3,动画方法 animate({}) 4.end方法 end() 返回事件执行前的事件元素 7,笔试题 1.jQuery 入口函数与 JavaScript 入口函数的区别 jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。 JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。 2.jQuery 库中的 $() 是什么? $()是一个函数的调用,$是函数名,参数不一样,功能不一样 3. jQuery 里的 ID 选择器和 class 选择器有何不同? id选择器是一个元素 class选择器是一个伪数组 4. 网页上有 5 个 <div> 元素,如何使用 jQuery来选择它们? 可以直接用标签选择器来获取所有div,如$("div") 如果需要单独拿出某个div,可以通过$("div").eq(index)来获取 如果需要拿到奇数或者偶数个div,可以通过$("div:odd")/$("div:even")来获取