前端学习—jQuery

一、JQuery简介

1.JQuery是什么？

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。

2.jQuery优点

轻量级JS框架，核心js文件共几十kb，不影响加载速度。
丰富的DOM选择器，jQuery的选择器用起来很方便。
支持链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
支持事件，样式，动画，可读性高于js代码
支持Ajax操作，并对Ajax操作进行了简化。
跨浏览器兼容，基本兼容目前主流浏览器。
插件扩展丰富，jQuery有丰富的第三方插件。如树形菜单

3.jQuery库内容

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax

4.jQuery安装使用

jQuery版本

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。
3.x：不兼容IE678，只支持最新的浏览器。

下载链接jQuery官网，下载本地文件，在HTML中引入，就可以使用jQuery提供给我们的接口。

jQuery中文文档：jQuery AP中文文档

jQuery的两种导入方式

直接下载到本地使用（最常用），从本地中导入

<script src="jquery-3.4.1.js"></script>
// src中写入jquery文件的本地路径

使用文件的网络地址，指定src网络路径

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
// src中写入jquery的网络地址

二、jQuery语法基础

1.jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的，如果对象是jQuery对象，就可以使用jQuery中的方法。

jQuery对象和DOM对象的转换

jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

1.通过DOM对象获取jQuery对象

jQuery对象 = $(DOM对象)

2.jQuery对象转换为DOM对象

DOM对象 = jQuery[0]

var domObj = document.getElementById('d1')
// 获取jQuery对象
jqueryObj = $(domObj)

// 获取DOM对象
domObj = jqueryObj[0]

2.jQuery语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

$(this).hide() // 隐藏当前元素
$("p").hide() // 隐藏所有段落
$(".test").hide() // 隐藏所有 class="test" 的所有元素

三、jQuery选择器

1.jQuery选择器

基本选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

标签选择器

$("tagName") //选取标签名为某某的所有元素。

id选择器

$("#demo") //选取所有 id="demo" 的标签。

class选择器

$(".className") //获取所有类名有className的标签

配合使用

$("div.c1")  // 找到有c1 class类的div标签

组合选择器

$("#id, .className, tagName")

层级选择器

x和y可以为任意选择器

$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y"); // 找到所有紧挨在x后面的y
$("x ~ y"); // x之后所有的兄弟y

属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[Attribute]") //选取所有带有 Attribute 属性的元素。
$("[Attribute = value]") //选取所有带有 Attribute 值等于 value 的元素。
$("[Attribute != value]") //选取所有带有 Attribute 值不等于 Attribute 的元素。
$("[Attribute$ = '.jpg']") //选取所有 Attribute 值以 ".jpg" 结尾的元素。

属性选择器多用于input标签

<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签

2.jQuery筛选器

用来对选择器选中的标签进行筛选的条件；

语法结构：$(selector:condition);

基本筛选器

筛选条件：

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

使用实例：

$("div:has(h1)") // 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)") // 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)") // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签

表单筛选器

针对form表单进行筛选的条件。

对表单对象type筛选：

:text 
:password
// 还有file、radio、checkbox、submit、button、reset等等

实例：

$(":checkbox")  // 找到所有的checkbox

对表单对象属性筛选：

:enabled //可以正常使用的标签
:disabled //标签有不可用的属性
:checked //单选和多选框中有默认选择项的标签
:selected //下拉选框中有默认选择项的标签

实例：

$("input:enabled")  // 找到可用的input标签

3.jQuery筛选器方法

经过选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法。

注意是写在对象后面的方法，需要加括号，不再是写在选择器里面的了。

基本筛选方法

等效于基本筛选器效果，只不过筛选器写在选择器里面，而筛选方法在表达式后面调用。

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

向前向后筛选元素

向前和向后筛选都是针对同一级别的元素而言

向后筛选

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它

向前筛选

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

查找父级元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

查找儿子元素

$("#id").children();// 儿子们

查找兄弟元素

$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选

find和filter方法

find方法：

查找所有后代中所有符合指定表达式的元素。找到的是find中的元素

$("div").find("p") //找到所有div后代中的p标签
等价于 $("div p")

filter方法：

筛选，查找所有满足filter中条件的元素。找到的是$(选择器)中满足条件的元素。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从所有的div标签中过滤出有class='c1'属性的div
等价于 $("div.c1")

