本帖最后由 小石姐姐 于 2018-5-4 09:48 编辑
学习笔记
BOM 浏览器
window 对象
alert(); --弹出对话框
* setInterval();
* setTimeout();
* clearInterval();
* clearTimeout();
* confirm(); --弹出一个确认窗口
* prompt(); --弹出一个可输入的对话框
* open(); --打开一个新窗口
herf
Navigator ：包含的是浏览器的信息.
Screen:用来获得屏幕信息:
History 对象的方法
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
Location:包含URL信息的对象
port 返回一个URL服务器使用的端口号
protocol 返回一个URL协议
Java Script 特点 与JAVA不同的地方 ECMA Script
弱变量类型语言：（与Java不同）
Java
int i = 3;
String s = “abc”;
JavaScript:
var i = 3;
var s = “abc”;
JS将数据类型分成两类：
* 原始类型：
* undefined：未定义类型
* boolean:布尔类型
* number:数字类型
* string:字符或字符串.
* null：空
* 引用类型：
* 对象类型.对象类型默认值是null.
引用方式
通常两种方式：
一种：页面内直接编写JS代码,JS代码需要使用<script></script>.
二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
将JS的代码定义成一个文件引入:
<script src="../js/check.js"></script>
事件
onchange ```````````````````` HTML 元素改变
onclick `````````````````用户点击 HTML 元素
onmouseover ``````````````````` 用户在一个HTML元素上移动鼠标
onmouseout `````````````````````` 用户从一个HTML元素上移开鼠标
onkeydown ````````````````````````用户按下键盘按键
onload ````````````````````浏览器页面的加载时
onsubmit `````````````````````确认按钮被点击。
onmousemove `````````````````````鼠标被移动。
onmouseover ```````````````鼠标移到某元素之上。
onmouseout ``````````````````鼠标从某元素移开。
onmouseup ````````````````````鼠标按键被松开。
onkeydown ````````````````某个键盘按键被按下。
onkeypress ``````````````````某个键盘按键被按下并松开
onkeyup ````````````````某个键盘按键被松开。
onblur ```````````````````````元素失去焦点
onchange ```````````````````````域的内容被改变。
onfocus ``````````````````````````````````元素获得焦点。
onreset``````````````````````````````````` 重置按钮被点击。
获得页面中的元素的 格式
获得页面中的元素:
Document:文档对象.代表的是加载到内存中的整个的文档.
方法：
document.getElementById(“”);
document.getElementById(“”);
document.getElementsByName(“”);
document.getElementsByTagName(“”);
document.createElement(“”);
Element:元素对象.代表文档中的每个元素（标签）
匹配正则的两种方法
使用String对象中的match方法
使用正则对象中的test方法
DOM 文档图解
元素 element.innerHTML 设置或者返回元素的内容。
属性
属性：
firstChild：获得其第一个孩子节点
lastChild：获得其最后一个子节点
方法：
appendChild();将节点添加到当前节点的最后.
insertBefore();将节点添加到某个元素之前.
Attribute:属性对象.代表元素上的属性.
Document,Element,Attribute统称为Node（节点）
DOM图解
数组创建
创建 Array 对象的语法：
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
字符串的所有方法
String 对象方法
方法 描述
blink() 显示闪动字符串。
bold() 使用粗体显示字符串。
charAt() 返回在指定位置的字符。
concat() 连接字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize() 使用指定的尺寸来显示字符串。
indexOf() 检索字符串。
lastIndexOf() 从后向前搜索字符串。
link() 将字符串显示为链接。
match() 找到一个或多个正则表达式的匹配。
split() 把字符串分割为字符串数组。
strike() 使用删除线来显示字符串。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toString() 返回字符串。
parseInt(); 将字符串转出整型
parseFloat(); 将字符串转成小数
encodeURI()```````加码
decodeURI()```````解码
encodeURIComponent()
decodeURIComponent()
eval() :将一段字符串当成一个JS的代码来运行.
WEB HTML
概述 用.html后缀
标记语言：指的是通过一组标签的形式描述事物的一门语言.
超文本：比普通的文本更强大.
HTML是用来制作页面(静态页面).
标签
跟标签:<html>
头标签 :<head>
体标签:<body>
字体标签 <font> <标签 属性名=”属性值” 属性名=”属性值”></标签>
属性
color 颜色
size 字体大小
face 字体
演示 <font color="#FF0000"||color="red" size="1">输出语句</font><br/>{<br/>换行}
排版标签
<h1>---<h6>只有6个 标题标签
<p> </p>段落标签
<b></b> 加粗
<i></i> 斜体标签
<u></u>下划线
<center></center> 居中标签
<img> 图片标签
属性:
src : 图片来源
width : 图片高度
height : 图片的高度
alt : 图片找不到显示的内容.
要注意路径问题
../
和相对路径
列表标签
<ol>
<li></li>
</ol> 有序
有序列表的属性:
* type属性:
* 1 ：数字类型
* a ：英文类型
* i ：罗马字符
* start属性:从哪开始
<ul>
<li></li>
</ul> 无序
* type属性
* disc ：实心点.
* circle ：空心圆
* square ：方块.
<a>超链接标签
属性:
href : 链接的路径
target: 打开的方式
* _self :在自身网页打开
* _blank: 新建一个窗口打开
*_parent: 在父页面打开
超链接伪类
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
<table></table> 表格标签
属性:
width :表格宽度
height :表格高度
border :边框
align :表格水平位置:
* left 靠左
* center 居中
* right 靠右
border ="" 添加相框
<tr></tr> 行
<td></td> 列
<td>的属性:
* colspan=”自身所占列数”
* rowspan=”自身所占行数”
*删掉被占用的表格
<table cellspacing="20"> 可以设置 注册栏的间隔
<form></form> 表单标签
常用属性:
* action属性:提交的路径.默认提交到当前页面
*method属性:请求的方式.GET和POST.默认是GET.
GET和POST区别 :
前者会显示到地址栏并有大小限制
后者不显示 也没有大小限制
表单元素
<input tybe="text"> 文本框
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
<input type=”password”> :密码框
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
<input type="radio"> 单选按钮
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
<input type="checkbox"> 复选按钮
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
<input type=”button”> :普通按钮.没有任何功能的按钮.
<input type=”submit”> :提交按钮.
<input type=”reset”> :重置按钮.
<input type=”file”> :文件上传的表单项
<input type=”hidden”> :隐藏字段
<input type=”image”> :图片按钮
<select> :下拉列表
<textarea> :文本域.
DIV+CSS 层叠样式表
CSS的基本语法通常包含两个部分：一个是选择器，一个声明.
选择器{属性:属性值;属性:属性值...}
引入的3种方式 (就近原则)
行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>
h1{
color:blue;
font-size: 40px;
}
</style>
外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
常用的选择器
元素选择器：
div{
border:1px solid blue;
width:40px;
height:45px;
}
并列选择器
选择器,选择器{
}
ID选择器:
#d1{
border:2px solid red;
}
类选择器：
.divClass{
border:2px solid yellow;
}
后代选择器
div span{
}
div中所有包含a 的都选中了
div> a{
} 子元素选择器
属性选择器
<style>
input[type="text"]{
background-color: red;
}
</style>
CSS的浮动 float
left 左
right 右
none 默认不浮动
清除浮动 清除浮动 clear
可以选择 不往左浮 还是不往右浮动
以及不浮动( botu )
盒子模型
内边框 padding
padding-top 上浮动
---------right 右
---------bottom 下
---------left 左
边框 border
外边框 margin
margin-top 上浮动
---------right 右
---------bottom 下
---------left 左
position属性设置定位：
relative:相对定位
--left
--top
absolute:绝对定位
--left
--top
ul 的竖排改成横排
ul li{
display:inline;
}
css的显示和隐藏属性
WEB04-JQuery
JQuery的概述：
什么是JQuery:轻量级的JS的类库.对JS进行封装.
JQuery的作用：做页面的特效,页面异步操作.
JQuery的使用：JQuery的API
JQuery的API
JQuery的选择器：
基本选择器：
ID选择器
类选择器
元素选择器
通配符选择器
并列选择器
层级选择器：
空格：元素的后代元素
> ：子元素选择器
+：下一个兄弟元素
~：后面的所有的兄弟元素
基本过滤选择器：
odd
even
eq
first
last
属性选择器：
div[id]:有id属性的div元素
div[title='aa']:title=aaa的属性的div元素
表单选择器：
:text
:password
:radio
:checkbox
...
JQ的属性操作：
prop();
removeProp();
attr();
removeAttr()
文档处理：
append()
appendTo();
insertBefore()
insertAfter()
remove()
JQuery的CSS操作：
css();
JQuery的效果
hide()
show()
slideDown()
slideUp()
fadeIn()
fadeOut()
animate()
JQuery的事件
|
|
收藏
淘帖
踩
