day44(jQuery操作标签,前端第三方框架(基础))
上周内容回顾
DOM操作，jQuery简介
-
DOM之节点操作
# 给标签对象绑定变量名的时候 变量名推荐使用 xxxEle divEle = document.createElement('div') divEle.setAttribute('id','d1') divEle.setAttribute('name','jason') divEle.innerText = '我是一个div标签' bodyEle = document.getElementByTagName('body')[0] bodyEle.append(divEle) -
DOM之值操作
""" innerText innerHTML """ 普通数据值 .value 文件数据 .files -
DOM之属性操作
# 类属性 classList.add() classList.remove() classList.contains() classList.toggle() # css属性 style.color style.height style.width -
DOM之事件操作
# 1.绑定事件的两种方式 1.直接在标签属性中绑定 2.通过代码查找并绑定 # 2.常见事件 onclick focus blur change ... -
jQuery简介
1.引入jQuery的两种方式 1.本地导入js文件 2.使用CDN服务 2.jQuery与js的优缺点 jQuery内部封装了js代码 编写速度更快 效率更高 兼容性更强 js能够直接被浏览器识别 执行速度更快 -
jQuery查找标签
$('选择器') eg: $('#d1') $('.c1') $('div') $('div span') $('div>span') $('div#d1,p.c1,span') $('[name="text"]') $(':text') .next() .prev() .parent()
今日内容概要
jQuery
作业讲解
"""
1.一定要明确你手上的标签到底是什么对象
如果是原生js代码查找出来的对象 那么只能调用原生js的对象方法
如果是jQuery查找出来的对象 那么只能调用jQuery对象方法
2.原生js对象与jQuery对象的关系(**)
可以将jQuery对象看成是数组包了标签对象
原生js对象就是标签对象
eg:
['jason', ]
'jason'
$('#d1')[0] // jQuery对象转原生js对象
$(标签对象) // 原生js对象转jQuery对象
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="d1">
<button id="d2">开始</button>
<button id="d3">停止</button>
<script>
// let startBtn = $('#d2')[0];
let startBtn = document.getElementById('d2')
let stopEle = document.getElementById('d3')
let inputEle = document.getElementById('d1')
// 4.专门定义一个展示时间的函数
function showTime(){
// 2.获取当前时间对象
let cTimeObj = new Date()
// 3.添加到input标签value属性中
inputEle.value = cTimeObj.toLocaleString()
}
// 6.定义一个存储定时器对象的全局变量(多个函数都要用)
let timeObj = null;
// 1.先给开始按钮绑定一个点击事件
startBtn.onclick = function () {
// 8.判断变量是否已经指代了定时器 其实就是判断是否已经有了一个任务 如果有了就不要再新建
if(!timeObj){
// 5.循环定时任务
timeObj = setInterval(showTime, 1000) // 如果起了多个任务 变量只能指向最后一个
}
}
// 7.给停止按钮绑定一个取消定时器的点击事件
stopEle.onclick = function () {
clearInterval(timeObj) // 移除任务 并不会清空变量的值
// 清空变量的值
timeObj = null
}
</script>
</body>
</html>
补充
原生js代码查找标签绑定的变量名推荐使用 xxxEle
jQuery代码查找标签绑定的变量名推荐使用 $xxxEle
jQuery操作
# class操作
jQuery操作 DOM操作
addClass() classList.add()
removeClass() classList.remove()
hasClass() classList.contains()
toggleClass() classList.toggle()
//添加指定的css类名
$('元素选择器')addClass('类名');
//移除指定的css类名
removeClass();
//判断样式存不存在
hasClass();
切换css类名,有则删除,无则增加
toggleClass();
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 300px;
height: 300px;
background-color: pink;
}
.c2{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="c1"></div>
<script src="jQuery.js"></script>
<script>
// 添加指定CSS类名(指定CSS类名替换元素选择器指定的标签内容)
$('.c1').addClass('c2');
//移除指定CSS类名
$('.c1').removeClass('c2');
//判断指定CSS类名是否存在
$('.c1').hasClass('c2');
//查看指定CSS类名是否存在,有则删除,无则添加
$('.c1').toggleClass('c2');
</script>
</body>
</html>
#样式操作
1.语法：标签.css('属性','样式')
2.jQuery链式操作:使用jQuery可以做到一行代码操作很多标签
<p>JavaScript</p>
<p>jQuery</p>
一行代码将第一个p标签变成红色第二个p标签变成绿色：
$('p').first().css('color','red').next().css('color','green')
3.jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
4.类似python的对象链式操作，也可以连续操作对象
# 位置操作
$(window).scrollTop() 获取左侧滚动条距离顶端的位移量
"""
实时监测距离
$(window).scroll(function () {
if($(window).scrollTop() > 600){
alert('超过600了 架不住了')
}
})
"""
（1）scrollLeft() : 设置或返回被选元素的水平滚动条位置；
（2）scrollTop() : 设置或返回垂直滚动条位置；
如：窗口返回顶部：$(window) . scrollTop( 0 );
文本值操作
$(..).text(..) #获取文本内容
$(..).text("<a>1</a>") #设置文本内容
$(..).html() #获取html
$(..).html("<a>1</a>") #设置html内容
$(..).val() #input系列的标签的value值的获取
$(..).val(..) #input系列的标签的value值的设置
jQuery DOM
text() innerText
html() innerHTML
val() value
转js对象 files
1.获取/设置标签内部文本
原生js jQuery
innerText text() 括号内不加参数就是获取加了就是设置
innerHTML html()
标签.innerText //获取标签内部文本
标签.innerText='<h1>python</h2>' //设置标签内部文本，不识别html
$('标签').text() //获取标签内部文本
$('标签').text('<h1>python</h2>') //设置标签内部文本，不识别html
标签.innerHTML //获取标签+标签内部文本
标签.innerHTML='<h1>python</h2>' //设置标签内部文本，识别html
$('标签').html() //获取标签+标签内部文本
$('标签').html('<h1>python</h2>') //设置标签内部文本，识别html
2.获取用户输入的数据
(1).原生js获取文本数据：.value
标签.value // 获取标签的value值
标签.value = '' // 将标签的value值清空
标签.value = 'df' // 将标签的value值设置df
(2).jQuery获取文本数据：.val()
$('标签').val() // 获取标签的value值
$('标签').val('') // 将标签的value值清空
$('标签').val('df') // 将标签的value值设置df
(3).获取文件数据
1)js：fileEle.files[0] // 获取文件数据，要加索引[0],第一个才是文件数据
2)jQuery：$('标签')[0].files[0] // 转换标签对象再索取
'''不写值就是获取 写了就是设置'''
属性操作
1.回顾
js中 jQuery
setAttribute() attr(name,value) //设置/更改属性
getAttribute() attr(name) //获取属性
removeAttribute() removeAttr(name) //移除属性
2.jquery普通属性操作
$pEle.attr('id') //获取id的属性
$pEle.attr('class','c1') //更改class属性为c1
$pEle.attr('password','123') //自定义属性也可以更改
$pEle.removeAttr('password') //删除password属性
3.jQuery选择类标签属性操作
选择按钮checkbox radio option等，在判断是否选中时，用attr时无法正确获取
要用.prop()
(1).判断是否选中：$('#d2').prop('checked') //返回true/false
(2).自定义选中：$('#d3').prop('checked',true)
(3).总结：
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
4.补充
隐藏标签.hide()
显示标签.show()
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个
$('div').attr({'name':'jason','pwd':123}) # 批量设置多个
$('div').removeAttr('class') # 批量移除
"""
获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()
prop('checked') 结果是布尔值
prop('checked',false) 动态设置
"""
文档处理
# 内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
# 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
# 清空内容
$('body').empty()
创建/插入/移除标签
1.回顾
js jQuery
createElement('p') $('<p>')
appendChild(imgEle) append($imgEle)
insertBefore(imgEle,pEle) $('#d1').before($pEle)
insertafter(imgEle,pEle) $('#d1').after($pEle)
2.jQuery创建标签
$('<p>')
3.jQuery插入标签
a.内部尾部追加:$('#d1').append($pEle) //等同于$pEle.appendTo($('#d1'))
b.内部头部追加:$('#d1').prepend($pEle) //等同于$pEle.prependTo($('#d1'))
c.放在某个标签后面:$('#d1').after($pEle) //等同于$pEle.insertAfter($('#d1'))
d.放在某个标签后面:$('#d1').before($pEle) //等同于pEle.insertBefore($('#d1'))
4.jQuery移除标签
a.将标签从DOM树中删除:$('#d1').remove()
b.清空标签内部所有的内容:$('#d1').empty()
事件操作
'''js绑定'''
标签对象.onclick = function(){}
标签对象.onchange = function(){}
...
'''jQuery绑定'''
jQuery对象.click(function(){})
jQuery对象.change(function(){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="d1">点我写代码!!!</button>
<button id="d2">点我去睡觉!!!</button>
<script>
$('#d1').click(function () {
$('body').append($(this).clone(true)) // 克隆事件
})
$('#d2').click(function () {
$('body').append($(this).clone()) // 不克隆事件
alert('睡你🐎')
})
</script>
</body>
</html>
悬浮事件
x $('#d1').hover(function () {alert(123)})鼠标悬浮上去和移开各自触发一次如果想要将悬浮和移开分开执行不同的操作 需要写两个函数$('#d1').hover( function () {alert(123)}, # 悬浮触发 function () {alert(123)} # 移走触发)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">学习之路是很曲折的 有时候很难 但是学好了 洗脚就简单了 不要沮丧不要气馁</p>
<script>
$('#d1').hover(
function () {
alert('您来啦 赶紧进来吧 等什么呢!!!')
},
function () {
alert('这么快就要走 一定要长来坐坐!!!')
}
)
</script>
</body>
</html>
监听事件
事件监听
1）什么叫事件监听？你在电脑上设置个按钮，通过点击按钮来反馈里面所显示出来的信息。这就叫事件监听。
2）事件监听概念：通过某一事物源对象（当某种事件发生时），然后向监听器传送某种事件对象，监听器里面封装了某种事件信息，接到事件对象后进行某种处理，这就是事件监听。
3）简单来说以学校放课铃作为事物源对象，然后放课铃声响起来即事件发生。假如学生是一个监听器，学生作为监听器接收到放课铃声响起，然后学生对放课铃声进行下课处理，这就是事件监听
"""
jQuery绑定事件有两种方式
$('#d1').click(function(){})
$('#d1').on('click',function(){})
有时候第一种绑定事件的方式无法生效 那么就使用第二种
"""
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val())
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val())
})
</script>
</body>
</html>
阻止后续事件
有时候会遇到 同一个标签上点击后有多个事件，如果只想执行第一个事件而放弃后面的事件这个时候我们就可以用代码来搞定、、、
"""
如果给已经有事件的标签绑定事件 那么会依次执行
如果想要取消后续时间的执行 可以使用两种方式阻止
"""
1.方式1(推荐使用)
$('#d1').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
2.方式2(自带关键字)
$('#d1').click(function (e) {
alert(123)
e.preventDefault()
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="">
username:<input type="text">
<input type="submit" id="d1">
</form>
<script>
$('#d1').click(function (e) {
alert(123)
return false // 取消当前标签对象后续事件的执行
e.preventDefault()
})
</script>
</body>
</html>
事件冒泡
"""
在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象
"""
方式1
return false
方式2
e.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="d3">我是大哥
<p id="d2">我是二弟，回头看
<span id="d1">我是三弟，回头看</span>
</p>
</div>
<script>
$('#d1').click(function (e) {
alert('回头看大哥二哥')
// return false 阻止span回头看标签后面事件运行
})
$('#d2').click(function (e) {
alert('回头看大哥')
// e.stopPropagation()阻止p标签回头看后面事件运行
})
$('#d3').click(function (e) {
alert('我是大哥')
})
</script>
</body>
</html>
事件委托
"""
针对动态创建的标签 提前写好的事件默认是无法生效的
"""
$('body').on('事件类型','选择器',function(){})
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button>点我弹你脑瓜子</button>
<button>点我弹你脑瓜子</button>
<script>
$('button').click(function () {
alert(123)
})
$('body').on('click','button',function () {
alert('将body内所有的点击事件交给button标签处理')
})
</script>
</body>
</html>
动画效果
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]) 通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle([s,[e],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
fadeTo([[s],o,[e],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
前端框架
# bootstrap框架
内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可
# bootstrap版本
推荐使用v3版本
# 基本使用
必须先导入后使用
1.本地导入
2.cdn导入
bootcdn
bootstrap需要使用jQuery来实现动态效果
# 文件组成
bootstrap需要导入两个文件
一个是css文件
一个是js文件
"""使用前端框架 几乎不需要自己写css 只需要写class即可"""
布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白
栅格系统
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份(电脑屏幕)
# 栅格参数可以做到响应式布局xs sm md lg...
如果一行十二份用不完 可以调整位置
col-md-offset-3
表格样式
参考官网即可 有样式有源码 拷贝使用即可
# 表格样式
class="table table-hover table-striped table-bordered"
# 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
表单样式
.pull-left 左浮
.pull-right 右浮
class='form-control'
针对radio和checkbox不能加!!!
按钮与图片
# 按钮样式
class = 'btn'
# 按钮颜色
<a href="" class="btn btn-info">言多必失</a>
<a href="" class="btn btn-danger">言多必失</a>
<a href="" class="btn btn-warning">言多必失</a>
<a href="" class="btn btn-primary">言多必失</a>
<a href="" class="btn btn-success">言多必失</a>
# 按钮尺寸
<a href="" class="btn btn-success btn-sm">言多必失</a>
<a href="" class="btn btn-success btn-lg">言多必失</a>
<a href="" class="btn btn-success btn-block">言多必失</a>
图标样式
<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示