jQuery基础：选择器、动画、DOM操作和事件等

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

---

---

*1.选择器

• 2个特点：链式编程、隐式迭代
• 3个部分：

（1）引包

<script src="../jquery-3.4.1.min.js"></script>

（2）入口函数
加载完所有文档与图片等才执行（不常用）：

 $(window).ready(function () {
   });

仅加载完文档就执行：

 $(document).ready(function () {
   });

简写模式（推荐）：

 $(function () {
   });

（3）事件处理
绑定事件：

 var jQbtn = $("button");
 var jQdiv = $("div");

触发事件函数：

jQbtn.click(function () {
   
            jQdiv.show(3000).html("hello！");//链式编程
        });

• 均以分号结尾

1.1 DOM和jQuery比较

• 本质：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
• DOM转换为jQuery: jQbtn = $(“button”);
• jQuery转换为DOM: jqBox[0].style.backgroundColor = “black”;

1.2 隔行变色

事件函数

 var jqLi = $("li");
 for (var i = 0; i < jqLi.length; i++) {
   
                if (i % 2 === 0) {
   
                    //jquery对象，转换成了js对象
                    jqLi[i].style.backgroundColor = "pink";
                } else {
   
                    jqLi[i].style.backgroundColor = "yellow";
                }
            }           

1.3 层级选择器

CSS选择器：+ 紧邻选择器：如div+p选择紧挨着的下一个p元素
JQ:
$(selector).css(“background”,“red”);
~ 兄弟选择器。div~p，选择后面所有的兄弟元素p

1.4 过滤选择器

• ：eq(index):选择第1个匹配的元素，如li：eq(index)
• :gt(index) ,:lt(index),:odd,:even,:first,:last

1.5 属性选择器

• a[href]:选择所有包含href属性的元素；$（“a[href]”）
• a[href=“itcast”]
• a[href！=‘itcast’]
• a[href^=‘itcast’]:以itcast开头
• a[href$=‘itcast’]:以itcast结尾
• a[href*=‘i’]：所有包含i这个字符的元素
• a[href][title=‘我’]:都符合才能选中

1.6 筛选选择器

• find（selector）,查找指定元素所有后代元素
• children（），亲儿子元素
• siblings（），兄弟元素
• parent（），父元素
• eq（index），指定元素

2.举例：鼠标与li

2.1 鼠标悬停下拉菜单

• html：设置1个包含3个li的ul，每个li包含一个超链接作为标题。一个包含3个li的ul作为下拉菜单。
• 事件触发函数：
  鼠标进入：

jqli.mouseenter(function () {
   
	$(this).children("ul").show();
}

鼠标离开：

 jqli.mouseleave(function () {
   
                $(this).children("ul").hide();
            });

2.2 隔行变色，鼠标悬停时变色

js代码请参考：【DOM笔记】style设置样式

• 需求1：隔行变色

先定义：

 var jqli1 = $("li:odd");
 var jqli2 = $("li:even");

再设置：

jqli1.css("background", "#cccccc");
jqli2.css("background", "white");

• 需求2：悬停变色
  鼠标进入时：

 var color =