A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

兜兜转转走走停停的又一次的学习笔记
HTML
作用:
用来制作页面(静态页面);
使用:
创建文件---文件扩展名为 .html 或者 .htm将结尾;
结构标签:
跟标签----<html> </html>;
<head>------html的 头标签
<body>-------html的体标签
字体标签:
<font>标签 :HTML中的字体标签
使用 :<font>文字</font>
<font>标签的属性:
<标签 属性名 = “属性值“ 属性名 = ”属性值“></标签>
字体加粗---b
字体斜体---i
字体下划线---u
居中标签 ----center
<center>内容<center>
src -----图片来源
width-----图片宽度
height------图片高度
alt------图片找不到现实的内容
<br/> 换行
引入路径问题:
1 : 图片和文件在同一路径
==直接写文件名 或 ./文件名
====如果引入的图片在文件的上一级
<img src =" . . / 文件名"/>
========引入图片在下一级
无序列表的属性:
<a href></a>
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>
<li> </li>
</ol>
无序列表
<ul>
<li> </li>
</ul>
超链接标签 ===<a>
属性:
href----连接路径
target ----打开方式
_self---在自身打开
_blank ----新打开一个窗口
总结:--
type属性:
disc--实心点
circle -- 实心圆
square -- 方块
有序:
type---
-start--从哪开始
1---数字
a---字母
i--罗马
表格:
<table>---画表格
属性:
Width----表格宽度
Height----高度
Border====边框
Align --- 位置
<tr>
<td>讲话稿</td>
</tr>
嵌套-----
<tr colspan>----跨列合并 column----列
<tr rolspan>----跨行合并 row----行
【确定 是跨行还是跨列 确定好后 在确定跨行后占地多少 然后删除被合并 】
======================================
【【网站首页:】】
HTML 表单标签:
<form>----</form>
表单元素:
<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 代码即可;
<script>
if(){
aiert("反馈内容");
return falsr;
}
</script>
action= " ";---注册成功》 页面跳转
js中的正则表达方法:String 的 match 方法;
正则 . test ("字符串");
str . match("正则表达式");
========================================
小总结:
将 js 的代码定义成一个文件引入:
<script src = "文件路径" ></script>
获得页面中的元素:
·
document . getElementById(" ");
·
·
正则的匹配:
·
·
JS 中有两种匹配正则的方式:
·
·
使用String 对象中的match方法
·
·
使用 正则对象中的test方法;
·
===================================
·
定时:
·
setInterval()-----按照指定周期(以毫秒计算)来调用函数或计算表达式
·
setInterval("change(),5000")
·
setTimeout()------在指定的毫秒数后 调用函数或计算表达式;
·
setTimeout("change(),5000");
·
·
====================================
<script>
function setTime(){
window.setInterval("alter()",5);------一直按周期执行;
window.setTimeout("alter()",5);----只执行一次;
}
onload---界面开始 就执行;
创建文件;
页面加载时开始执行;
匿名函数:----window . onload
onload----页面加载;
显示和隐藏:
*display;
*block 显示元素
*nome 隐藏元素
==========================================
<style></style>
<script></script>
====================================
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--文档对象模型
1.
概述:
2.
【Document 】--将一个HETML文档加载到内存 行车鞥树形结构 从而操作属性结构 就可以改变HTML的样子;
3.
DOM的使用: 知道 document . element , attribute 中的属性和方法;
4.
Element---标签对象---标签结点;
5.
Attribute--属性----属性结点
6.
Text ----文本----文本结点
7.
8.
【常用操作】
9.
1.
获得元素:
2.
3.
创建元素:
4.
document . creatElement( ) ;---创建元素;
5.
document . creatTextNode( ) ;---创建文本;
6.
1.
添加结点:
2.
element . appendChild( ) ; ---在末尾插入;
3.
element. insertBefore( ) ; ---在某个元素之前插入;
4.
element . removeChild();---删除元素;
5.
Element----对象
6.
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的选择器:
1.
基本选择器:00
2.
ID选择器; #
3.
类选择器; . class
4.
元素选择器; 元素名
5.
通配符选择器; *
6.
并列选择器;一次使用多个选择器;
7.
1.
层级选择器:
2.
空格: 元素的后代元素;
3.
【>】子元素选择器;
4.
【+】 下一个兄弟元素;
5.
【~】 后面的所有的兄弟元素
6.
1.
基本过滤选择器:
2.
odd---奇数
3.
even----偶数
4.
first---获取匹配的第一个元素
5.
last-----获取匹配的最后一个元素
6.
1.
属性选择器:
2.
div[id]:有id属性的div元素
3.
div[title = 'aa'] : title = aaa的属性的div元素;
4.
1.
表单选择器:
2.
:text ----文本框
3.
: password----密码
4.
: radio-----单选框
5.
: checkbox----复选框
6.
【 ... 】
7.
JQ的属性操作:
prop( );--【最新版】----获取 在元素集中 获取的第一个元素
removeProp();---移除
attr【老版本】();
removeAttr();
文档处理;
append();---在某个元素后添加内容;
appendTo();----将元素添加到另外一个元素后;
insertBefore();
insertAfter();
remove();
JQuery的CSS操作:
css();
JQuery的效果:
hide();
show();
slideDown();
slideUp();
fadeIn();
fadeOut();
animate();
JQuery的事件
======================================
入门;
1.
引入 JQuery
2.
3.
$代表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的遍历:
1.
$.each(object ,function(i , in) );
2.
3.
$ (" ") . each(function(i , in ){ });
4.

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马