黑马程序员技术交流社区

标题: 【石家庄校区】兜兜转转走走停停的又一次的学习笔记 [打印本页]

作者: 1015747546 时间: 2018-5-3 15:34
标题: 【石家庄校区】兜兜转转走走停停的又一次的学习笔记

兜兜转转走走停停的又一次的学习笔记

HTML

作用：

用来制作页面（静态页面）；

使用：

创建文件---文件扩展名为 .html 或者 .htm将结尾;

结构标签：

跟标签----<html> </html>;

<head>------html的头标签

<body>-------html的体标签

字体标签：

<font>标签：HTML中的字体标签

使用：<font>文字</font>

<font>标签的属性：

<标签属性名 = “属性值“ 属性名 = ”属性值“></标签>

字体加粗---b

字体斜体---i

字体下划线---u

居中标签 ----center

src -----图片来源

width-----图片宽度

height------图片高度

alt------图片找不到现实的内容

<br/> 换行

引入路径问题：

1 ：图片和文件在同一路径

==直接写文件名或 ./文件名

====如果引入的图片在文件的上一级

========引入图片在下一级

无序列表的属性：

type属性：

disc-------实心点

circle-----空心圆

square-----方块

有序列表的属性：

type属性：1----数字字符

a-----英文字符

i------罗马字符

*start 属性----从哪开始

超链接的target属性：

_self

_blank

_parent

<img> 图片当前所在位置</img>

【表格标签--】-----

属性：

Width :表格宽度------最好指定宽度防止将其他空格挤掉。

Height :表格高度

Border : 边框

Align : 表格水平位置----center 居中

*left

*center-----内容居中

*right

hr/---横的空格线

HTML的作用用来制作浏览器页面；；；---制作静态页面

作用；使用范围： --再设计网站页面的时候都要用到--

============================

【总结】---=-=-=-=---=-==-=

HTML的标准：

< pre>标签-----原生标签====将复制文件保持原有格式

<hr/>---空白横线

-----多个空格；

======================================

图片显示：

图片标签: <img>

属性：

src---来源

width---图宽（px）0

height---图高

alt-----图片找不到内容---为图片注释说明

相对路径：

【. .】----返回上一级

================================

友情链接：

有序列表

<ol>

</ol>

无序列表

<ul>

</ul>

超链接标签 ===<a>

属性：

href----连接路径

target ----打开方式

_self---在自身打开

_blank ----新打开一个窗口

总结：--

type属性：

disc--实心点

circle -- 实心圆

square -- 方块

有序：

type---

-start--从哪开始

1---数字

a---字母

i--罗马

表格：

<table>---画表格

属性：

Width----表格宽度

Height----高度

Border====边框

Align --- 位置

<tr>

</tr>

嵌套-----

<tr colspan>----跨列合并 column----列

<tr rolspan>----跨行合并 row----行

【确定是跨行还是跨列确定好后在确定跨行后占地多少然后删除被合并】

======================================

【【网站首页：】】

HTML 表单标签：

表单元素:

<input type = "text">---文本框

<input type = password----密码框

<input type = radio ---单选

<input type = checkbox----复选按钮

<input type ==button---- 没有任何功能的按钮

<input type = submit ------ 提交按钮

<input type = reset------重置按钮

<input type = file-----文件上传的表单项；

<input type = hidden ---- 隐藏字段；---可提交到后台；

<input type = 【image---将图片作为按钮】

selsct ----下拉列表

textarea-----文本区

背景图片---background---

align=center====表格居中

-------------text------------------------------

获取文本框数据==为文本框必须有name 属性；根据

【必须属性---name type】

name 接受属性

value----文本框默认值---可以修改；

单选按钮 --checked----默认被选中

size------控制文本框长度

disabled---修饰name name 不可改变

maxlength----限制接受数据长度最大值

readonly-----文本框只读

【checkbox】??=====【默认选中 checked】=====单选多选

selected------单选----省份之类

【】form 常用属性action---提交路径method ----- 请求的方式 .GET和 . POST.默认是 GET;区别：1GET 和2POST

1数据显示到地址栏提交有大小限制

2没有大小限制数据不会显示到地址栏

密码---password

属性同上

确认密码不重名

=======================

总结：

<input type = email> :-----

date -----日期

number----

color----颜色

JS概述：

运行在浏览器的脚本语言；

ECMAScript------是JS的基本语法----【也是核心】

