前端—JQuery
目录
1、JQuery介绍
JQuery是js的一个库，将常用的一些复杂功能封装到简单的方法中，大大提高了开发效率
1、js的问题
- window.onload事件只能出现一次，如果出现多次，后续的事件会覆盖掉前面的事件
- 代码容错性能差，报错后，会影响后续代码执行
- 浏览器兼容性问题
- 简单功能实现繁琐
2、JQuery的特点
- 链式编程，可以一致使用对象.属性的方式链接下去，jQuery对象的方法都将jQuery对象本身返回来，所以可以继续使用对象方法
- 隐式迭代：在方法的内部进行循环遍历，不用我们自己在进行循环
2、JQuery的入口函数和$符号
1、原生js的入口函数是：window.onload = function() {}，要等待所有的文档和图片都加载完毕，才会执行
2、JQuery的入口函数
// 1、文档加载完毕，图片不加载的时候
$(document).ready(function () {
// JS代码
alert('迪迦来袭')
})
// 2、写法1的简介版本
$(function () {
// JS代码
alert("迪迦牛逼")
})
// 3、文档、图片都加载完毕
$(window).ready(function () {
// JS代码
alert("迪迦死了")
})
3、JQuery入口函数与js入口函数的区别：
- 书写个数不同
- js入口函数只出现一次，多次出现会存在事件覆盖
- JQuery入口函数，可以出现多次，不会覆盖
- 执行时机不同
- js：所有文件资源加载完成，包括页面文档，外部的js文件、css文件、图片等
- JQuery：文档加载完成，即DOM树加载完成，不用等外部资源
3、JQuery对象
1、通过jQuery获取的元素是一个jq对象数组，其中包含着原生JS中的DOM对象：jQuery(selector)
2、使用$代替jQuery
<div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<!--JS获取元素节点-->
<script>
var myBox = document.getElementById("app");
var boxArr = document.getElementsByClassName("box");
var divArr = document.getElementByTagName("div");
</script>
<!--通过jQuery获取元素节点-->
<script>
var myBox = $("#app")[0];
var boxArr = $(".box")
var divArr = $("div")
</script>
3、jq对象与原生js对象的转换
// jQuery对象转为DOM对象
jquery对象[index]; // 推荐使用此方法
jquery对象.get(index);
//DOM对象转换为jQuery对象
$(js对象)
4、jq对象不能使用js对象功能，js对象不能使用jq对象的功能
4、选择器
4.1 基本选择器
1、基本选择器
// 同css选择器
$("#id") // id选择器
$(".class") // 类选择器
$("tagName") // 标签选择器
$("*") // 通用选择器
4.2 层级选择器
// 同css选择器
$("tagName1 tagName2"); // 后代选择器
$("tagName1 > tagName2");
$("tagName1 + tagName2");
$("tagName1 ~ tagName2");
$("tagName1,tagName1");
$("tagName1.tagName1");
4.3 属性选择器
// 同css选择器
$("[href]"); // 所有含有href属性的标签
$("a[href]"); // 所有含href的a标签
$("a[title='baidu']"); // 所有title为baidu的a标签
$("a[title!='baidu']"); // 所有title不为baidu的a标签
$("a[href^='https']"); // 所有、https开头、a标签
$("a[href$='html']"); // 所有、html结尾、a标签
$("a[href*='i']"); // 所有、href中含有i、a标签
$("a[href][title='baidu']"); // 所有、含有href、title为baidu、a标签
5、筛选器
5.1 基本筛选器
/*
在属性选择器后书写，如：
$("div:first")
*/
:first // 第一个
:last // 最后一个
:eq(index) // 索引等于index的元素
:even // 匹配所有索引值为偶数的元素，从0开始
:odd // 匹配所有索引值为奇数的元素，从0开始
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足not条件的标签
:has(元素选择器) // 根据含有某个后代筛选
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<title>JQuery测试</title>
</head>
<body>
<div>
<ol type="none">
<li>迪迦来袭</li>
<li>迪迦变身</li>
<li>迪迦暴走</li>
<li>迪迦瓦特了</li>
<li>迪迦复活了</li>
<li class="h1">迪迦溜了</li>
</ol>
</div>
<div></div>
<script>
hasOlEleList = $("div:has('ol')");
firstLiEle = $("li:first")[0];
index5Ele = $("li:eq(5)")[0];
oddEleList = $("li:odd");
ltEleList = $("li:lt(3)");
</script>
</body>
</html>
5.2 表单筛选器
根据表单属性，分为不同的筛选器
1、type筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
2、其他属性筛选器
:enable
:disable
:checked
:selected
5.3 筛选器方法
1、找嵌套关系的标签
// 找兄弟标签 siblings
$("#id").siblings() // 不包含自己
// 找弟弟标签 next
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") // 知道找到id为i2的标签结束并且不包含它
// 找哥哥标签 prev
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
// 找祖辈标签 parent
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil("body")
// 找儿子
$("#id").children();
2、筛选\过滤匹配结果
$("div").first() // 获取匹配的第一个元素
$("div").last()
$("div").eq(index)
$("div").not() // 删除与指定表达式匹配的元素
$("div").has() // 保留包含特定后代的元素，去掉其他的
$("div").find("p") // 在所有div标签中找后代的p标签
$("div").filter(".c1") // 过滤出有c1样式的
5.4 示例：左侧菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单栏示例</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.left {
width: 30%;
height: 100%;
border: 5px black solid;
background-color: darkgrey;
}
.right {
width: 70%;
height: 100%;
border: 5px black solid;
background-color: cadetblue;
}
.item {
font-size: 24px;
color: black;
text-align: center;
}
.title {
font-size: 18px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="item">章节1
<p class="title hide">标题一</p>
<p class="title hide">标题二</p>
<p class="title hide">标题三</p>
</div>
<div class="item">章节2
<p class="title hide">标题一</p>
<p class="title hide">标题二</p>
<p class="title hide">标题三</p>
</div>
<div class="item">章节3
<p class="title hide">标题一</p>
<p class="title hide">标题二</p>
<p class="title hide">标题三</p>
</div>
</div>
<script>
$('.item').click(function () {
console.log($(this));
$(this).children().removeClass('hide').parent().siblings().children().addClass('hide');
})
</script>
<div class="right"></div>
</body>
</html>
6、操作标签
6.1 样式操作
1、样式类的添加删除
addClass(); // 添加指定的css类名
removeClass(); // 移除指定的css类名
hasClass(); // 判断样式存不存在
toggleClass(); // 切换css类名，如果有就移除，没有就添加
2、CSS控制样式
css("属性","属性值")
// 如：将所有的p标签字体设置为红色
$("p").css("color","red");
6.2 位置操作(滚动条，当前位置等)
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动元素条左侧的偏移
6.3 盒子属性
/*
1、获取值
2、括号中填参数，即为设置值
*/
// 内容的宽高
.height()
.width()
// 内部宽高，可用于内容、padding
.innerHeight()
.innerWidth()
//外部宽高，可用于内容、padding、boder
.outerHeight()
.outerWidth()
6.4 文本操作
1、HTML代码
html() // 取得第一个匹配元素的html内容
html(val) // 设置所有匹配元素的html内容
2、文本值
text() // 取得所有匹配元素的内容
text(val) // 取得所有匹配元素的内容
3、值
val() // 取得第一个匹配元素当前的value属性值
val(val) // 设置所有的匹配元素得值
val(val1,val2) // 设置多选的checkbox、多选selected的值
6.5 属性操作
1、id等属性，包括自定义属性
attr('attrName') // 返回一个匹配元素的属性值
attr('attrName','attrValue') // 为所有匹配元素设置一个属性值
attr({k1:v1, k2:v2}) // 为所有匹配元素设置多个属性值
removeAttr('attrName') // 从每一个匹配的元素中删除一个属性
removeAttr('attrName1,attrName2') // 删除多个
2、checkebox和radio
// 选择文本的设置操作，要用prop方法才能同步更新，attr方法不行
$(selector).prop(property) // 获取属性
$(selector).prop(property,value) // 设置属性值
$(selector).prop({property:value,property:value}) // 设置多个值
$(selector).prop('checked',false) // 设置取消选中，用删除方法没有用
6.6 文档处理(文档标签操作)
1、插入标签
// 1、追加子元素：append和appendTo
父元素.append(子元素) // 子元素可以是：string/element(js对象)/jq元素
子元素.appendTo(父元素)
注意点：如果追加的jq对象原本在文档树中，那么这些元素将从原位置消失，即此时的追加是一个移动操作
// 2、前置添加子元素：prepend和prependTo
// 添加到父元素的第一个位置
父元素.prepend(子元素);
子元素.prependTo(父元素);
// 3、后面添加兄弟元素：after和insertAfter
兄弟元素.after(要插入的兄弟元素);
要插入的兄弟元素.insertAfter(兄弟元素);
// 4、前面添加兄弟元素：before和insertBefore
兄弟元素.before(要插入的兄弟元素);
要插入的兄弟元素.insertBefore(兄弟元素);
2、删除标签
/*
remove:删除节点后，事件也会删除
detach:删除系欸但后，事件会保留
empty:清空选中元素的所有后代节点,不保留事件
*/
$(selector).remove();
$(selector).detach();
$(selector).empty();
3、修改标签
/*
1、两种方法作用相同
2、参数位置不同
3、selector为选中的元素，content为用来替换的内容
*/
$(selector).replaceWith(content);
$(content).replaceAll(selector);
4、克隆标签
/*
1、方法：clone(0)
2、语法：$(selector).clone();
3、clone() 克隆匹配的DOM元素
4、clone(true) 克隆元素及其所有的事件
*/
// 实例：
$('button').onclick(function() {
$(this).clone(true).insertAfter(this)
})
7、事件
7.1 常用事件
click(function(){})
hover(function(){})
blur(function(){})
focus(function(){})
change(function(){})
keyup(function(){})
keydown(function(){})
/*
注意：
1、DOM定义了的事件，可以使用.on()方法绑定
2、hover等在jQuery中定义的事件不能用.on()方法绑定
3、jQuery中定义的事件，可以通过事件委托的方式处理
*/
7.2 事件绑定
// 方法1
$(selector).事件名.function () {}
// 方法2 推荐使用，与事件委托的语法相似
$(selector).on("事件名",function () {})
7.3 移除事件
语法：.off(event [.selector][.function(){}])
off方法移除用.on()绑定的事件处理程序
7.4 阻止后续事件的执行
方法：
return false; // 常见于组织表单提交
e.preventDefault(); // 绑定事件时设置
语法：
$(selector).genent(function (e) {
// 事件程序
e.preventDefault(); // 阻止后续事件的执行
});
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action="">
<button id="b1">点我</button>
</form>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
</body>
</html>
7.5 阻止事件冒泡
事件冒泡：指的是在触发一个事件时，该事件源所处的父标签中的相同事件也会触发，看起来就像是，同一种事件一个接一个的自动触发了
阻止方法：
return false;
e.stopPropagation() // 绑定事件时设置
语法：
$(selector).genent(function (e) {
// 事件程序
e.stopPropagation(); // 阻止事件冒泡
});
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>我是body，点我
<div>我是div，点我
<p>我是p点我
<span>我是span，点我</span>
</p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$("span").click(function (e) {
alert("span");
// e.stopPropagation();
return false
});
$("p").click(function () {
alert("p");
// e.stopPropagation();
return false
});
$("div").click(function () {
alert("div");
// e.stopPropagation();
return false
})
</script>
</body>
</html>
7.6 事件委托
事件委托是通过事件冒泡的原理，利用父标签捕获子标签的事件
// 语法
$(selector).on("事件名",selector,function () {})
示例：
表格中的每一行的编辑和删除都能触发相应的事件
$("table").on("click", ".delete",function() {
// 单击、删除按钮的绑定事件JS代码
})
8、动画效果
// 显示 .show();
$(selector).show(); // 直接显示
$(selector).show(3000); // 多长时间内逐渐显示（放大过程）
$(selector).show("slow"); // （透明度变化）slow:600ms，normal:400ms，fast:200ms
$(selector).show(毫秒值,回到函数); // 执行完成时执行函数
// 例：
$('div').show(5000,function () {alert('动画执行完毕')})
// 隐藏 .hide();
// 方法同show
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000,function () {});
// .toggle()
$(selector).toggle(毫秒时间,function())
// 例：开关式显示隐藏动画
$('#box').toggle(3000,function () {});
// 滑入动画
$(selector).slideDown(毫秒值, 回调函数);
// 滑出动画
$(selector).slideUp(毫秒值, 回调函数);
// 滑入滑出切换
$(selector).slideToggle(毫秒值, 回调函数)
// 淡入淡出
// 展示
$(selector).fadeIn(毫秒值, callback);
// 隐藏
$(selector).fadeOut(毫秒值);
// 切换
$(selector).fadToggle('fast', 回调函数);
// 自定义
$(selector).animate({params}, 毫秒值, 回调函数)
// 停止
$(selector).stop(true,false)
/*
第一个参数：
true：后续动画不执行。
false：后续动画会执行。
第二个参数：
true：立即执行完成当前动画。
false：立即停止当前动画。
*/
