day01
一、软件按照程序和数据存储位置的不同,可以分为:
单机软件 界面:Tk、pyQt、wxPython
C/S架构软件 界面:Tk、pyQt、wxPython
B/S 架构软件 界面:网页
二、前端开发的定义:为B/S架构软件提供界面解决方案
三、网页的基本结构:看讲义
四、快捷键创建网页:英文的“!”+tab键
五、标签按照显示的效果可以分为:
块元素标签:默认占有一行
内联元素标签:默认可以排列在一行
六、常用html标签:
1、h1~h6: 标题标签,块元素标签,含有默认样式
2、P: 段落标签,块元素标签,含有默认样式
3、字符实体:如果想在网页上显示空格,“<”个“>”, 不能直接在代码中写,需要写成它们的字符实体,空格: 小于号:< 大于号 >
4、div 通用块元素标签,一般做嵌套使用,没有默认样式
5、a 链接标签,属于内联元素标签,通过herf属性设置链接地址,将a标签包裹img标签可以用图片做链接,默认链接地址写成“#”
6、img 图片标签,属于内联元素标签,通过src属性设置图片地址,通过alt设置图片文字说明
7、span 通用内联元素标签,一般用在样式设置中
七、html布局基本步骤:看练习
八、css引入页面的三种方式:
1、内联式:通过标签的style属性,把样式写在标签中
2、内嵌式:通过style标签,把样式写在head标签中
3、外链式:外部创建一个css文件,页面通过link标签引入
九、css三种选择器:
1、标签选择器:写法和标签名相同,会选择所有的标签
2、类选择器:名称任意,名称前需要加“.”,标签通过class属性引用
3、层级选择器:通过层级关系匹配标签
十、css常用样式:学会查看属性样式列表
day02
一、相对地址和绝对地址:
相对地址:“./” 表示当前文件所在目录 “../” 表示当前文件所在目录的上一级目录
绝对地址:做为了解,一般不用
二、列表标签相关:
新闻标题列表、文章标题列表、菜单要使用列表标签
列表创建的快捷键:ul>(li>a{列表文字})*8
多行操作:点击一行,然后按住alt键不放,再点击其他行,就可以选中多行
列表标签样式:list-style:none 去掉小圆点
三、表单,记住常用的标签:form标签 单行文本输入框 密码输入框 提交按钮 普通按钮创建 下拉框
四、三种选择器:
Id选择器: 通过id名称来选择标签
组选择器: 将通过的样式抽取出来写在一起,选择器之间用“,”隔开
伪类选择器: 定义鼠标悬停时标签的样式
五、盒子模型:
padding 的定义方式
margin 的定义方式
盒子的真实尺寸计算
day03
一、设置块元素相对于父级水平居中的技巧:将块元素左右的margin值设置为auto,一般写成:margin:0px auto;
二、元素显示特性display
display:inline 将元素转化为内联元素
display:block 将元素转化为块元素
display:none 将元素隐藏
三、元素溢出样式设置:在父级上设置
overflow:visible 超出的部分显示
overflow:hidden 超出的部分隐藏
overflow:scroll 不管是否超出,都显示滚动条来滚动显示超出的部分
overflow:auto 根据实际情况,动态显示滚动条
四、表格
table表格、tr标签、th和td标签
设置表格边框合并样式:border-collapse:collapse
五、定位
Position:relative 相对定位 相对自己定位,原位置保留
Position:absolute 绝对定位 相对有定位的父级来定位,原位置丢掉
Position:fixed 固定定位 相对浏览器定位,原位置丢掉
设置定位偏移:left right top bottom
设置定位层级: z-index
定位元素水平垂直居中技巧
六、css权重:style的权重是1000, 标签选择器的权重是1,类选择器的权重是10
七、photoshop测量取色,多操作几次
八、前端页面开发流程
1、得到效果图
2、创建项目目录
3、切图
4、新建html文件和css文件
5、参照效果图,编写html和css代码
day04
一、javascript引入页面的三种方式:
1、行间事件: 将javascript代码通过标签的事件属性写在标签中
2、内嵌式:在head标签中插入script标签,然后在script标签中写JavaScript代码
3、外链式:将JavaScript代码写在一个js文件中,html文件中通过script标签来引入这个js文件
二、javascipt数据类型:
1、5种基本数据类型:number、string、boolean、undefined、null
2、1种复合类型:object
三、变量及关键字的命名规则:
1、区分大小写
2、第一个字符可以是字母、下划线或者$
3、其他字符可以是字母、数字、下划线、或者$
四、函数相关:
1、函数定义 用function 关键字
2、函数的预解析 函数可以先调用,再定义
五、条件语句
1、双等和三等的区别
2、&& || !的写法
3、多重if else语句写法和python的区别
六、获取元素方法
document.getElementById(‘id名称’)
七、操作元素属性
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性,有横杠的改成驼峰式
4、innerHTML 操作元素内包裹的内容
八、事件属性和匿名函数
oDiv.onclick = function(){ ...... }
day05
一、函数传参
形参 实参
点击按钮调用带参数的函数: oBtn.onclick = function(){ fnChange(‘red’,’30px’) }
二、return关键字的作用
1、返回函数中的变量或者对象
2、在return这一句结束函数的运行
三、数组操作:
1、创建数组:面向对象的方式:var aList = new Array(1,2,3) 直接量方式:var aList2 = [‘a’,’b’]
2、获取数组成员的个数:length属性
3、操作数组的某个成员:下标
4、在数组后面增加或者删除成员:push() 方法 pop() 方法
5、将数组反转:reverse() 方法
6、获取某个成员在数组中第一次出现的索引值:indexOf() 方法
7、在数组中增加或者删除成员:splice() 方法
8、将数组拼接成字符串:join() 方法
四、循环语句 for(var i=0;i<iLen;i++){ 循环体 }
五、字符串操作方法:
1、”+” 符号两边是数字,就做加法,如果有一边是字符串,就做字符串拼接
2、parseInt() 将整数字符串转化为整数,如果是小数会去掉小数位
3、parseFloat() 将小数的字符串转化为小数
4、split() 将字符串转化为数组
5、indexOf() 获取某小段字符串在大段字符串里面的索引值 如果不存在就返回-1
6、substring() 截取字符串
六、定时器
只执行一次的定时器:var oTimer1 = setTimeout(函数名,间隔时间) 间隔时间单位为毫秒,不用写单位
关闭只执行一次的定时器:clearTimeout(oTimer1)
反复执行的定时器:var oTimer2 = setInterval(函数名,间隔时间)
关闭反复执行一次的定时器:clearInterval(oTimer2)
day06
一、javascript调试程序的方法:
1、将变量或对象打印出来:alert(‘变量’) console.log(‘变量’) document.title = ‘变量’
2、断点调试:将js代码独立成一个js文件,然后在chrome浏览器的source窗口中打断点调试
二、变量作用域:
1、定义变量要加“var”
2、在函数内部定义局部变量要加“var”
3、在函数内部可以直接修改全局变量
4、在函数内部如果不加var来定义变量,那么这个变量是全局变量
5、全局变量为整个页面共享,一个地方改变,其他地方都改变
三、封闭函数
三种写法:
;(function(){ ...... })( );
;!function(){ ...... }( );
;~function(){ ...... }( );
四、jquery文档加载完再执行:$(function(){ ...... })
五、jquery选择器及选择集过滤和转移,看讲义
六、jquery操作样式
1、操作行间样式: 读取:$div.css(‘width’) 写入:$div.css({‘width’:100,’height:’100’})
2、操作样式类名: 增加样式类名 addClass(‘类名’) 删除样式类名:removeClass(‘类名’)
day07
一、检查jquery是否选择了元素:用jquery对象的length属性
二、动画方法animate() 的参数
参数一:要改变的样式属性,写成字典的形式
参数二:动画持续的时间,单位是毫秒,默认是400毫秒,定义时不写单位
参数三:动画曲线,有 swing 缓冲运动 linear 匀速运动
参数四:回调函数
三、jquery特性动画效果方法:
1、show()
2、hide()
3、toggle()
4、fadeIn()
5、fadeOut()
6、fadeToggle()
7、slideUp()
8、slideDown()
9、slideToggle()
四、jquery链式调用:对象操作方法完成后转移,接着操作方法,可以写成一串的形式
五、属性操作
1、操作元素除样式属性之外的其他属性:prop() 方法,操作value属性的方法封装成了val()方法
2、操作元素内部包裹的内容:html() 方法
六、常用表单事件
1、blur 输入框失去焦点事件
2、submit 点击submit按钮,form标签发生提交事件 submit
七、正则表达式使用
定义方式:1、面向对象定义 2、直接量: var reTest = /’规则’/
使用方法:正则规则.test( 字符串 ) 返回布尔值
day08
一、常用事件:
1、focus事件 获取焦点事件,一般不在这个事件上绑定函数,一般作为让输入框自动或的焦点的方式使用,写法:$input.focus( )
2、mouseover 和 mouseout 鼠标移入移出事件 移入子元素也会触发
3、mouseenter 和 mouseleave 鼠标移入移出事件 移入子元素不会触发
4、hover 可以将mouseenter 和 mouseleave事件合并在一起写,写法:
$input.hover(function(){ mouseenter的操作 },function(){ mouseleave的操作 })
二、事件冒泡
原理:元素发生事件后,会将这个事件传递父级,父级还会往上传递,一直传递到最顶级标签,一般最顶级标签写成$(document)
阻止事件冒泡:return false
三、事件委托
原理:利用事件冒泡的特性,将事件绑定在父级上,子集发生的事件都会冒泡到父级,父级通过判断子级的特征给它特定的操作。
写法: $ul.delegate(‘li’, ‘click’, function(){ 这里的$(this)指的是当前冒泡的子级 })
四、Dom操作(也叫作节点操作)
1、append 和 appendTo
2、prepend 和 prependTo
3、after 和 inserAfter
4、before 和 insertBefore
5、remove 删除节点
一、软件按照程序和数据存储位置的不同,可以分为:
单机软件 界面:Tk、pyQt、wxPython
C/S架构软件 界面:Tk、pyQt、wxPython
B/S 架构软件 界面:网页
二、前端开发的定义:为B/S架构软件提供界面解决方案
三、网页的基本结构:看讲义
四、快捷键创建网页:英文的“!”+tab键
五、标签按照显示的效果可以分为:
块元素标签:默认占有一行
内联元素标签:默认可以排列在一行
六、常用html标签:
1、h1~h6: 标题标签,块元素标签,含有默认样式
2、P: 段落标签,块元素标签,含有默认样式
3、字符实体:如果想在网页上显示空格,“<”个“>”, 不能直接在代码中写,需要写成它们的字符实体,空格: 小于号:< 大于号 >
4、div 通用块元素标签,一般做嵌套使用,没有默认样式
5、a 链接标签,属于内联元素标签,通过herf属性设置链接地址,将a标签包裹img标签可以用图片做链接,默认链接地址写成“#”
6、img 图片标签,属于内联元素标签,通过src属性设置图片地址,通过alt设置图片文字说明
7、span 通用内联元素标签,一般用在样式设置中
七、html布局基本步骤:看练习
八、css引入页面的三种方式:
1、内联式:通过标签的style属性,把样式写在标签中
2、内嵌式:通过style标签,把样式写在head标签中
3、外链式:外部创建一个css文件,页面通过link标签引入
九、css三种选择器:
1、标签选择器:写法和标签名相同,会选择所有的标签
2、类选择器:名称任意,名称前需要加“.”,标签通过class属性引用
3、层级选择器:通过层级关系匹配标签
十、css常用样式:学会查看属性样式列表
day02
一、相对地址和绝对地址:
相对地址:“./” 表示当前文件所在目录 “../” 表示当前文件所在目录的上一级目录
绝对地址:做为了解,一般不用
二、列表标签相关:
新闻标题列表、文章标题列表、菜单要使用列表标签
列表创建的快捷键:ul>(li>a{列表文字})*8
多行操作:点击一行,然后按住alt键不放,再点击其他行,就可以选中多行
列表标签样式:list-style:none 去掉小圆点
三、表单,记住常用的标签:form标签 单行文本输入框 密码输入框 提交按钮 普通按钮创建 下拉框
四、三种选择器:
Id选择器: 通过id名称来选择标签
组选择器: 将通过的样式抽取出来写在一起,选择器之间用“,”隔开
伪类选择器: 定义鼠标悬停时标签的样式
五、盒子模型:
padding 的定义方式
margin 的定义方式
盒子的真实尺寸计算
day03
一、设置块元素相对于父级水平居中的技巧:将块元素左右的margin值设置为auto,一般写成:margin:0px auto;
二、元素显示特性display
display:inline 将元素转化为内联元素
display:block 将元素转化为块元素
display:none 将元素隐藏
三、元素溢出样式设置:在父级上设置
overflow:visible 超出的部分显示
overflow:hidden 超出的部分隐藏
overflow:scroll 不管是否超出,都显示滚动条来滚动显示超出的部分
overflow:auto 根据实际情况,动态显示滚动条
四、表格
table表格、tr标签、th和td标签
设置表格边框合并样式:border-collapse:collapse
五、定位
Position:relative 相对定位 相对自己定位,原位置保留
Position:absolute 绝对定位 相对有定位的父级来定位,原位置丢掉
Position:fixed 固定定位 相对浏览器定位,原位置丢掉
设置定位偏移:left right top bottom
设置定位层级: z-index
定位元素水平垂直居中技巧
六、css权重:style的权重是1000, 标签选择器的权重是1,类选择器的权重是10
七、photoshop测量取色,多操作几次
八、前端页面开发流程
1、得到效果图
2、创建项目目录
3、切图
4、新建html文件和css文件
5、参照效果图,编写html和css代码
day04
一、javascript引入页面的三种方式:
1、行间事件: 将javascript代码通过标签的事件属性写在标签中
2、内嵌式:在head标签中插入script标签,然后在script标签中写JavaScript代码
3、外链式:将JavaScript代码写在一个js文件中,html文件中通过script标签来引入这个js文件
二、javascipt数据类型:
1、5种基本数据类型:number、string、boolean、undefined、null
2、1种复合类型:object
三、变量及关键字的命名规则:
1、区分大小写
2、第一个字符可以是字母、下划线或者$
3、其他字符可以是字母、数字、下划线、或者$
四、函数相关:
1、函数定义 用function 关键字
2、函数的预解析 函数可以先调用,再定义
五、条件语句
1、双等和三等的区别
2、&& || !的写法
3、多重if else语句写法和python的区别
六、获取元素方法
document.getElementById(‘id名称’)
七、操作元素属性
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性,有横杠的改成驼峰式
4、innerHTML 操作元素内包裹的内容
八、事件属性和匿名函数
oDiv.onclick = function(){ ...... }
day05
一、函数传参
形参 实参
点击按钮调用带参数的函数: oBtn.onclick = function(){ fnChange(‘red’,’30px’) }
二、return关键字的作用
1、返回函数中的变量或者对象
2、在return这一句结束函数的运行
三、数组操作:
1、创建数组:面向对象的方式:var aList = new Array(1,2,3) 直接量方式:var aList2 = [‘a’,’b’]
2、获取数组成员的个数:length属性
3、操作数组的某个成员:下标
4、在数组后面增加或者删除成员:push() 方法 pop() 方法
5、将数组反转:reverse() 方法
6、获取某个成员在数组中第一次出现的索引值:indexOf() 方法
7、在数组中增加或者删除成员:splice() 方法
8、将数组拼接成字符串:join() 方法
四、循环语句 for(var i=0;i<iLen;i++){ 循环体 }
五、字符串操作方法:
1、”+” 符号两边是数字,就做加法,如果有一边是字符串,就做字符串拼接
2、parseInt() 将整数字符串转化为整数,如果是小数会去掉小数位
3、parseFloat() 将小数的字符串转化为小数
4、split() 将字符串转化为数组
5、indexOf() 获取某小段字符串在大段字符串里面的索引值 如果不存在就返回-1
6、substring() 截取字符串
六、定时器
只执行一次的定时器:var oTimer1 = setTimeout(函数名,间隔时间) 间隔时间单位为毫秒,不用写单位
关闭只执行一次的定时器:clearTimeout(oTimer1)
反复执行的定时器:var oTimer2 = setInterval(函数名,间隔时间)
关闭反复执行一次的定时器:clearInterval(oTimer2)
day06
一、javascript调试程序的方法:
1、将变量或对象打印出来:alert(‘变量’) console.log(‘变量’) document.title = ‘变量’
2、断点调试:将js代码独立成一个js文件,然后在chrome浏览器的source窗口中打断点调试
二、变量作用域:
1、定义变量要加“var”
2、在函数内部定义局部变量要加“var”
3、在函数内部可以直接修改全局变量
4、在函数内部如果不加var来定义变量,那么这个变量是全局变量
5、全局变量为整个页面共享,一个地方改变,其他地方都改变
三、封闭函数
三种写法:
;(function(){ ...... })( );
;!function(){ ...... }( );
;~function(){ ...... }( );
四、jquery文档加载完再执行:$(function(){ ...... })
五、jquery选择器及选择集过滤和转移,看讲义
六、jquery操作样式
1、操作行间样式: 读取:$div.css(‘width’) 写入:$div.css({‘width’:100,’height:’100’})
2、操作样式类名: 增加样式类名 addClass(‘类名’) 删除样式类名:removeClass(‘类名’)
day07
一、检查jquery是否选择了元素:用jquery对象的length属性
二、动画方法animate() 的参数
参数一:要改变的样式属性,写成字典的形式
参数二:动画持续的时间,单位是毫秒,默认是400毫秒,定义时不写单位
参数三:动画曲线,有 swing 缓冲运动 linear 匀速运动
参数四:回调函数
三、jquery特性动画效果方法:
1、show()
2、hide()
3、toggle()
4、fadeIn()
5、fadeOut()
6、fadeToggle()
7、slideUp()
8、slideDown()
9、slideToggle()
四、jquery链式调用:对象操作方法完成后转移,接着操作方法,可以写成一串的形式
五、属性操作
1、操作元素除样式属性之外的其他属性:prop() 方法,操作value属性的方法封装成了val()方法
2、操作元素内部包裹的内容:html() 方法
六、常用表单事件
1、blur 输入框失去焦点事件
2、submit 点击submit按钮,form标签发生提交事件 submit
七、正则表达式使用
定义方式:1、面向对象定义 2、直接量: var reTest = /’规则’/
使用方法:正则规则.test( 字符串 ) 返回布尔值
day08
一、常用事件:
1、focus事件 获取焦点事件,一般不在这个事件上绑定函数,一般作为让输入框自动或的焦点的方式使用,写法:$input.focus( )
2、mouseover 和 mouseout 鼠标移入移出事件 移入子元素也会触发
3、mouseenter 和 mouseleave 鼠标移入移出事件 移入子元素不会触发
4、hover 可以将mouseenter 和 mouseleave事件合并在一起写,写法:
$input.hover(function(){ mouseenter的操作 },function(){ mouseleave的操作 })
二、事件冒泡
原理:元素发生事件后,会将这个事件传递父级,父级还会往上传递,一直传递到最顶级标签,一般最顶级标签写成$(document)
阻止事件冒泡:return false
三、事件委托
原理:利用事件冒泡的特性,将事件绑定在父级上,子集发生的事件都会冒泡到父级,父级通过判断子级的特征给它特定的操作。
写法: $ul.delegate(‘li’, ‘click’, function(){ 这里的$(this)指的是当前冒泡的子级 })
四、Dom操作(也叫作节点操作)
1、append 和 appendTo
2、prepend 和 prependTo
3、after 和 inserAfter
4、before 和 insertBefore
5、remove 删除节点