jQuery 基础学习

jQuery 学习

这篇文章主要讲了 jQuery 的基本使用 (包括入口函数，原生对象和 jQuery 对象的差别和转化) jQuery 常用的 选择器 隐式迭代 样式操作 和 自带或者自定义的动画效果，jQuery 对属性的操作，元素内容的文本值进行操作，和对元素的操作

• pink老师最后一个部分的前端课程, 且行且珍惜
• jQuery 是 JavaScript 的一个库 (library: 对JavaScript 的代码进行封装)
• jQuery 推荐使用双引号

write Less, Do more

jQuery 基本使用

• jQuery 1.x 的版本兼容 IE 678 低版本浏览器，但是官网不再更新支持

• 同样分为开发版(development)和压缩版(production)，使用时推荐压缩版

• 当在把代码复制到文件中时可能会出现复制不全的错误，这时只需要打开 F12 中的 network 选择把那个 js 文件保存到本地就可以了

• 使用 <script src="jquery-3.5.1.min.js"></script> 引入 jQuery

• 元素隐藏：用来测试是否引入成功

$('div').hide();

jQuery 的入口函数

• 入口函数是指等待页面全部加载完毕才执行的函数

• 在 jQuery 中有两种写法

• 等 DOM 元素加载完毕再去执行 js 代码：

$(document).ready(function(){
    // 要执行的代码
})

• 或者

$(function() {
    // 要执行的代码
})

jQuery 顶级对象 $

• $ 符号和 jQuery 是通用的，也就是可以写成：

$(function() {
    console.log('hello jQuery');
});
// 也可以写成
jQuery(function() {
    console.log('hello jQuery');
});

• $ 是 jQuery 的顶级对象，相当于 window，可以调用 jQuery 中的方法

DOM 中的对象和 jQuery 中的对象

• 通过原生 js 获取的对象是 DOM 对象
• jQuery 对象是用 $('div') 获取的
• jQuery 对象本质是 $ 对 DOM 对象包装后产生的对象 (使用伪数组的方式储存)
• jQuary 对象不能使用原生 js 中的方法

jQuary 对象和 DOM 对象之间的转化

• 有些时候 jQuery 对象没有原生 DOM 对象的一些方法 (例如给视频播放的 play 方法是原生方法，在 jQuery 中没有)

• DOM 对象转化为 jQuery 对象：$(DOM对象)

• jQuery 对象转化为 DOM 对象：$('div')[index] 或者 $('div').get(index)

• 例如我们想让一个 jQuery 对象的视频播放：

$('video').get(0).play();
// 或者
$('video')[0].play();

jQuery 常用 API

jQuery 选择器

• jQuery 给复杂的原生选择器进行了封装

$("选择器");

• 里面的选择器和 CSS 中的选择器是一样的

层级选择器	用法	描述
子代选择器	$("ul>li")	获取子层级的元素，注意，不会获取孙子层级的元素
后代选择器	$("ul li")	使用空格，可以选取后代所有的元素，包括孙子级元素

jQuery 筛选选择器

筛选选择器	用法	描述
:first	$("li:first")	获取第一个 li 元素
:last	$("li:last")	获取最后一个 li 元素
:eq(index)	$("li:eq(2)")	获取第 index 个元素，索引号从 0 开始
:odd	$("li:odd")	获取索引号为奇数的元素
:even	$("li:even")	获取索引号为偶数的元素

jQuery 隐式迭代

• jQuery 设置属性值：

$('div').css('属性','值');

• 遍历内部的 DOM 元素 (伪数组形式储存) 的过程叫隐式迭代
• 例如，一个页面中有四个 div，我想把他的背景颜色都改成粉色，只需要下面一句代码

$('div').css('background','pink');

• 不用像原生 DOM 需要使用 for 循环一个一个的修改，jQuery 在暗中已经帮你完成了循环

jQuery 筛选方法

