兜兜转转走走停停的又一次的学习笔记 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.
|