DOM-----------文档页面中的东西----文档对象模型；

BOM-------------获得浏览器中的东西--浏览器对象模型

【其他脚本语言：JavaScript ActionScript Fiex】

JS----使页面动起来

-=======================================

基本语法：

区分大小写；

是弱变量类型的语言（与JAVA不同）：--弱变量语言没有具体类型给定什么类型就是什么类型；

注释方法和java相同；

{ }---代表代码块

变量名：

1 第一个字符必须是字母 /下划线（_）或美元符号（$）

2 剩下的字符可以是下划线/美元符号/或者任何字母或数字字符

关键字和java类似；

=======================================

数据类型：

共两类：

1 原始类型：

undefined-----未定义类型--如果变量是Undefined类型的

boolean----布尔类型----如果变量是boolean类型的

number----数字类型----如果变量是number类型的

string-------字符或字符串-------如果变量是string类型的

null : 空

2 引用类型;

<1 对象类型对象类型默认值是 null

====================================

3 运算符：与java基本一致

=== 全等---类型和值都一样

4 语句和java 一致

【js的通常开发的步骤】

js通常都由一个事件触发；

触发一个函数定义一个函数

获得操作对象的控制权，

修改要操作的对象的值或者属性；

定义函数：

function 函数名（）{

//函数体

}

window .onload = function( ){

}

常用事件：

onclick codblclick onmouseover onmouseout

onload

【js的引入方式】

通常两种方式：

1 页面内直接编写 js 代码，js代码需要使用<script></script>

2 将 js 的代码编写到一个 .js 的文件中在HTML中引入该 js 代码即可；

=========================================

基本语法：

ECMAScript ---基本语法；

1 与java 类似：

2 弱变量类型语言：体现在声明上用----》var】声明；

变量没有具体类型---只有在为其赋值时给其值为什么类型他就是该类型；

3 数据类型：

1原始类型：

undefined-----未定义类型--如果变量是Undefined类型的

boolean----布尔类型----如果变量是boolean类型的

number----数字类型----如果变量是number类型的

string-------字符或字符串-------如果变量是string类型的

null : 空----是引用类型的默认值；

2 引用类型：

<1 对象类型对象类型默认值是 null

3 运算符：

== 等号------返回true

=== 全等号---数值和类型全等--才为true;

4 语句

和java 一样；

// for/in

专属循环语句：for( var i in list){

}

===============

【js通常开发步骤：】

js 通常有一个事件触发

触发一个函数定义一个函数

获得操作对象的控制权

修改要操作的对象的属性或值

事件：以on开头----事件发生在哪事件就写在哪；

常用事件：

onclick codblclick onmouseover onmouseout

onload

定义函数：

*function 函数名（）{

//函数体

}

window . onload = function( ) { }

【js的引入方式】

通常两种方式：

1 页面内直接编写 js 代码，js代码需要使用<script></script>-----在<head>里面引入

2 将 js 的代码编写到一个 .js 的文件中在HTML中引入该 js 代码即可；

if（）{

aiert("反馈内容");

return falsr;

}

</script>

action= " ";---注册成功》页面跳转

js中的正则表达方法：String 的 match 方法;

正则 . test ("字符串");

str . match("正则表达式");

========================================

小总结：

将 js 的代码定义成一个文件引入：

获得页面中的元素：

document . getElementById(" ");

正则的匹配：

JS 中有两种匹配正则的方式：

使用String 对象中的match方法

使用正则对象中的test方法；

===================================

定时：

setInterval（）-----按照指定周期（以毫秒计算）来调用函数或计算表达式

setInterval("change(),5000")

setTimeout（）------在指定的毫秒数后调用函数或计算表达式；

setTimeout("change(),5000");

====================================

function setTime(){

window.setInterval("alter()",5);------一直按周期执行；

window.setTimeout("alter()",5);----只执行一次；

}

onload---界面开始就执行；

创建文件；

页面加载时开始执行；

匿名函数：----window . onload

onload----页面加载；

显示和隐藏：

*display;

*block 显示元素

*nome 隐藏元素

==========================================

====================================

window:

alert();------弹出对话框

setInterval====定时器

setTimeout-----定时器

clearInterval----清除定时

clearTimeout

open------弹出一个新窗口

【function del (){

var flag= confirm

}】

confirm------删除某条数据时使用是否确认删除