筛选方法	用法	描述
parent()	$("li").parent()	获取最近一级父级元素
children(selector)	$("ul").children("li")	相当于 $("ul>li")，查找最近一级子元素
find(selector)	$("ul").find("li")	相当于 $("ul li") 获取后代元素，有多个后代元素时，回把他们都找出来
siblings()	$("li").siblings("li")	查找兄弟节点，不包括自己本身
nextAll([expr])	$("li").nextAll()	查找当前元素之后所有同辈元素
prevAll([expr])	$("li").prevAll()	查找当前元素之前所有同辈元素
hasClass(class)	$("div").hasClass("protected")	检查当前元素是否有某个特定的类，如果有则返回true
eq(index)	$("li").eq(2)	相当于 $("li:eq(2)")，index 从 0 开始

• jQuery 里的 this 是 $(this)
• show() 是显示元素，hide() 是隐藏元素
• 下面写一个例子来鼠标经过显示某个元素

// 绑定鼠标经过事件
$(".nav>li").mouseover(function() {
    $(this).children("ul").show();
});

jQuery 中的排他思想

• 因为有隐式迭代的存在，所以可以很简单的完成排他思想
• 例如我想制作一些按钮点击其中一个之后变色而其余的不变色

// 给所有按钮绑定点击事件
$("button").click(function() {
    // 让当前元素变化背景颜色
    $(this).css("background","pink");
    // 去掉其余的背景颜色
    $(this).siblings("button").css("background","");
})

• 得到当前元素索引号的方法 $(this).index()

jQuery 样式操作

• 参数只写属性名，则返回的是属性值

$(this).css("color");

• 属性名和属性值都写是设置一组样式，属性名必须加引号

$('div').css("color","red");

• 可以使用对象的形式设置多组样式，属性和属性值用冒号分开，属性可以不用加引号 (原来有连接号的符号的属性需要改成驼峰命名法)，但是不是数字的值一定要加引号

$('div').css({
    color: "red",
    height: "400px",
});

用类来操作 CSS 属性值

• 用 .css() 一个一个向里面添加属性还是有些不方便，添加或者删除类名能更方便的更改样式

• 和之前的 classList 很像，可以操纵类样式

• 1.添加类 (注意里面类名不要加点)

$('div').addClass('current');

• 2.删除类

$('div').removeClass('current');

• 3.切换类：如果没有这个类名我就给你加上，如果有的话就去掉

$('div').toggleClass('current');

类操作和 className 的区别

• 原生 js 操作类名的时候会覆盖掉原来的类名
• jQuery 里面的类操作不会影响到原来的类名

jQuery 效果

显示与隐藏

• 显示效果：

show([speed,[easing],[fn]]);

• speed：显示的速度(slow,fast,nomal 或者毫秒的数字)

• easing：显示的效果 (默认是 swing，可选 linear 匀速的)

• fn 回调函数，在显示完成后执行的函数

• 隐藏效果：

hide([speed,[easing],[fn]]);

• 里面的参数和 show 函数是一样的

• 切换显示与隐藏的效果：如果正在显示就给你隐藏掉，如果正在隐藏就给你显示出来

toggle([speed,[easing],[fn]]);

滑动效果

• 下拉滑动：

slideDown([speed,[easing],[fn]]);

• 上拉滑动：

slideUp([speed,[easing],[fn]]);

• 滑动切换：

slideToggle([speed,[easing],[fn]]);

事件切换

• 事件切换是鼠标经过和离开的复合写法

hover([over],out);

• over：鼠标经过的时候触发的函数 (mouseenter)

• out：鼠标离开的时候触发的函数 (mouseleave)

• 如果参数里只有一个函数的话鼠标经过和鼠标离开都会触发这个函数 (配合滑动切换 slideToggle 简直无敌)

• 和轮播图里面的 节流阀 有一样的问题，当快速触发这个事件的时候，他就会执行多次，所以为了解决这个问题，需要 stop 函数

