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

ゞ浴缸里的玫瑰 2021-12-10 23:15 235阅读 0赞

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

--------------------

### 文章目录 ###

*  \*1.选择器
 *   *  1.1 DOM和jQuery比较
     *  1.2 隔行变色
     *  1.3 层级选择器
     *  1.4 过滤选择器
     *  1.5 属性选择器
     *  1.6 筛选选择器
 *  2.举例：鼠标与li
 *   *  2.1 鼠标悬停下拉菜单
     *  2.2 隔行变色，鼠标悬停时变色
     *  2.3 突出显示
     *  2.4 手风琴效果
     *  2.5 淘宝服饰广告
 *  3.小结
 *  \*4.动画
 *   *  4.1 显示和隐藏
     *  4.2.滑入和滑出
     *  4.3 淡入和淡出
     *  4.4 自定义动画
     *  4.5 停止动画
     *  4.6 关闭右下角广告
     *  4.7 小结
 *  \*5.DOM操作
 *   *  5.1 基础
     *  5.2 创建
     *  5.3 选择
     *  5.4 动态添加表格
 *  \*6.事件
 *   *  6.1 宽高和坐标操作
     *  6.2 on方式绑定
     *  6.3 举例：键盘按键按下，变色
     *  6.4 举例：五角星评分
 *  6.5 each

--------------------

# \*1.选择器 #

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

（1）引包

（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 隔行变色 ##

事件函数

## 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设置样式][DOM_style]

*  **需求1：隔行变色**

先定义：

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

再设置：

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

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

var color = "";//全局变量
     $("li").mouseenter(function () { 
                    color = $(this).css("background");  //先把之前的颜色保存下来，鼠标离开时还原
                    $(this).css("background", "green");
                });

鼠标离开时：

$("li").mouseleave(function () { 
                    $(this).css("background", color);
                });

## 2.3 突出显示 ##

*  html：设置li列表，存放图片
 *  入口函数：$(window).ready(function () \{\});//因为要加载完图片后才执行
 *  需求1：鼠标进入时，其他半透明，当前盒子opacity值为1

$(".wrap").find("li").mouseenter(function () { 
     	    $(this).css("opacity", 1).siblings("li").css("opacity", 0.5); 
    });

*  需求2：离开时均为1

$(".wrap").mouseleave(function () { 
                    $(this).find("li").css("opacity", 1);
                });

## 2.4 手风琴效果 ##

*  html：设置li列表，li内设置span，文本为“标题N”，li内同时设置个div
 *  点击函数

$(".parentWrap span").click(function () { });

*  函数内：

$(this).next().show().parent("li").siblings("li").find("div").hide();

next()：下一个标签

## 2.5 淘宝服饰广告 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70_pic_center]  
建立3个ul：左中右，li中均设置a链接

*  左侧：

$("#left li").mouseenter(function () { 
                    $("#center li").eq($(this).index()).show().siblings("li").hide();
                    //$("#center li:eq("+$(this).index()+")").show().siblings("li").hide();//效果相同
                });

*  右侧：

$("#right li").mouseenter(function () { 
                    $("#center li").eq($(this).index()+9).show().siblings("li").hide();
                });

小结：若是js中需要用到排他思想，但jq不用，需要用到show()，hide(),siblings().  
疑问： $ ("\#center li:eq("+$(this).index()+")")为何要有加号才生效。

# 3.小结 #

上述只是做了简单的笔记。主要介绍了jq的特点并对jq中的选择器做了基本的整理，有层级选择器，过滤选择器，属性选择器。同时，举例说明jq在列表中各选择器的应用。如有不当之处，欢迎指正！

--------------------

# \*4.动画 #

## 4.1 显示和隐藏 ##

显示4种方式：

*  .show()
 *  .show(1000)，1000是步长，单位毫秒
 *  .show(“slow”),其中还有normal，fast
 *  .show(步长，函数)  
    隐藏.hide类似

## 4.2.滑入和滑出 ##

与show（）方法类似

*  滑入动画：.slideDown（），一般都是下滑，如果在底部就是上滑
 *  滑出动画：.slideUp（），一般都是上拉
 *  切换上拉/下滑：.slideToggle（）

## 4.3 淡入和淡出 ##

与show（）方法类似：

*  淡入(淡淡地进入视线)：.fadeIn()
 *  淡出（渐渐消失）：.fadeOut()
 *  切换淡入/淡出：.fadeToggle()

## 4.4 自定义动画 ##

*  js具体代码请参考：[【JS特效笔记】scroll与缓动动画以及client可视区][JS_scroll_client]中的3.2，3.3节：回调函数。
 *  点击事件函数：

## 4.5 停止动画 ##

*  悬停显示下拉菜单参考：[【jQuery笔记】选择器][jQuery]中的3.1节，但是没有上拉与下滑效果，变化是瞬间的。
 *  悬停显示下拉菜单，要求显示上拉与下滑效果
 *  捕获的是li事件
 *  .stop（参数1，参数2）；默认两个参数都是false，则后续动画会执行，立即停止当前动画  
    鼠标进入：

$(this).children("ul").stop().slideDown(1000);//下滑

鼠标离开：

$(this).children("ul").stop().slideUp(1000);//上拉

## 4.6 关闭右下角广告 ##

先滑入再滑出，然后淡入，点击儿子span后就淡出。

$(".ad").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () { 
                    $(this).parent().fadeOut(1000);
                });

## 4.7 小结 ##

