-
jQuery类库
-
标签对象与jQuery对象
-
jQuery查找标签
-
操作标签
-
jQuery事件
-
jQuery动画效果
-
Bootstarp页面框架
-
组件
jQuery类库
'''基本'''
1.兼容多浏览器
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
2.封装了js代码
核心代码也就几十KB 加载速度快 极大的提升编写效率
3.宗旨
"Write less, do more."
4.Ajax交互
异步提交 局部刷新
'''版本区别'''
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678 学习直接使用最新版即可
'''下载使用'''
下载地址:https://jquery.com/
1.下载核心文件到本地引入(没有网络也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN网络资源加载(必须有网络才可以使用)
https://www.bootcdn.cn/
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
'''导入方式'''
1.本地jQuery文件
不会收到网络影响
2.CDN加速服务
需要确保有互联网
min.js 压缩之后的文件 容量更小
.js 没有压缩的文件 容量稍大
'''什么是CDN'''
内容分发网络
'''基本使用'''
将页面上的两个p标签文本内容一个变成红色 一个变成蓝色
js代码
let p1Ele = document.getElementsByTagName('p')[0]
let p2Ele = document.getElementsByTagName('p')[1]
p1Ele.style.color = 'red'
p2Ele.style.color = 'blue'
jQuery代码
$('#d1').css('color','red').next().css('color','blue')
标签对象与jQuery对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]
jQuery查找标签
1.基本选择器
$('#d1') id选择器
$('.c1') class选择器
$('div') 标签选择器
2.组合选择器
$('div#d1') # 查找id是d1的div标签
$('span.c1') # 查找含有c1样式类的span标签
$('div.span.p') # 查找div或者span或者p标签
$('#d1.c1.span') # 查找id是d1或者class含有c1或者span标签
3.层级选择器
$('div p') # 查找div里面所有的后代p标签
$('div>p') # 查找div里面的儿子p标签
$('div+p') # 查找div同级别下面紧挨着的p标签
$('div~p') # 查找div同级别下面所有的p标签
4.属性选择器
$('[username]') # 查找函数username属性名的标签
$('[username="jason"]') # 查找含有username属性并且值等于jason的标签
$('input[username="jason"]') # 查看含有username属性并且值等于jason的input标签
1.基本筛选器
$('ul li:first') //查找第一个li
$('ul li:last') //查找最后一个li
$('ul li:eq(index)') //索引等于index的那个元素
$('ul li:even') //匹配所有索引值为偶数的元素,从0开始计数
$('ul li:odd') //匹配所有索引值为奇数的元素,从0开始计数
$('ul li:gt(index)') //匹配所有大于给定索引值的元素
$('ul li:lt(index)') //匹配所有小于给定索引值的元素
$('ul li:not(元素选择器)') //移除所有满足not条件的标签
$('ul li:has(元素选择器)') //选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first') 优化 $('li').first()
2.表单筛选器:专门针对from表单内的标签
$(':text') //找到所有type属性为text的input标签
$(':password') //找到所有type属性为password的input标签
$(':file') //找到所有type属性为file的input标签
$(':radio') //找到所有type属性为radio的input标签
$(':checkbox') //找到所有type属性为checkbox的input标签
$(':submit') //找到所有type属性为submit的input标签
$(':reset') //找到所有type属性为reset的input标签
$(':bytton') //找到所有type属性为bytton的input标签
$(':enabled') //找到所有含有enabled属性的input标签
$(':disabled') //找到所有含有disabled属性的input标签
$(':checked') //找到所有含有checked属性的input标签
$(':selected') //找到所有含有selected属性的input标签
# 同级别往下查找
$('#id').next() //找同级别下一个标签
$('.cls').nextAll() //找到下面所有同级别标签
$('.cls').nextUntil('#cls2') //同级别下向下找直到cls2标签类
# 同级别往上查找
$('#id').prev(); //找同级别上一个标签
$('.cls').prevAll(); //找到上面所有同级别标签
$('.cls').prevUntil('#cls2'); //同级别下向上找直到cls2标签类
# 查找父标签
$('#id').parent() //查找当前标签的父标签
$('.cls').parents() //查找当前标签的所有父辈标签
$('.cls').parentsUntil() //查找当前标签的所有父辈标签,直到遇到匹配的那个标签为止
# 查找儿子和兄弟标签
$('#id').children() //所有儿子标签
$('#id').siblings() //同级别上下所有标签
# 链式操作
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
"""
核心:
对象在调用完一个方法之后返回的还是一个对象
"""
操作标签
'''
jQuery代码查找标签绑定变量名推荐使用$xxxEle
'''
# 增加css类名
addClass() //相当于原生js中的classList.add()
$divEle.addClass('c3')
# 移除css类名
removeClass() //相当于原生js中的classList,remove()
$divEle.removeClass('c3')
# 判断有没有指定的css类名
hasClass() //相当于原生js中的classList.contains()
$divEle.hasClass('c2')
# 有则移除 无则增加
toggleClass() //相当于原生js中的classList.toggle()
$divEle.toggleClass('c4')
# 样式操作
增加一个粉红色的实线边框
$divEle.css('border','3px soild pink')
# 位置操作
$(window).scrollTop() //用于获取左侧滚动条距离顶端的位置
"""
实时监测距离
$(window).scroll(function () {
if($(window).scrollTop() > 500){
alert('超过本页500了')
}
})
"""
jQuery DOM
# 获取文本
text() innerText
# 获取HTML标签
html() innerHTML
# 获取value值
val() value
"""
使用空括号就是获取，括号里面放操作代码就是设置
"""
jQuery对象[0].files files[0]
# 创建标签
$('<a>') document.createElement()
# 获取第一个标签为style属性值
$('div').attr('style')
# 批量设置单个
$('div').attr('class','c1')
# 批量设置多个
$('div').attr({'name':'owen','pwd':111})
# 批量移除
$('div').removeAttr('class')
"""
获取标签属性的时候， 针对动态属性尤其是复选框不建议使用attr()
prop('checked') # 结果为布尔值
prop('checked',false) # 动态设置
attr针对动态变化的属性获取会失真
"""
#内部添加
$(A).append(B)// 把B追加到A
$(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的前面
# 清空内容
remove()// 从DOM中删除所有匹配的元素
empty()// 删除匹配的元素集合中所有的子节点
jQuery事件
# JS绑定事件
标签对象.on事件名 = function(){}
jQuery事件绑定
# jQuery事件绑定
方式1:
jQuery对象.事件名(function(){})
方式2:
jQuery对象.on('事件名称',function(){})
ps:默认就用方式1 不行了再用方式2
# 克隆操作
<button id="d1">小朋友快来玩呀</button>
<script>
$('#d1').click(function () {
// $('body').append($(this).clone()) // 不克隆事件(克隆的不是实体， 只有一个实体)
$('body').append($(this).clone(true)) // 克隆事件(克隆的都是实体)
})
</script>
# 鼠标悬浮在上面和移开时触发各一次
$('#d1').hover(function () {alert('芜湖芜湖')})
# 想要将悬浮和移开分开执行不同的操作，就要写两个函数
$('#d1').hover(
function () {alert('要不要来点好康的')},
function () {alert('这么快就走啦')}
)
"""
jQuery绑定事件有两种方式
$('#d1').click(function(){})
$('#d1').on('click', function(){})
"""
# 实操
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val())
})
</script>
阻止后续事件
"""
如果给已经有事件的标签绑定事件， 那么会依次执行
如果想要取消后续时间的执行有两种方式
"""
方式一:
$('#di').click(function(){
alert()
return false
})
方式二:
$('#d1').click(function (e) {
alert('bibibi')
e.preventDefault()
})
# 推荐使用第一个
"""
在多个标签嵌套的并且都有相同事件的情况下， 会出现逐级汇报的现象
"""
方式1
return false
方式2
e.stopPropagation()
# 代码实现
<div id="d3"> 这是div标签
<p id="d2"> 这是p标签
<span id="d1"> 这是span标签</span>
</p>
</div>
<script>
$('#d1').click(function (){
alert('span')
return false
})
$('#d2').click(function (e){
alert('p')
e.stopPropagation()
})
$('#d3').click(function (){
alert('div')
return false
})
$(function(){}) 缩略写法
$(document).ready(function(){}) 完整写法
"""
针对动态创建的标签，提前写好的事件默认都是无法生效的
"""
# 书写格式
$('body').on('事件类型','选择器',function(){})
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
jQuery动画效果(了解)
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
Bootstrap页面框架
别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能
版本有很多 使用V3即可
https://v3.bootcss.com/css/
文件结构
bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
pycharm自动提示问题
最好本地导入几次
'''使用bootstrap其实只需要操作标签的样式类即可'''
class = "container" # 两边有留白
class = "container-fluid" # 没有留白
class = "row" 默认开设一行均分12份
class = "col-md-n" 指定需要几份(电脑屏幕)
# 栅格参数可以做到响应式布局 屏幕参数
col-md-6 col-xs-2 col-sm-3 col-lg-3
# 如果一行十二份用不完 可以调整位置 栅格偏移
col-md-offset-3
# 表格格式
<table class="table table-hover table-striped">
# 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
# 表单标签
.pull-left 左浮
.pull-right 右浮
class='form-control'
针对radio和checkbox不能加
#按钮样式
class = "btn btn-primary btn-block"
组件
# 图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
# 导航条
class="navbar navbar-inverse"
#更多图标
https://fontawesome.com.cn/
