前端day-08
目录
每日测试
昨日内容回顾
js事件
jQuery简介
jQuery选择器
今日内容概要
今日内容详细
jQuery练习题
操作标签
事件
克隆事件
自定义模态框
左侧菜单
返回顶部
自定义登录校验
input实时监控
hover事件
键盘按键事件
今日作业
每日测试
"""
今日考题:
1.有一个列表[3,4,1,2,5,6,6,5,4,3,3]请写出一个函数，找出该列表中没有重复的数的总和
2.简述数据库表设计中一对一、一对多、多对多的应用场景,char与varchar的区别
3.js代码书写位置有几种，什么是事件，js如何绑定事件，常见的事件有哪些
4.什么是jQuery，它的基本语法是什么，jQuery导入方式有哪些分别有什么区别，
列举你所知道的jQuery选择器(针对表单筛选器是否有注意事项)
"""昨日内容回顾
js事件
# js绑定事件的两种方式
# 自己独立的敲出来昨天的案例
"""
1.开关灯
pEle.classList.add()
...
2.input框获取、失去焦点
onfocus
onblur
3.计时器
onclick
js代码逻辑
4.省市联动
onchange文本域变化
就记忆一个select
"""jQuery简介
"""
内部封装了并且提供了额外功能的模块、框架
类库
兼容多个浏览器
版本更新
1.X
2.X
3.X
宗旨
write less do more
如何导入jQuery
1.将文件下载到本地直接导入(压缩、未压缩)
好处在于没有网也可以正常使用
不好的地方在于需要重复书写，文件路径还要固定
(pycharm模块功能 自动添加固定的代码
配置
编辑
file and code template
html
py
)
2.CDN服务
CDN的概念:内容分发网络
参考网站:bootcdn
前端相关的应用程序都有免费的cdn服务
好处在于无需下载对应的文件，直接走网络请求使用
不好的地方在于必须要有网
基本语法结构
jQuery().action() === $().action()
"""jQuery选择器
# 基本选择器
$('#d1')
$('.c1')
$('span')
"""
jQuery选择器拿到的都是jQuery对象(你可以看成是一个数组)
重点
jQuery对象和标签对象的区分
jQuery >>> 标签对象
$('#d1')[0]
标签对象 >>> jQuery
$(document.getElementById('d1'))
不同的对象之间调用的方法是不一样的，不能混用
"""
# 组合、分组、嵌套
$('div,span,p')
$('#d1,.c1,div')
$('div span') # 后代
$('div>span') # 儿子
$('div+span') # 毗邻
$('div~span') # 弟弟
# 基本筛选器
"""
针对已经得到的结果进行二次筛选
:first
:last
:eq(index)
:even
:odd
:gt(index)
:lt(index)
:not
:has 从后代元素中筛选
$('div:has(".c1")')
"""
# 属性选择器
$('[username]')
$('[username="jason"]')
$('input[username="jason"]')
# 表单筛选器
$('input[type="text"]')
$(':text')
:text
...
:file
"""
特殊情况
$(':checked') 拿到默认选中的checkbox和option
$('input:checked')
在书写表单筛选器的时候 如果前面可以加限制条件最好加一个
"""
# 筛选器方法
.next()
.nextAll()
.nextUntil() # 不包含最后一个
.prev()
.prevAll()
.prevUntil() # 不包含最后一个
.parent()
.parents()
.parentsUntil() # 不包含最后一个
.children() # 儿子们
.siblings() # 兄弟 同级别上下所有
$('div p') === $('div').find('p')
# 基本筛选器优化封装
.first()
.last()
.not()
.has()
.eq()
"""
选择器无论你用哪个都可以 只要能够实现需求就行
"""
今日内容概要
今天要把jQuery全部结束
-
jQuery操作标签
-
jQuery绑定事件
-
jQuery补充知识点
-
jQuery动画效果(了解)
-
Bootstrap(前端框架)开头
今日内容详细
jQuery练习题
$('#i1')
r.fn.init [div#i1.container]
$('h2')
r.fn.init [h2, prevObject: r.fn.init(1)]
$('input')
r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
$('.c1')
r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]
$('.btn-default')
r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]
$('.c1,h2')
r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]
$('.c1,#p3')
r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]
$('.c1,.btn')
r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)]
$('form').find('input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
$('label input')
r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
$('label+input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
$('#p2~li')
r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)]
$('#f1 input:first')
r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]
$('#my-checkbox input:last')
r.fn.init [input, prevObject: r.fn.init(1)]
$('#my-checkbox input[checked!="checked"]')
r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]__proto__: Object(0)
$('label:has("input")')
r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)]操作标签
# 操作类
"""
js版本 jQuery版本
classList.add() addClass()
classList.remove() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()
"""
# css操作
111
222
"""一行代码将第一个p标签变成红色第二个p标签变成绿色"""
$('p').first().css('color','red').next().css('color','green')
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
class MyClass(object):
def func1(self):
print('func1')
return self
def func2(self):
print('func2')
return self
obj = MyClass()
obj.func1().func2()
# 位置操作
offset() # 相对于浏览器窗口
position() # 相对于父标签
scrollTop() # 需要了解
$(window).scrollTop()
0
$(window).scrollTop()
969
$(window).scrollTop() # 括号内不加参数就是获取
1733
$(window).scrollTop(0) # 加了参数就是设置
n.fn.init [Window]
$(window).scrollTop(500)
n.fn.init [Window]
scrollLeft()
# 尺寸
$('p').height() # 文本
20
$('p').width()
1670
$('p').innerHeight() # 文本+padding
26
$('p').innerWidth()
1674
$('p').outerHeight() # 文本+padding+border
26
$('p').outerWidth()
1674
# 文本操作
"""
操作标签内部文本
js jQuery
innerText text() 括号内不加参数就是获取加了就是设置
innerHTML html()
$('div').text()
"
有些话听听就过去了，不要在意，都是成年人!
"
$('div').html()
"
有些话听听就过去了，不要在意，都是成年人!
"
$('div').text('你们都是我的大宝贝')
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').html('你个臭妹妹')
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').text('你们都是我的大宝贝
')
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').html('你个臭妹妹
')
w.fn.init [div, prevObject: w.fn.init(1)]
"""
# 获取值操作
"""
js jQuery
.value .val()
"""
$('#d1').val()
"sasdasdsadsadad"
$('#d1').val('520快乐') # 括号内不加参数就是获取加了就是设置
w.fn.init [input#d1]
$('#d2').val()
"C:\fakepath\01_测试路由.png"
$('#d2')[0].files[0] # 牢记两个对象之间的转换
File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}
# 属性操作
"""
js中 jQuery
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)
在用变量存储对象的时候 js中推荐使用
XXXEle 标签对象
jQuery中推荐使用
$XXXEle jQuery对象
"""
let $pEle = $('p')
undefined
$pEle.attr('id')
"d1"
$pEle.attr('class')
undefined
$pEle.attr('class','c1')
w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
$pEle.attr('id','id666')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.attr('password','jason123')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.removeAttr('password')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
"""
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
"""
$('#d3').attr('checked')
"checked"
$('#d2').attr('checked')
undefined
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked')
"checked"
$('#d3').attr('checked','checked') # 无效
w.fn.init [input#d3]
$('#d2').prop('checked')
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true)
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]
# 文档处理
"""
js jQuery
createElement('p') $('')
appendChild() append()
"""
let $pEle = $('
')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')
$('#d1').append($pEle) # 内部尾部追加
$pEle.appendTo($('#d1'))
$('#d1').prepend($pEle) # 内部头部追加
w.fn.init [div#d1]
$pEle.prependTo($('#d1'))
w.fn.init [p#d1, prevObject: w.fn.init(1)]
$('#d2').after($pEle) # 放在某个标签后面
w.fn.init [p#d2]
$pEle.insertAfter($('#d1'))
$('#d1').before($pEle)
w.fn.init [div#d1]
$pEle.insertBefore($('#d2'))
$('#d1').remove() # 将标签从DOM树中删除
w.fn.init [div#d1]
$('#d1').empty() # 清空标签内部所有的内容
w.fn.init [div#d1]
事件
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})克隆事件
自定义模态框
"""
模态框内部本质就是给标签移除或者添加上hide属性
"""左侧菜单
返回顶部
自定义登录校验
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
username:
password:
input实时监控
键盘按键事件
今日作业
"""
今日作业
必做
1.利用jQuery链式操作一句话完成菜单显隐展示
2.整理日考题目
3.整理今日内容完成博客书写
选做
1.预习前端框架Bootstrap
"""