笔记day07
-
软件开发目录规范
1.面条版代码
2.函数版代码
3.模块版代码
软件开发目录规范
面向对象版代码 -
socket模块
能够让代码程序之间实现网络通信(OSI七层、TCP与UDP) -
前端三剑客之HTML
超文本标记语言 是构建网页的骨架
html head body h p div span a img table ul form -
前端三剑客之CSS
层叠样式表 是html的样式资源
选择器、边框、盒子模型、浮动、定位、背景 -
前端三剑客之JavaScript
也是一门编程语言 简称JS
'''当你真的学会了一门编程语言之后 再去学习其他的都会容易很多'''
基础语言、BOM操作、DOM操作(事件绑定)
本周内容概要
-
前端类库之jQuery框架
-
前端页面框架Bootstrap
-
python后端框架之django(重点)
-
django框架详细讲解(重点)
本周内容详细
前端类库之jQuery框架
jQuery内部封装了JS代码 能够让我们编写更少的代码实现更多的功能 并且兼容诸多浏览器
'''以前做前端比较头疼的一件事就是浏览器兼容性问题 甚至有时候同一个功能需要编写不同的代码针对不同的浏览器>>>:IE浏览器'''
使用jQuery之前 必须先导入(script标签引入jQuery的js文件)
1.官网下载文件
2.网络CDN(bootcdn)
资源路径后缀如果有min一般情况下都表示该资源为压缩版本
ps:为了偷懒 也可以使用pycharm自动添加模板的功能
使用jQuery可以用特殊符号$
jQuery() 等价于 $()
jQuery对比JS代码复杂度
编写代码让页面上的第一个标签内文本颜色变为红色 第二个变为绿色
JS代码实现
let h1EleList = document.getElementsByTagName('h1');
h1EleList[0].style.color = 'red'
h1EleList[1].style.color = 'green'
jQuery代码实现
$('h1').first().css('color','pink').next().css('color','orange')
1.jQuery选择器(与CSS差不多)
$('#d1') id选择器 关键符号是警号
$('.c1') class选择器 关键符号是点好
$('tag') 标签选择器 关键符号就是标签名
$('div.c1') 查找class中含有c1的div标签
$('#d1, .c1, span') 查找id是d1的或者class含有c1的或者span标签
$('div p') 查找div内部所有的p标签(后代)
$('div > p') 查找div内部第一层级的p(儿子)
$('[name]') 查找含有name属性的标签
$('[name="jason"]') 查找含有name属性并且值是jason的标签
$('div[name="jason"]') 查找含有name属性并且值是jason的div标签
表单筛选器(专门用于快速查找form表单内的一些标签)
$(':text') 查找form表单内type=text的标签 === $('[type="text"]')
筛选器方法
.next() 同级别下一个标签
.prev() 同级别上一个标签
.parent()父标签
ps:链式操作(调用了一个方法之后还可以继续调用)
2.jQuery操作标签 JS操作标签
$(选择器).addClass() 标签对象.classList.add()
$(选择器).removeClass() 标签对象.classList.remove()
$(选择器).hasClass() 标签对象.classList.contains()
$(选择器).toggleClass() 标签对象.classList.toggle()
$(选择器).css('color','red') 标签对象.style.属性名 = 属性值
text()