prompt------------可以接受输入的值；

open---------弹出新窗口；

aler

===================================

BOM对象：

history . go (-1)/history . back()----返回上一级页面

location . href =" 路径";---页面的跳转；

方法：

href----设置或返回完整的URL

location . href ----完成路径信息；

=================================================

【js的输出】

*document . getElementById(" "); . innerHTML = "HTML的代码=====要输出的内容"；

*document . write(" ");---向文档输出

【JS的事件】---时间发生在哪写在谁身上；

onfocus -----获得焦点；

onblur --------失去焦点；

onsubmit -------提交；

onfocus ------元素获得焦点

onblur-------元素失去焦点

onchange------下拉列表改变；

======================================

onclic----点击///onlod-----页面加载

【span 默认在同一行】

======================================

style . bac

rows.length

表头 < thead >---< tody>

复选框===

checkbox----默认被选中

corsapn---

====================================

DOM--文档对象模型

概述：

【Document 】--将一个HETML文档加载到内存行车鞥树形结构从而操作属性结构就可以改变HTML的样子；

DOM的使用：知道 document . element , attribute 中的属性和方法；

Element---标签对象---标签结点；

Attribute--属性----属性结点

Text ----文本----文本结点

【常用操作】

获得元素：

创建元素：

document . creatElement( ) ;---创建元素；

document . creatTextNode( ) ;---创建文本；

添加结点：

element . appendChild( ) ; ---在末尾插入；

element. insertBefore( ) ; ---在某个元素之前插入；

element . removeChild();---删除元素；

Element----对象

Attrybute----属性

Text-----文本

Node----是结点 ---- Dom里的对象属性 Text 都可以统称为【Node】

=============================

function changeCity( ){

}

======================================

JS的内置对象：

new Data . getTime();获取从97年至今的毫秒值

全局函数：

parseInt("11");

parseFloat("32.06");

解码编码方法encode----编码

decode -- 解码

eval 函数：----讲一段内容当成js来执行；

【事件----记】

【checkbox-------复选框】

this----不同地方含义不一样===在JQ中可以将其转换【$(this)】

==================================

省市二级联动

属于文档处理-----

常用方法：

append---在某个元素后添加内容

appendTo------将元素添加到指定位置；

remove-------将某个元素移除；

html-----覆盖内容；

$(“元素”).append("添加内容");

【each----循环遍历】

【angular js】---框架；

【JQ】是对【JS】的封装 js能做的 JQ不一定能做；

概述：

轻量级的JS的类库对JS进行封装；

作用：页面特效页面异步操作；

使用： JQuery的API；

API：

JQuery的选择器：

基本选择器：00

ID选择器； #

类选择器； . class

元素选择器；元素名

通配符选择器； *

并列选择器；一次使用多个选择器；

层级选择器：

空格：元素的后代元素；

【>】子元素选择器；

【+】下一个兄弟元素；

【~】后面的所有的兄弟元素

基本过滤选择器：

odd---奇数

even----偶数

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的事件

======================================

入门；

引入 JQuery

【$代表JQuery】

页面加载---$(function(){ });

同上=====$(ducoment).ready(fuction(){ });

jquery的所有方法只能是jquery 的对象才能去调用；

var img =

$(img);---将JS对象转换成JQuery对象；

$(img).get(0);----将JQuery对象装换成JS对象

$();---核心之一

===============================

效果函数----JQ.API--中查询---- JQ----效果。

【JQ的显示和隐藏】

show---显示

hide-----隐藏

slideUp/slideDown----向上滑动 / 向下滑动

animate-----自定义动画函数可以同时运行三个效果

toggle---单机切换函数

..........

【鼠标单击----click】

层级选择器

even---奇数

odd---偶数

first---第一个

last----最后一个

gt ---大于

$（).click(function(){

}）;

属性选择器

title----自定义属性

title="aaa";

$( div [ title = 'aaa' ])

表单选择器

checked( );

selected( );

=====================

基本过滤选择器：

even----奇数 add---偶数

添加移除样式：

addClass--------添加样式

removeClass----移除样式

神器-------j

css----适用于简单的方法

==============================

attr( );

prop( );----修改属性；

removeProp()---

addClass( );

removeClass( );

appendTO----将元素添加到另外一个新元素中；

JQuery的遍历：

$.each(object ,function(i , in) );

$ (" ") . each(function(i , in ){ });

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2