JQ
远程导入
<script src="网络地址">
本地导入
<script src="文件地址">jQuery与dom的关系
jQuery的语法
1.$(id class).方法()
$(id class) 查找标签 相当于实例化一个对象
2.jQuery("id class 标签名").方法
例如：
将标签的文本变换颜色
jQuery(".c1 ").css("color","red")
$(".c1 ").css("color","red")
<div>123</div>
dom与jq对象的转换
dom对象：
找到标签ele就是一个dom对象
ele = document.querySelector(".c1")
jq对象：
$(".c1") 这就是一个jq对象
jq对象 是一个集合数组对象内部放着dom的元素[dom1,dom2....]
jq对象转换为dom对象
$(".c1")[0] 因为是一个集合数组 取元素，每一个元素就是一个dom 结果：dom1
dom转换为js
$(ele) 转换为dom对象 结果 [dom1]
不论内部有多少个元素，1...100只要在转换后都是dom对象jQuery的选择器
1.类选择器
$(".c1")
2.id选择器
$("#i1")
3.标签名选择器
/$("div")
4.通配选择器 全部
$("*")
5.组合标签，可以选择多个，只要符合条件就可以，里面可以有id，class，标签名（）
$("#li,p")
6.后代选择器 定位到 标签的孙子
$(".c1 .c2 ul li")
7.子代选择器 只确定父级标签下面的子级标签
$(".c2 > ul")
8.属性选择器 选择标签内的特有属性
$(".z1z [href]")
9.属性选择器 中的正则内容 后面的选择内容必须要用单引号
$(".z1z [href$='peg']")
10表单选择器 选择属性，和属性值
$("[type ='text']")
$(":text") 简写
div class="c1">
<div class="c2">
<ul>
<li>1</li>
</ul>
</div>
</div>
</div>
<input type="text">
<input type="password">
</body>
<div class="z1z" >
<a href="1.peg">1</a>
<a href="">2</a>
<a href="">3</a>
</div>jQuery的筛选器
准却的找到多个标签的其中一个
在一堆dom对象向中，选中想要变化的dom对象，使用筛选器进行筛选。
这种在内部属于字符串
1.找到标签的第一个
$(".c1 li:first")
2.找到标签的最后一个
$(".c1 li:last")
3.按照索引找到标签
$(".c1 li:eq(2)")
4.找到索引大于相应
$(".c1 li:gt(2)")
5.找到索引小于相应
$(".c1 li:lt(2)")
6.根据索引偶数
$(".c1 li:even")
7.根据索引奇数
$(".c1 li:odd")
8.写法不同，根据变量（推荐）
var index=2 定义变量 在外部就是数字2
$(".c1 li").eq(index) 在找到定义变量相对应的标签
<ul class="c1">
<li class="c2">11</li>
<li>122</li>
<li>33</li>
<li>44</li>
<li>551</li>
<li>66</li>
</ul>
jQuery的的导航查找
1.查看子代标签
children()不加条件就是将全部的子代标签找出来，加上条件就是指定那个标签
$(".c1").children("p")
$(".c1").children()
2.找下一个兄弟标签
$(".c5").next()
3.找下一个所有的兄弟
$(".c5").nextAll()
4.找上一个兄弟
$(".c5").prev()
5.找上一个所有的兄弟
$(".c5").prevAll()
6.找范围内的兄弟
$(".c5").prevUntil()
7.找除了自己以外的全部兄弟
$(".c5").siblings()
8.找标签的父级
$(".c3").parent()
9.父级的父级
$(".c3").parent().parent()
<div class="c1">
<div class="c2">
<div class="c3"></div>
<p>p1</p>
</div>
<p>p2</p>
</div>
<ul class="c4">
<li>1</li>
<li class="c5">2</li>
<li>3</li>
<li>4</li>
<li id="i1">5</li>
</ul>jQuery的绑定事件普通
三中用法
1.on绑定事件 （动态绑定参数）
on 和off
$(“写入标签的父级”).on("事件名 click",匿名函数(){
事件代码
})
取消事件
$().off("事件名")
2.bind绑定事件
$(“锁定的标签”).bind("事件名：click" ,function () {
事件代码
}
取消事件
$().off("事件名")
3.$(“锁定的标签”).click（function(){
事件函数
this代表当前绑定事件的标签
$(this)就是当前标签的 转换为jquery对象
}）
取消事件
$().off("事件名")
jQuery的绑定事件其他
1.ready和hover事件
鼠标悬浮和离开的事件，在悬浮时发生，在离开时发生
hover鼠标绑定事件，离开和悬浮的发生的事件
$(".c1").hover(over,out)
两个函数
function over() {console.log("over")}
function out() {console.log("out")}
2.ready 加载事件
可以在标签上面先加载执行
$(document).ready(function () {事件})
<div class="c1" > </div>jQuery的操作标签
1.标签操作
获取文本信息
$(this).html() 纯文本和处理其他标签
$(this).text() 纯文本
修改文本信息
$(this).html("修改的文本信息")
$(this).text("修改的文本信息")
2.value取值
只限于select option，input，textarea标签使用，只能用value
获取文本信息
$(this).val()
修改文本
$(this).val("新内容")
3.属性操作
获取属性值
$("标签id，class..").attr("属性名")
设置属性值
$("标签id，class..").attr("属性名","属性值")
获得属性值返回真假
$("标签id，class...").prop("属性名")
jQuery的循环
var arr=[11,22,33]
$.each(arr,function(i,j){
i 是数组索引
j 是数组的值
})
案例：
$("ul li").each(function () {
//循环函数中的this：代指的是每一次循环中的dom对象
//因为this是dom对象，需要转换为jquery，在将转换为整形parseInt进行对比
if(parseInt($(this).html())>30){
$(this).css("color","red")
}
})
<ul>
<li>30</li>
<li>20</li>
<li>50</li>
<li>100</li>
</ul>
jQuery的css用法
单样式
$("c1").css("color","red")
多样式
$(".c1").css({"color":"red","backgroundColor":"#369"})
<div class="c1">adads</div>
获取内容边框尺寸
1.获取内容的宽高尺寸
$("this").width()
$("this").height()
2.获取内边距padding+内容的宽高尺寸
$("this").innerHeight()
$("this").innerWidth()
3.不加参数 边框+内边距+内容的宽高属性
$("this").outerHeight()
$("this").outerWidth()
加参数是内容+内边距+边框+外边距的全部宽高
$("this").outerHeight(true)
$("this").outerWidth(true)
jQuery的属性操作
添加属性
$(this).addClass("属性名")
删除属性
$(this).removeClass("属性名")
悬浮事件
$("标签名，class，id").mousemove(function () {
//添加属性c3，当悬浮在c1上面字体变为倾斜
$(this).addClass("属性名")
})jQuery的节点操作
1.创建节点
var $变量 = $("标签名字")
2.节点赋值
$变量.attr("属性名"，'属性值')
3.添加属性
按照父级添加
append 追加给父级追加一个子标签 放到最后一个
appendTo 将子级标签添加到父级标签下 放到第一个
perpend 追加给父级追加一个子标签 放到第一个
perpendTo 将子级标签添加到父级标签下 放到第一个
$("父级标签").append($变量)
$("父级标签").appendTo($变量)
按照兄弟添加
添加到兄弟上面
$("兄弟").before($变量)
添加到兄弟下面
$("兄弟").after($变量)
3.删除节点
删除整个标签
$("选中删除的标签id class ..").remove()
删除标签内的文本
$("选中删除的标签id class ..").empty()
4.替换标签
$("需要替换的标签 id class").replaceWith(新建的新标签)
5.字符串形式添加标签
$("按照兄弟标签").after("添加的标签")
例如
$("需要添加标签的父级标签").after("<div>123</div>")
6.复制标签
$(this).clone()jQuery的事件委派
$(" ul").on("click"," li",function () {
//this触发事件的标签
console.log($(this).html())
})
将事件委派给父级，触发事件的标签还是li
事件委派 ，将事件给父级，只要添加标签，就会有事件效果，因为事件委派给了父级，下面所有的子标签都会有效果
<ul>
<li>123</li>
<li>234</li>
<li>345</li>
</ul>jQuery的css位置
$("").offset([coordinates]) // 获取匹配元素在当前视口的相对偏移。
$("").position() // 获取匹配元素相对父元素的偏移，position()函数无法用于设置操作。
$("").scrollTop([val]) // 获取匹配元素相对滚动条顶部的偏移。位置偏移案例
.c1{
width: 800px;
height: 500px;
margin: 100px auto;
background-color: #e4393c;
position: relative;
}
.c2{
width: 200px;
height: 200px;
background-color: #333333;
}
<div class="c1">
<div class="c2"></div>
</div>
//获取位置信息
//offset：相对于窗口的偏移 position：相对于已经定位的父标签的偏移量
var off=$(".c2").offset() //获得偏移量对象
var pos = $(".c2").position()// 不能定位，只能获取父级的相对位置
console.log("off.top：",off.top)
console.log("off.left：",off.left)
//父相对定位，位置left top 才为0
console.log( "pos.left：",pos.left)
console.log("pos.top:",pos.top)
//设置offset
$(".c2").click(function () {
//只有offset才能传参只能时top和left 才能设置，设置上 和左的位置
$(this).offset({top:100,left:100})
})返回顶部案例
*{
margin: 0;
}
.c1{
height: 2000px;
background-color: #b0b0b0;
}
.c2{
width: 120px;
height: 50px;
background-color: #333333;
color: #e4393c;
text-align: center;
line-height: 50px;
position: fixed;
bottom: 50px;
right: 20px;
}
/*隐藏内容*/
.hode{
display: none;
}
<div class="c1">
<h3>文章...</h3>
</div>
<div class="c2">返回顶部</div>
//.scrollTo() 获取的是滚动条 与上面顶部的距离，参数是几就会返回到多少位置
console.log($(window).scrollTop())
$(".c2").click(function () {
$(window).scrollTop(0)
})
//隐藏事件，当滚动条到一定距离，显示返回顶部
//相对偏移量
//获取相对偏移量，判断相对偏离大于多少显示返回顶部，小于多少隐藏顶部
$(window).scroll(function () {
console.log($(this).scrollTop())
var v = $(this).scrollTop()
if (v>100){
$(".c2").removeClass(".hode")
}else {
$(".c2").addClass(".hode")
}
})
jQuery的动画
.c1{
width: 250px;
height: 250px;
background-color: #333333;
position: absolute;
top: 240px;
left: 200px;
}
.hide{
display: none;
}
<p><button class="c2"> animate</button></p>
<div class="c1"></div>
<p>
<button class="s1">显示</button>
<button class="s2">隐藏</button>
</p>
<p>
<button class="s11">显示</button>
<button class="s22">隐藏</button>
</p>
<p>
<button class="s111">显示</button>
<button class="s222">隐藏</button>
</p>
<p>
<button class="s1111">显示</button>
<button class="s2222">隐藏</button>
</p>
1.显示与隐藏
//显示
$(".s1").click(function () {
$(".c1").removeClass("hide")
})
//隐藏
$(".s2").click(function () {
$(".c1").addClass("hide")
})
2.show hide效果显示与隐藏
回调函数，只有当前执行完毕后，回调函数才能触发效果
//显示
$(".s11").click(function () {
$(".c1").show(1000,function () {
alert(132132)
})
})
//隐藏
$(".s22").click(function () {
$(".c1").hide(1000,function () {
alert(123613)
})
})
3.滑动动画隐藏效果.
(1000,function ()回调函数
//显示
$(".s111").click(function () {
$(".c1").slideDown(1000,function () {
alert(132132)
})
})
//隐藏
$(".s222").click(function () {
$(".c1").slideUp(1000,function () {
alert(123613)
})
})
4.fadeIn与fadeOut 淡入淡出的动画效果
//(1000,function ()回调函数
//显示
$(".s1111").click(function () {
$(".c1").fadeIn(1000,function () {
alert(132132)
})
})
//隐藏
$(".s2222").click(function () {
$(".c1").fadeOut(1000,function () {
alert(123613)
})
})
5.自定义动画
$("").animate(动画效果，动画完成时间，动画完成事件后的回调函数)
$(".c2").click(function () {
$(".c1").animate({
"border-radius":"50%",
"top":340,
"left":200
}
,1000,function () { //回调函数，当上面代码执行完毕后，执行回调函数
$(".c1").animate({
"border-radius":"0",
"top":240,
"left":240}
,1000,function () {
$(".c2").trigger("click") //trigger模拟事件，当代码点击了c2对应的按钮
})
})
})
扩展方法 (插件机制)
和python的类方法一样
//自己制作插件
jQuery.extend({
//方法1
方法名:function (参数) {
//代码
}
//方法2
})
//调用方法
$.方法1
$.方法2
jQuery.fn.extend({
方法名:function() {
//内部代码
}
})
//调用方法
$("父类值：子类值").方法名占位符
例如：
var name="1223";
var age = 18;
var s=
`
姓名:${name},
年龄:${age}
`
console.log(s)
BootStrap
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.4。 注意，Bootstrap有三个大版本分别是 v2、v3和v4，我们这里学习最常用的v3。
使用Bootstrap的好处：
Bootstrap简单灵活，可用于架构流行的用户界面，具有 友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。
下载
-
bootstap英文官方: https://getbootstrap.com/
-
bootstrap中文官网：http://www.bootcss.com/
注意： Bootstrap提供了三种不同的方式供我们下载，我们不需要使用Bootstrap的源码 和 sass项目，只需要下载生产环境的Bootstrap即可。
看官方文档
导入
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> # 导入框架
<script src="/static/jquery3.6.js"></script> # 导入jquery