JavaScript 基础
2018-06-29 10:40:05 2 举报AI智能生成
JavaScript 基础，JavaScript 基础，JavaScript 基础，JavaScript 基础
作者其他创作
大纲/内容
js 面向对象
创建对象方式
第一种new Object()创建对象<br>
var flower = new Object();
<br>flower.name = "长春花";
<br>flower.genera = "夹竹桃科 长春花属";
<br>flower.area = "非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
<br>flower.uses = "观赏或用药等";
<br>flower.showName = function() {
<br>alert(this.name);
<br>}
<br>flower.showName();
第二种字面量赋值方式创建对象<br>
var flower = {
<br>name: "长春花",
<br>genera: "夹竹桃科 长春花属",
<br>area: "非洲、亚热带、热带以及中国大陆的华东、西南、中南等地",
<br>uses: "观赏或用药等",
<br>showName: function() {
<br>alert(this.name);
<br>}
<br>}
<br>flower.showName();
第三种构造函数创建对象<br>
function Flower(name, genera, area, uses) {
<br>this.name = name;
<br>this.genera = genera;
<br>this.area = area;
<br>this.uses = uses;
<br>this.showName = function() {
<br>alert(this.name);
<br>}
<br>}
<br>var flower1 = new Flower("长春花", "夹竹桃科 长春花属", "非洲、亚热带、热带以及中国大陆的华东、西南、中南等地", "观赏或用药等")
<br>flower1.showName();
DOM：Document Object Model（文档对象模型）
访问(查找)节点
getElementById() 返回对拥有指定id的第一个对象的引用
getElementsByName() 返回带有指定名称的对象的集合
getElementsByTagName() 返回带有指定标签名的对象的集合
<div>根据层次关系访问节点<br></div>
节点属性
parentNode <span> </span>返回节点的父节点
childNodes <span> </span>返回子节点集合，childNodes[i]
firstChild <span> </span>返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild <span> </span>返回节点的最后一个子节点
nextSibling <span> </span>下一个节点
previousSibling <span> </span>上一个节点
element属性
firstElementChild <span> </span>返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild <span> </span>返回节点的最后一个子节点
nextElementSibling <span> </span>下一个节点
previousElementSibling <span> </span>上一个节点
操作节点的属性
getAttribute("属性名")
setAttribute("属性名","属性值")
操作html标签，创建和插入
createElement( tagName) <span> </span>创建一个标签名为tagName的新元素节点
A.appendChild( B) <span> </span>把B节点追加至A节点的末尾
insertBefore( A,B ) <span> </span>把A节点插入到B节点之前
cloneNode(deep) <span> </span>复制某个指定的节点
操作css样式
style
var d1 = document.getElementById("d1");
<br> d1.style.display="block";
操作的是标签内style的属性
className
var d1 = document.getElementById("d1");
<br> d1.style.className="ahover";
操作的是css当中的类样式
BOM：浏览器对象模型（Browser Object Model）
window
常用的方法
prompt( ) 显示可提示用户输入的对话框
alert( ) 显示带有一个提示信息和一个确定按钮的警示框
confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框
close( ) 关闭浏览器窗口
open( ) 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( ) 在指定的毫秒数后调用函数或计算表达式
setInterval( ) 按照指定的周期（以毫秒计）来调用函数或表达式
history
back() 加载 history 对象列表中的前一个URL
<div>forward() 加载 history 对象列表中的下一个URL <br></div>
go() 加载 history 对象列表中的某个具体URL
location
属性 host 设置或返回主机名和当前URL的端口号
属性hostname 设置或返回当前URL的主机名
属性href 设置或返回完整的URL
方法reload() 重新加载当前文档
方法replace() 用新的文档替换当前文档
document
<div>getElementById() 返回对拥有指定id的第一个对象的引用<br></div>
getElementsByName() 返回带有指定名称的对象的集合
<div>getElementsByTagName() 返回带有指定标签名的对象的集合<br></div>
<div>write() 向文档写文本、HTML表达式或JavaScript代码<br></div>
核心语法
声明一个变量 var num =10;
声明一个数组 var arr = new Array(5);
数组的方法
<div>join( ) 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔<br></div>
sort() 对数组排序
push() 向数组末尾添加一个或更多 元素，并返回新的长度
更多方法参考：<div>http://www.w3school.com.cn/js/jsref_obj_array.asp<br></div>
数组的属性 .length 获得数组长度
数据类型
string
boolean
number
null
undefinded
typeof 检测变量的返回值
JavaScript 中字符串String的方法
charAt(index) 返回在指定位置的字符
<div>indexOf(str，index) 查找某个指定的字符串在字符串中首次出现的位置<br></div>
<div>substring(index1，index2)</div><div>返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符</div><div><br></div>
split(str) 将字符串分割为字符串数组
常用系统函数
<div>parseInt ("字符串")</div><div>将字符串转换为整型数字 </div><div>如: parseInt ("86")将字符串“86“转换为整型值86</div>
<div>parseFloat("字符串")</div><div>将字符串转换为浮点型数字 </div><div>如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45</div>
<div>isNaN()</div><div>用于检查其参数是否是非数字</div>
事件
onload 一个页面或一幅图像完成加载
onlick 鼠标单击某个对象
onmouseover 鼠标指导移到某元素上
onkeydown 某个键盘按键被按下
onchange 域的内容被改变
自定义函数
<div>function 函数名( 参数1,参数2,参数3 ){</div><div> //JavaScript语句</div><div> [return 返回值]</div><div>}</div>
<p><span>调用函数<br></span><font color="#000000" face="Arial">函数调用一般和表单元素的事件一起使用，调用格式</font><br></p>
语法：事件名＝ "函数名( )";
什么是javaScript
基于对象和事件驱动 脚本语言 弱语言
特点:解释性语言，边执行边解释
JavaScript组成
BOM==浏览器
DOM==html代码文档树
ECMAScript
基本结构
<span> </span><script type="text/javascript" charset="utf-8"><br><br> javaScript 语句<br></script>
0 条评论
下一页
