53 前端--jQuery2
Posted yzm1017
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了53 前端--jQuery2相关的知识，希望对你有一定的参考价值。
目录
1. 属性
attr：用于id自带属性等或自定义属性
.attr('属性名':'值',...); // 设置属性
.attr('属性名'); //查看属性
.removeAttr('属性名'); //删除属性prop：用于checkbox和radio
单选框radio：必须定位到具体的标签
.prop('checked'); // 查看标签是否选中，返回true和false
.prop('checked',true); // 选中
.prop('checked',false); // 取消选中
多选框checkbox：
$(":checkbox").prop('checked',true) //全选attr设置给checkbox属性时，没办法取消选中。
总结：
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div>
用户名：<input type="text">
</div>
<div>
密码：<input type="password" name="pwd">
</div>
<div class="d1">
性别：
<input type="radio" name="sex" id="s1" value="1">男
<input type="radio" name="sex" id="s2" value="2">女
</div>
<div>
爱好：
<input type="checkbox" name="hobby" value="3">抽烟
<input type="checkbox" name="hobby" value="4">喝酒
<input type="checkbox" name="hobby" value="5">蹦迪
</div>
</body>
</html>
操作：
$('#d1').attr('age1':'18','age2':'19'); // 添加两个属性
$('#d1').attr('age1'，'18'); // 添加一个属性
$("").prop("checked");
$("#s1").prop("checked"); // 查看 男 是否被选中
$("#s2").prop("checked",true); // 选择 女
$(":checkbox").prop("checked",true) // 爱好 全选
$(":checkbox").prop("checked",true) // 爱好 全取消选中2. 文档处理
添加到指定元素内部（儿子）的后面
$(A).append(B) // 把B追加到A
$(A).appendTo(B)// 把A追加到B方式一：
var a = document.createElement('a');
$(a).text('百度');
$(a).attr('href','http://www.baidu.com');
$("#d1").append(a);
方式二：
$('#d1').append("<a href=''>百度</a>")
// 添加a标签，能够识别标签
方式三：
// var s = `<a href="">$xxx</a>` // 字符串格式化
var s = '<a href="">' + '百度' + '</a>'
$('#d1').append(s)
添加到指定元素内部（儿子）的前面
$(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的前面移除和清空
remove() // 删除所有匹配的元素。
empty() // (清空)删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在替换
$(A).replaceWith(B); //B替换A
$(A).replaceAll(B); //A替换B克隆
.clone(); // 克隆标签，但没有事件效果
.clone(true); // 克隆标签，并且克隆事件克隆示例;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<button class="btn">屠龙宝刀,点击就送!</button>
</body>
<script>
$(".btn").click(function ()
// var bEle=$(this).clone();
var bEle=$(this).clone(true);
$(this).after(bEle);
)
</script>
</html>
3. 事件
事件的绑定
方式一：
$("#d1").click(function ()
$(this).css('background-color','green');
)
方式二：
$("#d1").on('click',function ()
$(this).css('background-color','green');
)事件的删除
.off() 方法移除用 .on()绑定的事件处理程序。
$("li").off("click")常用事件
click(function()...) //鼠标左键点击
hover(function()...) // 鼠标悬浮
blur(function()...) // 失去光标
focus(function()...) // 获取到光标
change(function()...) //内容发生变化，用于select等
keydown/keyup(function()...) //键盘按下/抬起
input // 实时监听输入值input事件，必须用on绑定,多用于搜索，实时监听输入值
$('#cc').on('input',function ()
console.log($(this).val());
)
绑定多个事件 事件名称空格间隔:
$('#xxx').on('input blur',function ()
console.log($(this).val());
)mouseenter事件：鼠标进入标签触发，只触发一次，进入子标签不触发。
mouseout事件：鼠标离开标签触发
hover事件:将上面两个整合成一个事件
不是原生dom的那个hover，并且js里面没有onhover事件，这个是jQuery的hover事件，是jQuery封装的，原生js里面没有
hover事件 鼠标进进出出的事件
$('#d1').hover(
// 鼠标进入
function ()
$(this).css('background-color','green');
,
// 鼠标离开
function ()
$(this).css('background-color','red');
);
mouseover事件：鼠标进入触发，进入子标签也会触发（注意与mousenter）
keydown/keyup 事件：键盘按下/抬起
$(window).keydown(function (e)
console.log(e.keyCode)
) //按下键就会输出一个值
$(window).keyup(function (e)
console.log(e.keyCode)
) //抬起键就会输出一个值
事件冒泡
子标签和父标签（祖标签）绑定了相同的事件。比如点击事件，当点击了标签，会一层一层的往上触发父级或者祖父级的事件。
解决：在子标签function中加：
? return false；
或者： e.stopPropagation();
$('.c1').click(function ()
alert('父级标签!!!');
);
$('.c2').click(function (e)
alert('子标签~~~');
// 阻止事件冒泡(阻止事件发生)
return false; // 方式1
// e.stopPropagation() // 方式2
)
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件（子标签是动态的）。
# 示例：克隆
$("#d1").on('click','.btn',function ()
// $(this)是点击的儿子标签
var a=$(this).clone();
$("#d1").append(a);
)
// 将儿子.btn 的事件委托给父级#d1，
4. 页面载入
1. window.onload事件
将script放在html的head部分：onload 等待页面内容全部加载完之后自动触发事件,多个onload存在覆盖现象
window.onload = function()
$("").click(function ()
);
2. jQuery载入事件
? jQuery页面加载完成之后执行。
$(document).ready(function()
// 在这里写JS代码...
)
简写：
$(function ()
$("").click(function ()
);
)
与window.onload的区别:
1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
window.onload = function ()
$(".c1").click(function()
$(this).addClass("cc")
)
;
// window.onload = function ()
// $(".c1").click(function()
// $(this).addClass("c2")
// )
//
$(function ()
$(".c2").click(function()
$(this).addClass("cc")
)
);
</script>
<style>
.c1
width: 200px;
height:200px;
background-color:red;
.c2
width: 200px;
height: 200px;
background-color: green;
.cc
width: 200px;
height: 200px;
background-color: blue;
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
5. each
? 一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
$----->jQuery.each
# 循环数组： k是索引位置，v是数据
$.each(数组，function (k,v)
console.log(k,v)
)
# 循环标签：v是Dom标签
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
$("li").each(function (k,v)
console.log(k,v) // 取标签
console.log(k,$(v).text()) // 取标签文本
)
终止each循环：
return false；
注意：
在遍历过程中可以使用 return false提前结束each循环。
而直接使用return;后面什么都不加，不写false，就是跳过本次循环。
数组示例：
var a = [1,3,5,7,9];
$.each(a,function (k,v)
console.log(k,v)
);
/*
0 1
1 3
2 5
3 7
4 9
*/
标签示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>each</title>
</head>
<body>
<div>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</html>
操作：
$("li").each(function (k,v)
console.log(k,v)
); // 查看所有的li标签
$("li").each(function (k,v)
console.log(k,$(v).text())
) // 查看所有的li标签的文本内容
6. 动画效果
.show(3000) // 3s后显示标签
.hide(2000) // 2s后隐藏标签
.toggle(3000) // 以前什么效果，反着来
.slideDown(2000) // 向下滑动
.slideUp(2000) // 向上滑动隐藏
.slideToggle()
// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]]) o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])
// 自定义
animate(p,[s],[e],[fn])
$("div").hide(3000,function ()
alert("执行完毕");
) // 执行完动画后，执行回调函数
7. data()
? 任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量
? 匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value): 设置值
? 描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key): 取值，没有的话返回undefined
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
8. 插件
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
简写：$.extend()
其他标签不能用，
$.extend(
min:function (a,b) return a < b ? a : b;,
max:function (a,b) return a < v ? a:b;
)
$.min(2,5) // 2
$.fn.extend() # 都可以用
$.fn.extend(
min:function (a,b) return a < b ? a : b;,
max:function (a,b) return a < v ? a:b;
)
$("#d1").max(2,5) // 5
以上是关于53 前端--jQuery2的主要内容，如果未能解决你的问题，请参考以下文章