注意：find和filter的区别，一个是找后代，一个是筛选已找到的元素。

四、jQuery操作DOM

1.jQuery操作标签样式

类名操作

通过添加或删除样式来修改元素的CSS样式

addClass(类名); // 添加指定的CSS类名。
removeClass(类名); // 移除指定的CSS类名。
hasClass(类名); // 判断样式存不存在
toggleClass(类名); // 切换CSS类名，如果有就移除，如果没有就添加。

样式操作

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

语法：$(选择器).css(Attribute,value);

使用实例！

$("p").css("background-color","red"); //把所有 p 元素的背景颜色更改为红色：

jQuery操作标签位置

offset() 方法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

返回第一个匹配元素的偏移坐标。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

//语法
$(selector).offset()

设置偏移坐标

设置所有个匹配元素的偏移位置

//语法
$(selector).offset(value)
value 为自定义对象 值对{top:offset,left:offset}
//实例
$('.c1').offset({top:50,left:50}); //修改.c1标签的位置

使用函数来设置所有匹配元素的偏移坐标

//语法
$(selector).offset(function(index,oldoffset))

参数为函数：

function(index,oldoffset)
// index - 可选。接受选择器的 index 位置
// oldvalue - 可选。接受选择器的当前坐标。

position()方法

position() 方法返回匹配元素相对于父元素的位置（偏移）。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。

此方法只对可见元素有效。

语法

$(selector).position()

实例