// 停止动画或效果
stop();
// 写在动画或者效果的前面时，相当于停止上一次的动画

• stop 方法必须写在动画的前面
• 居然可以这样写：

$(this).children("ul").stop().slideTogle();

淡入淡出效果

• 淡入淡出，淡入淡出的切换：

fadeIn([speed,[easing],[fn]]);
fadeOut([speed,[easing],[fn]]);
fadeToggle([speed,[easing],[fn]]);

• 其实是透明度从 0 到 1 的效果

• 以渐进的方式调整到指定的不透明度:

fadeTo([speed],opacity,[fn]);

• opacity：透明度，取值 0-1 之间

自定义动画 (animate)

animate(params,[speed],[easing],[fn]);

• params：想要更改的样式属性，以对象的形式传递，属性名可以不带引号

• 例如点击按钮让盒子移动：

$('button').click(function() {
    $('div').animate({
        left: 200,
        top: 300
    });
})

jQuery 属性操作

• 获取元素的固有属性：

element.porp("属性");

• 获取元素本身自带的属性，例如 a 标签里的 href，input 标签里的 type

• 也可以设置属性值：

element.prop("属性","属性值");

• 如果用 prop 获取自定义属性值返回 undefined
• 获取或设置自定义属性的值：

element.attr("属性");
element.attr("属性","属性值");

H5 中的自定义属性是 data-*，同样可以通过 attr 获取属性值

• 数据缓存 (data)：可以在指定元素上存取数据，但不会修改 DOM 元素(在 F12 里看不到)，页面一旦刷新，里面的数据都会被移除

// 和上面的用法基本一样
element.data("属性","属性值");

• data 还可以读取 H5 里的自定义属性

// 例如我设置一个自定义属性为 data-index
$("div").data("index");

• 用 data 取得的值是数字型

change(fn); 函数：仅仅适合于 <input>、<textarea>、<select> 文本域是在失去焦点时触发回调函数，select 是在选择某个选项时触发回调函数

• jQuery 里有一个选择器 :checked 直接查找被选中的表单元素

• 复选框全选按钮的技巧：用 prop 获取全选框的选中状态，然后给个复选框选择和全选按钮相同的状态

jQuery 内容文本值

• 对元素的内容获取或修改：html() 相当于原生的 innerHTML

// 获取
element.html();
// 修改
element.html("内容");

• 获取其中的文本内容：text() 相当于原生的 innerText

// 获取
element.text();
// 修改
element.text("内容");

• 获取修改元素表单值：val()

// 获取
$("input").val();
// 修改
$("input").val("noobMing");

• jQuery 找到祖先的方法：parents([class])，不用使用 .parent() 一层一层的去查找，可以直接用这个方法定位到父级的某个元素
• toFixed(num)方法：小数点后保留几位

jQuery 元素操作

• 隐式迭代只能对同一类元素进行相同操作，而遍历元素能对相同类型的元素进行不同的操作

• 遍历元素方法：

$("div").each(function(index, domEle) {});

• index：每个元素的索引号

• demEle：每个 DOM 元素对象 (不是 jQuery 对象)

• 这两个参数都可以自己命名

• 还有第二种遍历方法：

$.each($("div"), function(index, domEle) {});

• 这种方法主要用于遍历数据，处理数据 (例如处理一个数组)

添加和删除元素

• 创建元素：

var li = $("<li></li>");

• 添加元素：

// 内部添加
$("ul").append(li);
$("ul").prepend(li);
// 外部添加
$("div").before(li);
$("div").after(li);

• 内部添加是把内容放到匹配的元素里面的最后面

• 可以使用 prepend(li) 把内容放到匹配元素的最前面

• 外部添加是放到指定元素的前面或者后面

• 删除元素：

element.remove();
element.empty();
element.html("");

• remove：删除匹配到的元素及子元素
• empty：删除匹配元素的所有子元素
• html 里面要加上空字符串，和 empty 等价