表单: 用于收集用户输入的数据的。封装用户的数据,提交到数据到服务器 @Form Action Method-get,post @Input Type-text:placeholder//将txt框设置默认值,并且获取焦点时,删除默认值 Password Radio单选框 Checkbox File:文件选择框 Hidden隐藏域 Submit button image @Label For @select Option @textarea Cols Rows Css 样式:层叠样式表 1. 内联式2.内部式3.外部式<link rel=”sytlesheet” href=”css”> 2. 选择器 选择所有元素: *{} 并集选择器:选择器1,选择器2{} 例如 #a,#b{} 子选择器:选择器1 选择器2{} 例如div p{} <div><p></p></div> 属性选择器:选择元素名称,属性名=属性值的元素 元素名称【属性名=”属性值”】{} 伪类选择器:选择一些元素具有的状态 元素:状态{} 3. css属性 Font-size Color Text-align Line-height 行高 Background no-repeat center url Border 1px solid实心 radius圆角框 Margin Vertical-align Padding box-sizing :border-box Float:浮动 left right Margin:auto距离上边框0px 距离左右边控自适应 背景设置 Background-position:center center Background-attachment:fixed Background-size:cover 4. 定位: Position:static,absolute,fixed,relative @javascript:一门脚本语言,可以通过浏览器来解析并且运行它,不需要编译 1. ECMAScript基本语言 与html结合方式 内部js 外部js 注释// /* */ Number Sring 转number 字面值是数字则转数字,如果不是则不转 String Boolean Number 转boolean 0和NuN转false Null Undefined Var ==不考虑类型 ===先比较类型,在进行比较 2. 基本对象 Function Var fun=new Function(“形式参数列表”,”方法体”); Function 方法名(){} Var 方法名=function(){} Length代表形式参数的个数 Arguments 不用定义,封装传进的参数 数组Array Join将数组中的元素按照指定的分隔符拼接为字符串 Push向数组的末尾添加一个或多个元素 Js中数组元素的类型可变的。数组长度可变的 Math Random Ceil向上取整 Floor向下取整 Round RegExp:正则表达式对象 单个字符[] \d[0-9] \w[0-9][a-z][A-Z] *表示出现0次或多次 ?表现出现0次或1次 +表示1次或多次 {m,n} ^表示开始 $表示结束 正则表达式创建方式 Var reg=new RegExp(“正则表达式”); Var reg=/正则表达式/ 方法 Reg.test(参数):参数为要验证的内容 3. Global全局对象-在调用方法时,不用书写对象了 encodeURI():将字符串进行url编码 String str=”agga1中文” String encodestr=URLEncoder.encode(str,”utf-8”); decodeURL():将字符串进行url解码 encodeURLComponent decodeURLComponent parseInt():将字符串转为数字,直到不是数字为止 isNaN():判断值是否是NaN Eval():将字符串转为js脚背语言 @DOM文档对象 Document.getElemetnById(“id值”); Title.innerHTML修改标签的内容 1. window Alert()显示带有一段消息和一个确认按钮的警告框 Confirm()显示带有一段消息以及确认按钮和取消按钮的对话框 Prompt()显示可提示用户输入的对话框 Close()关闭浏览器 Open()打开一个浏览器窗口 setTimeout(Js代码或者方法对象,毫秒值)在指定的毫秒数后调用函数或计算表达式 clearTimeout()取消有setTimeout()方法 setInterval()周期循环 clearInterval() 可以获取其它BOM对象-Navigator-Screen-History-Location 获取Dom对象doucment 2. History历史记录对象 创建(获取):window.history||history Back()加载history列表中的前一个url Forward()加载history列表中的下一个url Go()加载history列表中的某个具体页面 Length返回当前窗口历史列表中的url数量 3. location:地址栏独享 Window.location Location Reloat()重新加载当前文档,刷新 Href设置或返回完整的URL @DOM文档对象模型 W3C DOM分为三个不同的部分 1. 核心DOM基础(标准) Document: 创建window.document 方法 获取Element对象: getElementById():根据Id属性值获取元素对象,id属性值一般唯一 getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组 getElementsByClassName():根据class属性值获取元素的对象们 getElementsByName():根据name属性值获取元素对象们。返回是一个数组 创建其它dom对象 createAttribute(name) Createcomment() createElement() createTextNode()添加文本 Element: 元素对象 removeAttribute():删除属性 setAttribute():设置属性 Node:节点对象 appendChild():向节点的子节点列表的结尾添加新的子节点 removeChild():删除(并返回)当前节点的指定子节点 parentNote返回当前的父节点 2. XML DOM:xml的dom定义了特殊的方法和属性,特殊的方法和属性,只能在xml适用 3. HTML DOM:html的dom定义了特殊的方法和属性,特殊的方法和属性只能在html适用 标签体的设置和获取innerHTML Div.innerHTML=<input type=’text’>” 控制样式 适用style属性设置 Div1.style.border=”1px solid red”; Idv1.style.fontSize=”20px” @超链接功能 不跳转:href=”javaScript:void(0)” @调用方法时传入本标签的id Onclick=”delTr(this)” Function delTr(Obj){ Alert(Obj.noteName)//noteName对象名 } @事件监控事件 Onclick 单击事件 Ondblclick: 双击事件 Onblur失去焦点事件 Onfoucs获取焦点事件 Onload窗口加载事件 Onmousedown鼠标按钮被按下事件 Onmouseup鼠标按键被松开事件 Onmousemove鼠标在事物移动事件 Onmouseover布标移到某元素之上 Onmouseout鼠标从某元素移开 Onkeydown某个键盘按键被按下 Onkeyup某个键盘按键被松开 Onkeypress某个键盘按键被按下并松开 Onchange域的内容被改变 Onselect文本被选中 Onsubmit确认按钮被点击 Onreset重置按钮被点击
|