$(".btn1").click(function(){
  x=$("p").position();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

scrollTop和scrollLeft方法

获取滚轮滚动位置

$(window).scrollTop();  //获取滚轮向下移动的距离
$(window).scrollLeft();  //获取滚轮向左移动的距离

设置元素滚动位置

$(selector).scrollTop(position) //设置元素向下偏移
$(selector).scrollLeft(position) //设置元素向左偏移

offset()和position()的区别

offset()是相对检索元素相对于文档中的偏移位置；

position()事项对于距离最近的具有位置属性（position:relative或absolute）的父级元素距离，如果找不到则返回相对于浏览器窗口的距离。

jQuery标签尺寸

通过jQuery的一些方法获取标签盒子模型的属性，以及修改盒子模型。

width() //方法设置或返回元素内容的宽度（不包括内边距、边框或外边距）。
height() //方法设置或返回元素内容的高度（不包括内边距、边框或外边距）。
innerWidth() //方法返回元素的宽度（包括内边距，两个padding）。
innerHeight() //方法返回元素的高度（包括内边距，两个padding）。
outerWidth() //方法返回元素的宽度（包括内边距和边框，padding和border）
outerHeight() //方法返回元素的高度（包括内边距和边框）。

2.jQuery操作文本内容和属性

通过jquery方法获取标签的文本内容和属性值。

jQuery文本操作

1.获取标签HTML文本内容，识别标签

jquery对象.html();  // 取得匹配元素的html内容，包含标签
jquery对象.html(val);  // 设置所有匹配元素的html内容，识别标签，并修改html内容为val

使用实例

$("#d1").html("<a href='www.luffycity.com'>路飞学成</a>");

2.获取标签text文本内容，不识别标签

jquery对象.text();  // 取得所有匹配元素的内容，只有文本内容，没有标签
jquery对象.text(val);  // 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去

使用实例

$("#d1").text("<a href='www.luffycity.com'>路飞学成</a>");

jQuery标签的值操作

jQuery val()方法用于获取标签的值，一般用于input标签和select标签中获取值。

注意这里说的值，是自带value属性的标签中value属性对应的值

jquery对象.val();  // 取得第一个匹配元素的当前值
jquery对象.val(val);  // 设置所有匹配元素的值
jquery对象.val([val1, val2]);  // 设置多选的checkbox、多选select的值

使用for循环获取所有匹配对象的值

for (var i=0;i<array.length;i++){console.log(array.eq(i).val())

使用实例

<!--设置多选框-->
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<!--设置多选框-->
<input type="radio" value="1" name="sex">男
<input type="radio" value="2" name="sex">女

<!--设置下拉选择框-->
<select multiple id="s1">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
</select>

查看选中的值

// 获取多选框选中值
$("input[name='sex']:checked").val()
// 获取单选框选中值
$("input[name='hobby']:checked").val()
// 获取下拉框选中值
$("#s1:selected").val()

修改选中项和选中项的值

// 设置单选框哪个被选中 
$("input[name=sex]").val(['1']); //注意使用数组，值需要与标签中的值对应才生效 
// 修改单选框被选中标签的值
$("input[name=hobby]:checked").val('3');

// 设置多选框选中哪些项
$("input[name=hobby]").val(['football']);
$("input[name='hobby']").val(['basketball', 'football']);
// 设置下拉框的值
$("#s1").val(["1", "2","3"])

自动验证登录实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文本操作之登录验证</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>

<form action="">
  <div>
    <label for="input-name">用户名</label>
    <input type="text" id="input-name" name="name">
    <span class="error"></span>
  </div>
  <div>
    <label for="input-password">密码</label>
    <input type="password" id="input-password" name="password">
    <span class="error"></span>
  </div>
  <div>
    <input type="button" id="btn" value="提交">
  </div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  $("#btn").click(function () {
    var username = $("#input-name").val();
    var password = $("#input-password").val();

    if (username.length === 0) {
      $("#input-name").siblings(".error").text("用户名不能为空");
    }
    if (password.length === 0) {
      $("#input-password").siblings(".error").text("密码不能为空");
    }
  })
</script>
</body>
</html>

jQuery属性操作

jQuery attr() 方法

jQuery attr() 方法用于获取元素中属性值,也用于设置/改变属性值。

一般用于标签自带属性或自定义属性操作

获取元素的属性值
jquery对象.attr(attrName);  // 返回第一个匹配元素的属性值，返回对应值/undefined

修改/设置元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({attribute1: value1, attribute2:value2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

prop()方法

一般用于input标签checkbox和radio以及select标签中自带属性的操作。

1.获取元素属性值
prop(attrName);  // 获取某个属性值，返回true/false

2.设置input标签是否被选中
prop('checked',true)

注意：在1.x和2.x版本中的jquery使用attr对checkbox进行赋值会出bug，3.x版本中没有此问题，所以为了兼容性，在处理checkbox和radio属性时，尽量使用prop，不要用attr。

prop和attr的却别

attr全称attribute(属性) ；prop全称property(属性)；

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

举个例子

<input type="checkbox" id="i1" value="1">  针对第一种写法的区别

// 获取属性
$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。

<input type="checkbox" checked id="i1" value="1"> 针对第二种写法的区别

// 获取属性
$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

通过实例可以看到attr的局限性，它的作用范围只限于HTML标签内有没有写这个属性，如果写了获取对应的值，如果没有写，则会获得undifined。

而prop获取的是这个DOM对象的属性，也可以理解为这个dom对象的状态，设置了返回true，没有设置返回false。

小结

对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中

3.jQuery添加和删除元素

添加元素

添加到指定元素内部的结尾

$(A).append(B)// 把B追加到A，A和B都是选择器
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的开始

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素同级的前面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素同级的后面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

jQuery empty() 方法删除被选元素的子元素。

object.empty()// 清空匹配的元素中所有的内容，包括文本和标签，保留自身

jQuery remove() 方法删除被选元素及其子元素。

object.remove()// 从DOM中删除所有匹配的元素。

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

//例子删除 class="italic" 的所有 <p> 元素
$("p").remove(".italic");

替换和克隆

替换方法

selector1.replaceWith(selector2) //用2替换1
selector1.replaceAll(selector2)  //用1替换2，和上述方法想法。

克隆方法

object.clone()  // 复制一个object对象
参数设置为true，带事件克隆
object.clone(true)

克隆使用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
// 设置按钮        
<button class="btn">屠龙宝刀,点击就送</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
	// 为button设置事件，复制自身，带事件
    $('.btn').click(function () {
        var btnClone = $(this).clone(true); //
        $(this).after(btnClone);
    })

</script>
</body>
</html>

五、jQuery事件event

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

定义触发事件写法

$("p").click(function(){
    // 动作触发后执行的代码!!
});

1.jQuery常用事件函数

Event 函数	绑定函数至事件
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）= DOM中的onload
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).blur(function)	失去焦点是触发的事件
$(selector).hover(function)	捕捉鼠标进入标签和离开标签，看后面对hover的详解
$(selector).change(function)	内容发生变化，input，select等
$(selector).keyup(function)	捕捉键盘按键抬起事件
$(selector).keydown(function)	捕捉键盘按下,按住不放一直触发
$(selector).mouseenter(function)	捕捉鼠标进入标签事件，不识别子标签
$(selector).mouseover(function)	捕捉鼠标进入标签事件，识别子标签
$(selector).mouseout(function)	事件捕捉鼠标离开标签事件
$(selector).on('input',function)	输入框内容实时监测变化触发事件

mouseover 和 mouseenter的区别是：

mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发；
mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象；

hover事件：

原生DOM中没有hover事件，jQuery中的hover事件是封装了mouseenter和mouseout两个事件，设置事件时，需要设置两个对应动作，如果只设置了一个，则只会触发mouseenter事件。

hover
	对象.hover(
		function(){}, // 设置鼠标进入动作
		function(){}  // 设置鼠标离开动作
	)

keyup()和keydown()事件

keydown和keyup事件（键盘按键按下和抬起的事件，还有一些其他的key事件）

获取键盘按下的键值：

$(window).keyup(function(ev){
	ev.keyCode;  ev为事件对象,keyCode是获取用户按下了哪个键,数字表示
})

注意keyup和keydown绑定事件是通过window对象来绑定。

2.jQuery绑定和移除事件

事件绑定两种方式

方法一

tag_object.event(function(){执行代码})

方法二

tag_object.on('events' [,selector],function(){执行代码})

events：事件
selector: 选择器（可选的）
function: 事件处理函数

注意：input事件只能用第二种方式绑定

jQuery移除事件(不常用)

off()方法可以移除用 on绑定的事件处理程序

tag_object.off('events' [, selector ][,function(){}])

events：事件
selector: 选择器（可选的）
function: 事件处理函数

$("li").off("click") // 移除li标签的点击事件

3.jQuery冒泡事件和事件委托

冒泡事件现象

事件冒泡

在js中，为父级，点击子元素也会触发所有设置了事件的父级元素的事件，这种现象称为事件冒泡。

现象实例

<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>
    <button id="b1">点我</button>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    // $("#b1").click(function (e) {
    //     alert('子标签');
    // });

    $("div").on('click','#b1',function (e) {
        alert('父标签');
    });

阻止事件冒泡

常见阻止表单提交等，如果input标签里面的值为空就阻止它提交，就可以使用这两种方法：

return false;
e.stopPropagation();

事件委托

事件委托是通过事件冒泡的原理，将点击子标签触发的事件，委托给父级标签，从而达到为后续的子标签自动绑定事件的假象。

注意理解：

事件委托的事件本质是绑定在父级标签中
点击子标签触发了事件，并不是触发的子标签自身的事件，而是父级标签的事件

$("parent").on("events", "son_selector", function () { 
	//事件执行代码
})
// son_selector是个选择器，paretn是父级标签选择器，选择的是父级标签，
// 意思就是将子标签（子子孙孙）的事件委托给了父级标签
// 注意一点，你console.log(this)；你会发现this还是触发事件的那个子标签，这个记住昂

使用实例！

$("table").on("click", ".delete", function () { 
	//事件执行代码
})

4.jQuery页面载入事件

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

为什么使用页面载入

之前学习js时遇到过一个问题，如果我们将js操作标签的代码放在head标签中，标签的定义写在后面的body标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //head中绑定事件
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">
        $('.c1').css('background-color','red')
    </script>
</head>
<body>
//body中定义标签
<div class="c1"></div>
</body>
</html>

这样运行出现一个问题，我们加载页面是从上到下的，当我们加载到js代码时，我们找的c1类标签还不存在，导致js代码的样式改变没有起作用。

DOM中的页面加载事件

window.onload(function(){
	//页面加载完执行的事件
})

DOM页面加载事件的弊端，window.onload函数存在覆盖现象，也就是说一个html中只能存在一个页面加载事件。后面的onload函数会覆盖前面的。

jQuery中页面加载事件

第一种写法

$(document).ready(function(){
// 这里写你的JS代码...
})

写法二：

$(function(){
// 这里写你的代码
})

注意和DOM中的区别：

DOM中是操作window对象中的onload方法，而jQuery中是操作document的jQuery对象的ready方法
window.onload有覆盖现象，必须等待图片加载完才调用
jQuery的ready函数没有覆盖现象，文档加载完就可以调用（推荐使用）

六、jQuery效果和补充

1.jQuery动画效果

jQuery hide() 和 show()

使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

// 语法：
$(selector).hide(speed,callback); 
$(selector).show(speed,callback);

使用实例！

$("#hide").click(function(){
  $("p").hide();
});

jQuery toggle()

使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素。

语法：
$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery Fading 方法

jQuery fadeIn() 淡入已隐藏的元素。
jQuery fadeOut() 方法用于淡出可见元素。
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

参数：

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

jQuery 滑动方法

jQuery slideDown() 方法用于向下滑动元素。
jQuery slideUp() 方法用于向上滑动元素。
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

实例：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

参数：

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

实例：

$("button").click(function(){
  $("div").animate({left:'250px'});
});

提示：

可以用 animate() 方法来操作所有 CSS 属性，但是当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，等等。

2.补充方法

jQuery.each()方法

一个通用的迭代函数，用来无缝迭代对象和数组。

数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

jQuery.each(collection, callback(indexInArray, valueOfElement))

使用实例！

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

selector.each()方法

遍历一个jQuery对象，为每个匹配元素执行一个函数。

selector.each(function(k,v){})  // 其中k是索引，v是DOM对象

.each()方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。

由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字this总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意：

jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。也就是不需要显示的循环.each方法：

$("li").addClass("c1");  // 对所有标签做统一操作

终止each循环

在each方法中，遍历执行的是function函数，所以终止循环需要通过return实现。

return false; //终止循环
return; //终止当次循环

data方法

使用：在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量

data设置值

语法：

jquery对象.data(key, value)

在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

data获取值

jquery对象.data(key); //取值，没有的话返回undefined

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

removeData(key)方法

移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

3.jQuery插件（了解）

给jQuery扩展方法

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

实例！

<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
});
jQuery.min(2,3);// => 2
</script>

给jQuery对象扩展方法

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

posted @ 2019-05-13 10:30 ryxiong728 阅读(187) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

何处繁花笙歌落

路漫漫其修远兮，吾将上下而求索

前端学习—jQuery

一、JQuery简介

1.JQuery是什么？

2.jQuery优点

3.jQuery库内容

4.jQuery安装使用

jQuery版本

jQuery的两种导入方式

二、jQuery语法基础

1.jQuery对象

jQuery对象和DOM对象的转换

2.jQuery语法

三、jQuery选择器

1.jQuery选择器

基本选择器

层级选择器

属性选择器

2.jQuery筛选器

基本筛选器

表单筛选器

3.jQuery筛选器方法

基本筛选方法

向前向后筛选元素

查找父级元素

find和filter方法

四、jQuery操作DOM

1.jQuery操作标签样式

类名操作

样式操作

jQuery操作标签位置

offset() 方法

position()方法

scrollTop和scrollLeft方法

offset()和position()的区别

jQuery标签尺寸

2.jQuery操作文本内容和属性

jQuery文本操作

1.获取标签HTML文本内容，识别标签

2.获取标签text文本内容，不识别标签

jQuery标签的值操作

自动验证登录实例

jQuery属性操作

jQuery attr() 方法

prop()方法

prop和attr的却别

小结

3.jQuery添加和删除元素

添加元素

移除和清空元素

替换和克隆

替换方法

克隆方法

五、jQuery事件event

1.jQuery常用事件函数

mouseover 和 mouseenter的区别是：

hover事件：

keyup()和keydown()事件

2.jQuery绑定和移除事件

事件绑定两种方式

jQuery移除事件(不常用)

3.jQuery冒泡事件和事件委托

冒泡事件现象

事件冒泡

阻止事件冒泡

事件委托

4.jQuery页面载入事件

为什么使用页面载入

DOM中的页面加载事件

jQuery中页面加载事件

六、jQuery效果和补充

1.jQuery动画效果

jQuery hide() 和 show()

jQuery toggle()

jQuery Fading 方法

jQuery 滑动方法

jQuery 动画 - animate() 方法

2.补充方法

jQuery.each()方法