jquery01-基础使用

一,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")来获取
原文地址:https://www.cnblogs.com/adylz111/p/13433953.html