jQuery
一、理解
jQuery 是 js 的一个轻量级框架
jQuery 就是将 js 常用的功能 封装成了函数(函数库)
jQuery 写了少量的代码 实现的更多功能
jQuery 拥有便捷的扩展机制和丰富的插件
jQuery
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
二、使用
1、下载函数库 https://jquery.com/ jquery.js文件
2、将js文件引入项目中
3、引入函数库到页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<body>
<h2 id="h2">
内容
</h2>
<script>
// js获取
var h2 = document.getElementById("h2");
console.log(h2.innerHTML);
// jq获取
console.log($("#h2").html());
</script>
</body>
</html>
三、核心语法
API文档:https://jquery.cuishifeng.cn/
1、$( ) jquery的核心函数 根据任意选择器获取对应的标签
2、原生的js的window.onload = function ( ){ } 封装成了 $(function( ){ })
1、js中的window.onload只能出现一次 否则就会覆盖
2、封装后的$(function( ){ }) 可以出现多次 并且一次执行
3、原生js对象和jquery对象
1、原生js对象只能调用自己的函数和属性 jquery只能调用自己的函数和属性
2、原生js对象和jquery对象的相互转换
1、js对象转换成jquery对象 $(原生的js对象) 返回一个jquery对象
2、jquery对象转换成js对象
jquery对象[0] 或者 jquery对象.get(0)
特点:【jQuery本质上是一组js对象】
<body>
<h3 id="h3">命运</h3>
<h3 id="h4">生存</h3>
<script>
// 【window.onload只能出现一次、后出现的会把之前的覆盖掉】
// window.onload = function(){
// var h3 = document.getElementById("h3");
// console.log(h3);
// }
// jq封装后的函数,可以出现多次
$(function(){
// 原生获取标签 【原生的js对象只能调取js的属性和函数】
var h3 = document.getElementById("h3");
console.log(h3.innerHTML);
// 将原生js转换成jq对象
console.log($(h3).html());
// jq获取标签 【jq对象只能调用 jq对象】
console.log($("#h3").html());
// 将jq对象装换成js对象
console.log($("#h3")[0].innerHTML);
console.log($("#h3").get(0).innerHTML);
// 总结:【jq对象 就是 一组 js对象--jq对象是js对象的数组】
})
$(function(){
var h4 = document.getElementById("h4");
console.log(h4);
})
</script>
</body>
四、常见函数
4.1、选择器
定位到具体的标签 在css选择器的基础上 丰富了一系列的选择器 更加方便简洁的获取标签
分类:基本选择器、层级选择器、基本筛选器、属性选择器、其他选择器
4.1.1、基本选择器
<body>
<p id="p1">命运呐</p>
<p class="p2">生存呐</p>
<p>信仰呐</p>
<p>生活呐</p>
<h2>李白</h2>
<script>
// 整个页面加载完毕之后执行 该函数
$(function(){
//1、 基本:id选择器 【#id值】
console.log($("#p1").html());
//2、 基本:类选择器 【.(class值)】
console.log($(".p2").html());
//3、 基本:标签名
console.log($("h2").html());
// 4、基本:组合
$("h2,#p1,.p2").css("color","pink");
})
</script>
</body>
4.1.2、层级选择器
<body>
<ul>
<li>仙儿</li>
<li>命运</li>
<li>玫瑰</li>
<li>鸽子</li>
<b>
<li>安河桥</li>
</b>
</ul>
<li>斑马</li>
<li>再见</li>
<p>我不是兄弟标签</p>
<script>
// 整个页面加载完毕之后执行 该函数
$(function(){
// 【操作1】ul li 空格指ul中所有的后代li
$("ul li").css("color","red");
// 【操作2】ul > li 指匹配ul中的第一代子标签
$("ul > li").css("color","blue");
// 【操作3】ul + li 匹配ul后面【紧挨着的第一个兄弟标签li】
$("ul + li").css("color","green");
// 【操作4】ul ~ li 匹配ul后面【所有的兄弟标签li】
$("ul ~ li").css("color","yellow");
})
</script>
</body>
4.1.2、基本筛选器
<script>
// :first 匹配第一个元素
$("ul li:first").css("color","red");
// :last 匹配最后一个元素
$("ul li:last").css("color","pink");
</script>
<script>
// :odd 只匹配奇数索引,从0索引开始
$("ul li:odd").css("color","pink");
// :even 匹配偶数索引,从0索引开始
$("ul li:even").css("color","blue");
</script>
<script>
// :eq(index) 匹配索引值为index的元素
$("ul li:eq(2)").css("color","red");
</script>
<script>
// lt(index) 匹配索引值小于index的元素
$("ul li:lt(2)").css("color","pink");
// gt(index) 匹配索引值大于index的元素
$("ul li:gt(2)").css("color","yellow");
</script>
<body>
<table border="2" cellspacing="0" width="400px" height="50px" align="center">
<caption>学生表</caption>
<tr align="center">
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr align="center">
<td>1000</td>
<td>王五</td>
<td colspan="2">男</td>
<!-- <td></td> -->
</tr>
<tr align="center">
<td>1001</td>
<td>张三</td>
<td>男</td>
<td rowspan="2">打篮球</td>
</tr>
<tr align="center">
<td>1002</td>
<td>李四</td>
<td>女</td>
<!-- <td>跑步</td> -->
</tr>
</table>
</body>
<script>
//隔行换算
$("table tr:gt(0):odd").css("background-color","red");
$("table tr:gt(0):even").css("background-color","red");
</script>
4.1.3、属性选择器
<body>
<ul>
<li class="li1">仙儿</li>
<li>命运</li>
<li class="li3">玫瑰</li>
<li>鸽子</li>
<b>
<li>安河桥</li>
</b>
</ul>
</body>
<script>
//[sttribute] 匹配包含某个属性的元素
$("ul li[class]").css("color","red");
</script>
<body>
<ul>
<li class="li1">仙儿</li>
<li>命运</li>
<li class="li3">玫瑰</li>
<li>鸽子</li>
<b>
<li>安河桥</li>
</b>
</ul>
</body>
<script>
//[sttribute=value] 匹配【包含】某个属性和属性值的元素
$("ul li[class=li1]").css("color","red");
//[sttribute!=value] 匹配【除了】某个属性和属性值的元素
$("ul li[class!=li1]").css("color","yellow");
</script>
<body>
<ul>
<li class="li1">仙儿</li>
<li>命运</li>
<li class="li3">玫瑰</li>
<li>鸽子</li>
<b>
<li>安河桥</li>
</b>
</ul>
</body>
<script>
//[sttribute^=value] 匹配某个属性和属性值【开头】的元素
$("ul li[class^=l]").css("color","red");
//[sttribute$=value] 匹配某个属性和属性值【结尾】的元素
$("ul li[class$=3]").css("color","blue");
</script>
<body>
<ul>
<li class="li1">仙儿</li>
<li>命运</li>
<li class="li3">玫瑰</li>
<li>鸽子</li>
<b>
<li>安河桥</li>
</b>
</ul>
</body>
<script>
//[sttribute*=value] 匹配【包含】某个属性和属性值的元素
$("ul li[class*=i]").css("color","yellow");
</script>
<body>
<ul>
<li class="li1">仙儿</li>
<li>命运</li>
<li class="li3">玫瑰</li>
<li>鸽子</li>
<b>
<li>安河桥</li>
</b>
</ul>
</body>
<script>
//=====================子元素===============================
//匹配到ul下第一个元素
$("ul li:first-child").css("color","yellow");
//匹配到ul下最后一个元素
$("ul li:last-child").css("color","yellow");
// 匹配到ul下指定元素
$("ul li:nth-child(3)").css("color","blue");
</script>
4.1.4、其他选择器
API:https://jquery.cuishifeng.cn/
4.2、操作函数
4.2.1、属性操作 attr
attr 和 prop
1:attr(参数) 获取元素的属性值
2:attr(参数1,参数2) 设置元素属性值
3:attr({ }) 设置多个属性值
attr 和 prop 的区别
1、设置属性值 prop不写单位
2、prop获取checked属性 返回的是true或者false 而 attr返回的是checked或者undefined,因此prop方便做判断处理
<body>
<div id="d1" name="xx">
<p> 莎士比亚</p>
</div>
<input type="radio" name="sex" value="男" id="">
<script>
$(function(){
// =============== attr ===================================
// 1、设置属性
// 【操作1】attr() 一个参数:获取属性值
console.log($("#d1").attr("id"));
// 【操作2】2、attr() 两个参数:设置属性值
$("#d1").attr("class","xxx") ;
// 【操作3】3、attr() 多个参数:设置多个属性
$("#d1").attr({"width":"200px","height":"100px"}) ;
})
</script>
</body>
4.2.1、属性操作 prop
prop() 一个参数:获取有意义的属性值
prop() 两个参数:设置属性值
<body>
<div id="d1" name="xx">
<p> 莎士比亚</p>
</div>
<input type="radio" name="sex" value="男" id="">
<script>
$(function(){
// =============== prop ===================================
// 【操作1】1、prop() 一个参数:获取有意义的属性值
console.log($("#d1").prop("name"));
//复选框没选中返回false 选中了是true
console.log($("input").prop("checked"));
// 【操作2】2、prop() 两个参数:设置属性值
$("#d1").prop("class","dd");
})
</script>
</body>
4.2.3、内容操作:
html(参数) 如果无参 就是获取双边标签的内容,如果有参 设置标签内容
text(参数) 如果无参 就是获取双边标签的文本内容 如果有参 设置标签内容
val(参数) 如果无参 就是获取input的内容 如果有参 设置标签内容
<body>
<div id="d1" name="xx">
<p> 莎士比亚</p>
</div>
<input type="radio" checked name="sex" value="男" id="">
<script>
$(function(){
// =============== 内容操作 =======================================
console.log($("#d1").html()); //相当于innerHTML
console.log($("#d1").text()); //相当于innerText
console.log($("input").val()); //相当于value
console.log($("input").val("aaa")); //也可以设置value
})
</script>
</body>
4.2.4、样式操作:
css(参数) 获取标签元素的样式值
css(样式名,样式值) 设置标签的一个样式
css({样式名:样式值,样式名:样式值……}) 设置表的多个样式
<body>
<div id="d1">
哎呀我说命运呐
</div>
<script>
$(function(){
// 1、获取标签 设置标签
// css("样式名", "样式值"); 设置一个样式
$("#d1").css("color","red");
//css("样式名"); 获取样式的值
console.log($("#d1").css("color","width")
)
// css({"样式名": "样式值", "样式名": "样式值"...}); 设置多个样式
$("#d1").css({"width":"200px","height":"200px","border":"1px solid red"})
})
</script>
</body>
将js的事件名 除去 on 封装成一时间名为函数名的函数
<body>
<button id="btn" onclick="">
点击
</button>
<script>
$(function(){
// 原生js
// document.getElementById("btn").onclick = function(){
// alert("原生js事件")
// }
// jq
// $("#btn").click(function(){
// alert("jq事件")
// })
$("#btn").dblclick(function(){
alert("jq双击事件")
})
})
</script>
</body>
4.2.6、文档处理
内部追加:一般是往子标签同级插入
append prepend
appendTo prependTo
原图
<body>
<p>包裹1</p>
<p id="p2">包裹2</p>
<h3>喜欢的游戏:</h3>
<ul>
<li>LOL</li>
<li id="cs">csgo</li>
<li>吃鸡</li>
<li id="xxx">插入元素</li>
</ul>
<li id="xx">李白</li>
<script>
// 1.1 内部追加--在后面追加(后面匹配的追加到前面匹配的)
$("ul").append("<li>追加到后面</li>");
// 1.2 prepend 追加到内部的前面
$("ul").prepend("<li>追加到前面</li>")
</script>
</body>
<body>
<p>包裹1</p>
<p id="p2">包裹2</p>
<h3>喜欢的游戏:</h3>
<ul>
<li>LOL</li>
<li id="cs">csgo</li>
<li>吃鸡</li>
<li id="xxx">插入元素</li>
</ul>
<li id="xx">李白</li>
<script>
// 1.3 前面匹配的元素追加到后面匹配的元素中【追加到后面内部的后面】
$("ul").appendTo($("#xx"));
// 1.4 前面匹配的元素追加到后面匹配的元素中【追加到后面内部的前面】
$("ul").prependTo($("#xx"));
</script>
</body>
外部插入:
1、after 将【后面】匹配到的元素 放到 前面匹配的元素 【后面】
2、before 将【后面】匹配到的元素 放到 前面匹配的元素 【前面】
3、insertAfter 将【前面】匹配到的元素 放到 后面匹配的元素 【后面】
4、insertBefore 将【前面】匹配到的元素 放到 后面匹配的元素 【前面】
<script>
// 1.after 将【后面】匹配到的元素 放到 前面匹配的元素 【后面】
$("ul #cs").after($("#xx"));
</script>
<script>
// 2.before 将【后面】匹配到的元素 放到 前面匹配的元素 【前面】
$("ul #cs").before($("#xx"));
</script>
<script>
// 3.insertAfter 将【前面】匹配到的元素 放到 后面匹配的元素 【后面】
$("ul #cs").insertAfter($("#xx"));
</script>
<script>
// 4.insertBefore 将【前面】匹配到的元素 放到 后面匹配的元素 【前面】
$("ul #cs").insertBefore($("#xx"));
</script>
包裹:
1、wrap 【后面匹配的元素】包裹 【前面】匹配到的元素
2、wrapAll 【后面匹配的元素】 包裹 【前面】匹配到的元素放到一起
<script>
// 1、wrap 将【前面】匹配到的元素 外边包裹 【后面匹配的元素】
$("p").wrap("<b></b>");
</script>
<script>
// 2、wrapAll 将【前面】匹配到的元素放到一起 然后外边包裹【后面匹配的元素】
$("p").wrapAll("<b></b>");
</script>
<script>
// 3、wrapInner 将【前面】匹配到的元素 【内部】包裹后面匹配的元素
$("p").wrapInner("<b></b>");
</script>
替换
.replaceWith :【后面】匹配的 替换 前面的
.replaceAll: 【后面】匹配的 替换 前面的
<script>
// 1、【后面】匹配的 替换 前面的
$("ul").replaceWith("<b></b>");
</script>
<script>
// 2、【前面】匹配的 替换 后面的
$("<b></b>").replaceAll($("p"));
</script>
删除 和 复制
1、empty :清空标签后的内容
2、remove :删除该标签
3、clone : 克隆该标签
<script>
// 1、empty 清空标签后的内容
$("#cs").empty();
</script>
<script>
// 2、remove 删除该标签
$("#xx").remove();
</script>
<script>
// 1、clone 克隆该标签
$("#p2").clone().insertAfter($("#p2"));
</script>
4.2.7、jQuery的遍历
格式:
$.each(要遍历的jquery对象).function(每一个索引,每一个js对象) { } )
要遍历的jquery对象.each(function(每一个索引,每一个js对象) { } )
<body>
<h2>内容1</h2>
<h2>内容2</h2>
<h2>内容3</h2>
<script>
$(function(){
// 1、获取标签中的内容
// console.log($("h2").html());
// 遍历 jq对象 .each(function(index,ele))
$("h2").each(function(index,ele){
console.log(index,ele.innerHTML);
})
console.log("=============================")
// $.each函数
$.each($("h2"),function(index,ele){
console.log(index,ele.innerHTML);
});
})
</script>
</body>