昨日内容回顾
-
BOM与DOM操作
-
BOM操作
# window对象 window.innerHeight window.innerWidth window.open() # 新建窗口打开指定的页面 window.open(url,'','height,width,top,bottom') window.close() # 关闭当前窗口 # navigator对象 navigator.userAgent # 后面讲爬虫还会涉及 # history对象 window.history.forward() window.history.back() # location对象 window.location.href # 获取当前页面的url window.location.href = url # 跳转到指定的url window.loacation.reload() # 弹出框 alert() confirm() 获取到用户点击的确定还是取消 prompt() 获取到用户输入的内容 # 计时器相关 1. setTimeout() clearTimeout() 2. setInterval() clearInterval()
-
DOM操作
""" DOM树的概念 DOM操作可以操作 HTML CSS 事件 既然要操作 那首先得学会如何查找标签 """ # 直接查找 document.getElementById('d1') # 直接获取到标签对象 document.getElementsByClassName('c1') # 数组 document.getElementsByTagName('div') # 数组 # 间接查找 parentElement children firstElementChild lastElementChild nextElementSibling previousElementSibling # 节点操作 1.创建img标签,赋值属性,添加到文档中 2.创建a标签,赋值属性和内部文本,添加到文档中 """ 1.创建标签 let pEle = document.createElement('p') 2.赋值属性 pEle.id = 'd1' pEle.setAttribute('username','jason') pEle.setAttribute('class','c1') 3.赋值内部文本 pEle.innerText = '我是p标签' 4.添加到其他标签内部 appendChild() ... insertBefore() ... setAttribute() get... remove... """ # innerText与InnerHTML # innerText只能获取标签内部的文本 设置文本的时候不识别HTML # InnerHTML文本和标签都获取 设置文本的时候识别HTML # 获取值操作 value inputEle = document.getElementById('i1') inputEle.value # 获取文件数据 inputEle.files # 数组 [文件对象,文件对象1...] inputEle.files[0] # class操作 classList classList.add() classList.remove() classList.contains() classList.toggle() # 有删无加 # css操作 只要想操作标签css先用style起手 pEle.style.color pEle.style.backgroudColor pEle.style.marginTop pEle.style.fontSize """ 会讲css中横杆或者下划线去掉 然后讲后面的单词变大写 font-size fontSize """ # 事件 """ 到达某个条件自动触发的动作 """ # 绑定事件的两种方式 <p onclick='func()'></p> <p id='d1'></p> <script> // 第一种 function func(){} // 第二种 pEle = document.getElementById('d1') pEle.onclick = function(){} </script> # js代码到底应该写在html页面的哪个位置 一般都是放在body内最下方 # onload 等待XXX加载/读取/渲染...完毕 XXX.onload 等待XXX好了
今日内容概要
-
jQuery(封装了js的前端框架(模块))
很容易与我们学的DOM操作混淆
jQuery
"""
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作
类似于python里面的模块 在前端模块不叫模块 叫 “类库”
兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
jQuery的宗旨
write less do more
让你用更少的代码完成更多的事情
复习
python导入模块发生了哪些事?
导入模块其实需要消耗资源
jQuery在使用的时候也需要导入
但是它的文件非常的小(几十KB) 基本不影响网络速度
jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。
jQuery内容:
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点 django部分学)
版本介绍
jQuery文件下载
压缩 容量更小
未压缩
"""
# jQuery在使用之前 一定要确保已经导入了
针对导入问题
1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
可以借助于pycharm自动初始化代码功能完成自动添加
配置
编辑
file and code template
"""我不想下载jQuery文件 能不能使用呢?"""
2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:
bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"""你的计算机必须要有网络"""
jQuery基本语法
jQuery(selector).action()
选择器
秉持着jQuery的宗旨 jQuery简写 $
jQuery() === $()
# jQuery与js代码对比
eg:将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
先学如何查找标签
基本选择器
// id选择器
$('#d1')
w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
// class选择器
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
// 标签选择器
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
"""一定要区分开(重点)"""
// jQuery对象如何变成标签对象
undefined
$('#d1')[0]
<div id=•"d1">•…•</div>•
document.getElementById('d1')
<div id=•"d1">•…•</div>•
// 标签对象如何转jQuery对象
undefined
$(document.getElementById('d1'))
w.fn.init [div#d1]
组合选择器/分组与嵌套
$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1') //找到有c1 class 类的div标签
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div#d1')
w.fn.init [div#d1, prevObject: w.fn.init(1)]
$('*') //所有元素选择器
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]
$('#d1,.c1,p') //组合选择器 并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
层级选择器
$('div span') # 后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span') # 儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span') # 毗邻
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span') # 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子:
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('ul li:first') # 大儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:last') # 小儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:eq(2)') # 放索引
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:even') # 偶数索引 0包含在内
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:odd') # 奇数索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:gt(2)') # 大于索引
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:lt(2)') # 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:not("#d1")') # 移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")') # 选取出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]
示例:自定义模态框,使用jQuery实现弹出和隐藏功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义模态框</title>
<style>
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgrey;
z-index: 999;
}
.modal {
600px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="弹" id="i0">
<div class="cover hide"></div>
<div class="modal hide">
<label for="i1">姓名</label>
<input id="i1" type="text">
<label for="i2">爱好</label>
<input id="i2" type="text">
<input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var tButton = $("#i0")[0];
tButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).removeClass("hide");
$(modalEle).removeClass("hide");
};
var cButton = $("#i3")[0];
cButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).addClass("hide");
$(modalEle).addClass("hide");
}
</script>
</body>
</html>
属性选择器[attribute]
$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]') //属性等于
w.fn.init [input, prevObject: w.fn.init(1)]
$('p[username="egon"]') //属性不等于
w.fn.init [p, prevObject: w.fn.init(1)]
$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
表单筛选器
$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$(':text') # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':password') # 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]
:text
:password
:file
:radio
:checkbox //$(":checkbox") 找到所有的checkbox
:submit
:reset
:button
...
表单对象属性
:enabled
:disabled
:checked
:selected
"""特殊情况"""
$(':checked') //它会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$(':selected') //它只拿selected,找到所有被选中的option
w.fn.init [option, prevObject: w.fn.init(1)]
$('input:checked') //自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]
$('#d1').next() //同级别下一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextAll()
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextUntil('.c1') //不包括最后一个
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('.c1').prev() //上一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)
$('.c1').prevAll()
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$('.c1').prevUntil('#d2')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('#d3').parent() //第一级父标签
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]
$('#d3').parents() //查找当前元素的所有的父辈元素
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$('#d3').parentsUntil('body') //查找当前元素的所有父辈元素,知道遇到匹配的元素为止
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
$('#d2').children() //儿子们
$('#d2').siblings() //同级别上下所有,兄弟们
查找: 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
$('div p')
# 等价
$('div').find('p') # find从某个区域内筛选出想要的标签
"""下述两两等价"""
$('div span:first')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').