上述介绍了显示隐藏，滑入滑出，淡入淡出方法，每种方法有4种形式；同时，还有停止方法。最后，介绍了应用在自定义动画，下拉菜单和关闭右下角广告等，如有不当之处，欢迎指正！

--------------------

# \*5.DOM操作 #

## 5.1 基础 ##

*  如果定义全局变量，可以

var =$("button");

但也可以直接使用$(“button”)

*  添加标签：$(“div”).addClass(“current”);
 *  判断：.hasClass(“current”);
 *  删除：.removeClass(“current”);
 *  切换：.toggleClass(“current”);//有则删，无则加

## 5.2 创建 ##

var jqNewLi = $("<li>我是jquery创建出来的li。用的是append方法添加</li>");
     $("ul").append(jqNewLi);

*  添加（推荐）：

$("ul").html("<span></span>")

*  清空：

$("ul").html("")

## 5.3 选择 ##

*  html：select标签内，用option标签做选择项。
 *  jq中设立点击事件。  
    将左侧的子标签全部移动到右侧

$("#sel2").append($("#sel1 option"));

疑问：右侧框添加了左侧框的内容，为何左侧框的内容会消失呢？  
将左侧的子标签移动到右侧，:selected表示选中的选项

$("#sel2").append($("#sel1 option:selected"));

## 5.4 动态添加表格 ##

*  html：仅建立thead，内容为标题、地址和说明，tbody空着，id为\#j\_tbData，同时设置按钮
 *  jq中设置1个数组，形式为

var data=[{ },{ },{ }];

\{\}分别为表格头行对应的内容，用键值对的形式表示

*  点击事件中需要生成表格三行的内容，用for循环遍历data，生成标签用\*\*.html（str）,仅生成1次\*\*。若用.append则每次点击后都会继续生成。
 *  str内容为:

for(var i=0;i<data.length;i++){ 
    	str += "<tr><td>"+data[i].name+"</td><td>"+data[i].url+"</td><td>"+data[i].type+"</td></tr>";
    	}
     $("#j_tbData").html(str);

--------------------

# \*6.事件 #

## 6.1 宽高和坐标操作 ##

*  高度操作：

$(selector).height();     //获取高度
    $(selector).height(200);  //设置高度

*  坐标操作

$(selector).offset().top;//获取距离页面顶部距离
    $(selector).offset({ "left": 1000, "top": 1000});//设置距离页面上左的距离
    $(selector).position().top;//距离父盒子顶部
    $(selector).position().top="5px";
    $(window).scrollTop();//网页
    $(window).scrollTop(100);

## 6.2 on方式绑定 ##

$(document).on("click", { }, function (event) { 
                    console.log(event.data);//结果：{}；含义：传递给事件处理程序的额外数据
                    console.log(event.currentTarget);//#document；等同于this，当前DOM对象
                    console.log(event.target);//整个html元素；触发事件源，不一定===this
                    console.log(event.pageX);//一个整数；鼠标相对于文档左部边缘的位置
                    console.log(event.type);//click；事件类型：click，dbclick…
                    console.log(event.which);//1；鼠标的按键类型：左1 中2 右3
                    console.log(event.keyCode);//undefined；键盘按键代码
                });

## 6.3 举例：键盘按键按下，变色 ##

*  需求：在键盘上，按下是哪个颜色的首写字母div就改变为该颜色，然后span内容赋值。
 *  思路：  
    1.按键：将函数绑定到按键事件，$(selector).keyup(function)  
    2.变色和赋值：函数内自定义函数，根据按键代码keyCode设置switch函数。
 *  步骤：

1.按键

$(document).keyup(function (e) {   //键盘弹出时，触发事件
                    setColor(e.keyCode);
                });

2.变色和赋值：

*  keyCode:图片源自（小文：https://www.cnblogs.com/daysme/p/6272570.html）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70_pic_center 1]

## 6.4 举例：五角星评分 ##

*  需求：  
    1.鼠标放悬停时，当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。  
    2.鼠标点击1个li，当前li和之前所有的li都变成实心五角星，其他变为空心，移开后效果不变。
 *  思路：  
    1.悬停：默认为空心，使用悬停事件改变  
    2.点击：使用点击事件，但在点击时给点击的星星加一个类名current，用以离开时的判断  
    3.离开：判断是否点击过，设置两种结果  
    以上事件可以用 $(selector).click(function\{\});形式，也可以用on绑定，如

$(".comment li").on("mouseenter", function () { });

*  步骤：  
    1.悬停：

$(this).text(star_sel).prevAll("li").text(star_sel).end().nextAll("li").text(star_none);

2.点击：

$(this).attr("class", "current").siblings("li").removeAttr("class");

3.离开：

$("li.current").text(star_sel).prevAll("li").text(star_sel).end().nextAll("li").text(star_none);

# 6.5 each #

*  需求：设置每个盒子的透明度不同
 *  思路：设置each事件，形式为：

$(selector).each(function (index, element) { });

\-步骤：

$(element).css("opacity", (index + 1) / 10);

[DOM_style]: https://blog.csdn.net/qq_34243694/article/details/95232326
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70_pic_center]: /images/20211210/eae73509122a40e18d1c8df0e4910e93.png
[JS_scroll_client]: https://blog.csdn.net/qq_34243694/article/details/95357490
[jQuery]: https://blog.csdn.net/qq_34243694/article/details/95523980
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20211210/9cbacbf0cff741b0948b05fb55d66c58.png