再次学习HTML ,css, js 笔记
首先是HTML,可以说是一个骨架罢了,主要是要记住一些标签
在标签里面一般是 title标签设置的是网页的加载栏里的名字,
其中还有charset =“utf-8” 的编码格式的设置,还有meta 用来表示提供文档信息
link:用来引入css文件
script:用来引入js文件 或者js代码
一个页面最好是只用一个h1标签,因为搜索引擎会获取到h1标签,要是有多个的话,会造成不必要的影响
标签的常见属性是 color size width
aligh = 设置的是分割线的对齐方式
这个是有序和无序列表的使用type这样的属性设置只能背下来
有序的默认是1,2,3, 无序的默认是实行圆点
div 标签要设置属性就要使用到 style标签,具体看下面这行已消失的例子
上面实际上也是可以加上align 设置内容左右对齐,或者是居中
span标签是行内标签,不会自动换行,也是双标签,并且不能设置宽高
格式化标签
01:
color :字体颜色
size : 字体大小
face : 字体风格
02: 预格式化标签,
在html里面的空格是不会显示的,所以要打空格的时候就要使用到
这个标签,也可以使用其他的方式,比若说,空格符
分号一定要有,不够这个只能一个字符对应一个空格,不太好用
使用格式:
03:文本标签
用法: 嵌套在其他的标签里面,是双标签,夹在中间的文本才会有效果
上标和下标可以写化合式,或者几次幂
常用标签
01: <! 超链接标签 关键字 默认是在当前页面刷新–>
还可以设置是打开方式,使用属性target
参数有 _self : 在当前窗口(默认方式)
_blank:在空白窗口
<! 关键字 -->
的另一种使用方法是 锚点,
实际上就是设置好的超链接是在本页面上面的一些内容,也就是刷新到那里,通常我们所见的返回顶部就是那样的东西,
设置方式是:
开头
内容
”# “号的意思就是会在当前的页面刷一下,也就直接返回最上面的地方了
02:
img 标签
03:
表格标签
style的参数表示合并表格的边框,一开始默认是没有边框的。
表单
form标签用于为用户输入创建HTML表单
正常情况下,get比post快两倍
###标签设置的name 或者id属性主要是看是想要怎么使用
name一般是后台操作用的
id是唯一标识,一般给前端操作使用
新增标签
html5版本中,新增了很多语义化的标签,这些语义化标签对内容是没有样式效果的,它们只是起到语义化的作用。比如:
css
三种,行内式,内链式,外链式
外链式,通过link导入,也是写在 头里面的
要改动的地方就只有 href的地址,要是自己准备好的样式表的位置
设置格式如下:
id选择器
#id属性值{
…
}
类选择器
选择设置过指定的class属性值的元素
设置格式如下:
.class属性值{
…
}
CSS盒子模型
标签的内外边距属性,是盒子模型的一个基础,主要是用来控制页面的布局,内外边距是相对的,这要看选择的主体标签是哪一个。
内边距(padding)
padding-bottom 设置元素的底填充
padding-top 设置元素的顶部填充
padding-left 设置元素的左填充
padding-right 设置元素的右填充
外边距(margin)
用法和上面的padding一样
要求能做出登录注册页面并用css美化,并且能够做表单
不同的位置做一样的效果
可以使用并集选择器
#是id选择器
javascript学习
概念:
一门客户端脚本语言,运行在客户端浏览器中的,每一个浏览器都有 JavaScript的解析引擎,所谓的脚本语言,就是不需要直接编译直接就可以被浏览器解析执行了。
功能就是增强用户和html界面的交互过程,可以控制html元素,让页面有一些动态的效果,增强体验。
历史:
出现的原因:之前网络的速度传输漫,客户注册的时候不能进行本地效验,导致注册要花很长时间,于是js出现了,主要就是在客户端组织非法输入,不用传到服务器端再进行校验。
ecmascript:
客户端脚本语言的标准
基本语法:
01 与html结合的方式:
1,内部js 定义
2, 外部js 定义
(
内部js和外部js
02 注释的方式:
单行注释用 //
多行注释用 /* */
03数据类型:
- 原始数据类型(java里面的基本数据类型)
- 引用数据类型:对象(包括dom, bom)
- 原始数据类型有五种,number,string,boolean,null,undefined(变量没有初始化值,会默认赋值为undefined)
04变量:
js示弱类语言,体现在,c语言,java等初始化一个值的时候要声明它的数据类型,
以后要重新赋值的时候,也是要赋相同数据类型的值,而js不用,初始化是数字int,但是你再赋值的时候可以是一个字符串。
document.write()相当于就是我们system.out(),
alter(内容) 弹出内容
document.write(num+"<br>"); // 换行
变量的数据类型可以是用typeof(变量)查看
05运算符:
判断条件绕过
boolean转换
06js的特殊语法:
-
代码以 ; 结尾, 如果只有一行语句,分号可以省去
-
变量的定义使用var关键字(定义的是局部变量),也可以不使用(定义的是全局变量)
07流程控制语句:
if…else
while…
switch…
和java都是一样的,唯一的不同是switch开关函数的接收的开关可以是多种类型,而java里的只能是一种之前定义好的类型。
输出九九乘法表:
solid 表示实线, 1px表示一个像素
08函数对象:
方法定义是形参的数据类型不要写,
01
function 方法名(a,b){
alert(a + b); // 函数里面写方法体
}
方法名(4,3); // 调用
02
var 方法名 = function(形式参数列表){
方法体;
}
定义的函数的参数列表 具有属性:length
alert(方法名.length) //弹出的是定义的参数的个数
函数的重复声明被认为是覆盖掉
方法的调用只与形式参数列表有关 ,和实际参数列表无关,也就是实际参数多了的时候,多的只会被忽略
定义的方法里对形式参数列表有一个内置的arguments对象,这个对象是一个数组
09数组对象:
js里面的数组没有越界的说法,访问到下标默认不存在的,会返回的是undefined
也就是说array的长度是可变的
10日期对象:
Data:日期对象
- 创建对象:var data = new Data();
- 常见方法:toLocalString():返回当前对象对应的时间本地字符串格式
11math对象
- 创建:不用创建,直接使用,格式: math.方法名字();
- 属性: PI
- 方法:
random函数只产生0到1的数,但是可以用综合表达式子产生1到100的数字
12 RegExp:正则表达式对象
- 正则表达式就是定义了字符串的组成规则,表单的校验依赖于它。
首先是单个字符的匹配:[ ]
[a] 单个字符a
[ab] 单个字符a或者b
[a-zA-Z0-9] a到z中的A到Z中的0到9中的单个字符
\d : 单个数字字符
\w: 单个单词字符,就是上面的3表达式
量词符号
?:表示出现零次或者一次
*:表示出现零次或者多次
+:出现一次或者多次
{m,n}: 表示m<=数量<=n
^ : 匹配开始
¥: 匹配结束
正则对象:
1:创建
- var reg = new RegExp(“正则表达式”);
- var reg = /正则表达式/;
2:只有一个方法
- test(参数) :验证指定的字符串是否符合正则定义的规范
返回值是boolean类型ture/false
弹出的是false
Global对象:
1.特点:
全局对象,这个Global中封装的方法不需要新建对象就可以直接调用,格式直接是:
- 所有内建的javascript对象.方法名()
2.方法:
gbk编码一个汉字占两个字节
utf8编码一个汉字站四个字节
常用的方法有:
01:encodeURL() :url编码
02:decodeURL() : url解码
浏览器数据的传输不能传汉字,所以需要先进行url编码,
对汉字进行转码,首先是写成二进制的数字,然后转成十六进制的数,每两个数字用百分号 % 隔开
03:encodeURLComponent(): url编码,编码的字符更多,包括冒号(%3A),斜杠(%2F),问号(%3F),等于号(%3D)等
04:decodeURLComponent(): ~~
05:parseInt() : 将字符串转成数字 (i是大写的)
* 逐一判断每一个字符是不是数字,直到不是数字为止,将前边的数字部分转成number
* 适用于定义了字符串里面含有数字,想要转变类型使用,非数字部分不会被返回。
* 如果一个数字都没有的话,直接返回NaN.
06: eval() : 将 javascript字符串 作为 脚本代码来执行
就是这个函数,可以实现绕过,进行一些危险的操作。
Bom简单学习:
简介:
01功能:控制html文档的内容
02代码:获取页面标签(元素)对象Element
document.getElementById("id值") :通过元素的id获取元素对象
03操作对象(获取对象之后的操作):
- 修改属性值:明确获取的对象是哪一个,查看帮助文档,找出该标签那些属性是可以更改的
- 修改标签内容: 利用到innerHTML属性修改
放的位置要注意,一般是要放在最后的,要是放在html代码前面了,因为代码执行顺序,就不能达到我们原来的目的。
事件简单学习
01功能:某些组件被执行了某些操作之后,触发某些代码的执行。
02如何绑定事件:
- 直接在HTML标签上,指定事件的属性(操作),属性值就是js代码
事件:onclick--- 单击事件
<img id = "light" src="图片路径" onclick="alert("我被点了");">
- 通过js获取元素对象,指定事件属性,设置一个函数
第二种事件绑定对html的侵入度很低,耦合度就小了,利于维护和分工协作
实现点击切换图片
只切换一次,如果想要每次点击都切换一次,可以设置一个flag变量标记控制。
Bom正式入门
- 概念:browser object model 浏览器对象模型,将浏览器各个组成部分封装成对象
浏览器可以分成五个对象
- window
- navigator(浏览器对象)
- screen(屏幕对象)
- history
- location(地址栏对象)
dom对象是window窗口对象的子集,因为很重要,所以自成一派。
window:窗口对象
- 属性
- window对象不需要创建,可以直接使用 : window.方法名();
- window可以省略
- 获取其他bom对象
获取history对象
var h1 = window.history;
var h2 = history;
4.获取dom对象
window.document.getElementById(""); -- dom对象是window对象的子集
document.getElementById(""); -- 省略模式
-
方法
-
alert()显示带有一段消息和确认按钮的警告框
2.confirm() 显示带有一段消息及确认按钮和取消按钮的对话框
-
点击确定返回ture,取消返回false。
3.prompt() 显示可提示用户输入的对话框。返回值是用户输入的值。
4.open()
打开新的窗口
通过按钮操控打开新窗口
open() 里面可以设置参数成 open(“https://www.baidu.com”);
5.close()
关闭当前调用这个方法的窗口,不过通过之前open()方法生成的新窗口会返回一个window对象,所以可以这样操作:
var newWindow;
newWindow = open("https://www.baidu.com");
newWindow.close();
setTimeout(): 一次性定时器
两个参数,
- js代码/函数方法
- 毫秒值
有一个返回值 – 定时器的编号
clearTimeout():
var id = setTimeout(js/方法, 2000);
clearTimeout(id);
setInterval(): 循环定时器
clearInterval():
和上面的一组一样的操作,第二个参数设置的时间是每隔那么久执行一次。
window01 —轮播图案例制作 – 能力要求
location:(地址栏对象)
- 创建:
window.location
location
- 方法:
reload() 重新加载当前文档/刷新
href 设置或返回完整的 url。(不带括号)
location.href = "https://www.baidu.com"; -- 可以和按钮事件相绑定
location01 — 跳转首页案例
history:(历史记录对象)
这个历史记录是指当前打开的网址之前打开的记录,不是指以前至浏览器打开的所有记录。
- 创建:
window.history
history
-
属性:
length 返回当前窗口历史列表中的url数量
-
方法:
Dom学习
概念:
Document object model (文档对象模型)
将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行增删改查(CRUD)的动态操作。
Document : 文档对象
- 创建:
window.document
document
- 方法
- 获取Element对象:
- getElementById():查找具有指定的唯一 id 的元素
- getElementsByTagName() : 根据元素名称获取元素对象们,返回值是一个数组
- getElementsByClassName() : 根据class属性值获取元素对象们,返回值是一个数组
- getElementsByName() : 根据name属性值获取元素对象们,返回值是一个数组
- 创建其他Dom对象:
Element : 元素对象
- 获取/创建 : 通过document来获取和创建
- 方法:
- 属性
动态赋予属性:
Node : 节点对象,其他五个的父对象
javascript:void(0) -- 消除href跳转网页的属性
html dom
-
标签体的设置和获取:innerHTML
-
使用html元素对象的属性
-
控制样式
-
案例,表格的动态添加内容:
2.属性值直接查表
3.通过style.方法来控制
第二种方法更适合大工程,就像是css外链式一样的书写格式
js框架 jquery学习
概念
所谓框架就是半成品的软件,适用框架可以简化书写,简化js开发
本质上就是 一些js文件,封装了js的原生代码而已。
下载
有两个js文件,
导入
下载好的jquery-min。。。文件复制到项目下面的js文件夹,然后再html里导入,一样的方法
使用
js和jquery
- jquery对象在操作时,更加方便
- jquery对象和js对象方法不通用
- 两者可以相互转换
- js --> jquery :$(js对象)
- jquery – >js : jquery对象[索引] 或者 jquery对象.get(索引)
选择器:
筛选具有相似特征的元素(标签)
基本语法学习:
- 事件绑定
<body>
<input type="button" value="按钮" id="b1">
</body>
<script> // 给b1按钮增加单击事件,匿名函数定义
$("#b1").click(functin(){
alert("hello");
})
</script>
js要注意顺序,如果放在前面的话可以这样:
(window.onload = 只定义一次,如果定义多次,后面的会把前面的覆盖掉)
- 入口函数(可以多次使用)
<script> //jquery入口函数,dom文档加载完之后执行函数里面的代码,不用注意顺序
$(function(){
});
</script>
- 样式控制
jquery对象有css()方法可以控制样式