JS中的全局函数

全局函数:JS中提供部分的函数,不需要任何对象,可以直接通过函数名在代码使用。

URL:统一资源定位符
浏览器地址栏中输入的信息
http://www.itheima.com:80/index.jsp?name=zhangsan&password=123

URI:统一资源标识符
URI表示的资源数据不具体 index.jsp 称为一个URI

BOM对象介绍

BOM:browser object model 浏览器对象模型,把当前的浏览器看成一个对象。
通过浏览器对象可以获取和浏览器相关的所有信息。
1.window对象:

是javascript层级中的顶层对象
Window对象有浏览器在加载到body或者frameset标签的时候由JS引擎自动创建。我们在JS代码中可以直接使用,使用window。

window对象中的属于:

专门获取window中包含的其他对象:
document 获取浏览器加载的html文件对象
history 获取浏览器中的历史记录对象
location 浏览器的地址栏对象
navigator 浏览器对象
screen 浏览器窗口在显示器屏幕上的相关对象

        setInterval("函数名",毫秒值)              在指定的毫秒值之后重复执行当前指定的这个函数clearInterval()清除重复执行的动作setTimeout("函数名",毫秒值)在制定的毫秒值后只执行一次某个函数clearTimeout()清除指定的执行动作open() 打开一个新窗口close() 关闭打开的新窗口

2.history对象:

它是javascript对象,不是html dom对象
History对象是有javascript runtime engine 自动创建,由一系列的URL组成的,这些URL是浏览器口内已访问的URL。
唯一保持使用的功能只有back(),forward()和go()方法。

3.Location对象:

包含当前URL的信息

4.navigator对象:

可以访问系统,浏览器的信息。

DOM对象

DOM:Document Object Model 文档对象模型。
文档:html文件。但是后期也可能是xml文档
当浏览器把一个html文件加载到内存中,这时就会在内存中得到一个关于当前这个html文件的对象,这个对象就是DOM对象。

DOM对象的标准:由W3C指定,它规定如何通过JS技术来解析当前加载的这个html文件中的所有标签,以及标签中的属性,还有标签中封装的文本数据。

当我们去解析一个html文件的时候,解析到的标签称为标签对象(元素节点)、标签上的属性称为属性对象(属性节点)、标签中的文本称为文本对象(文本节点)。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应
  • 对 HTML DOM 事件对出反应
  • 如何添加或删除 HTML 元素

DOM获取元素(标签)节点:

        getElementById():   是根据页面上的标签的id属性值。获取当前某个标签对象当获取到一个html页面中的标签对象之后,当前这个标签对象的具体操作需要查阅DHTML文档getElementsByName() :根据页面上标签上的name属性的值,获取当前页面上的标签对象由于标签的name属性的值可能重复,因此获取到的一个数组getElementsByTagName():根据标签的名称获取标签对象,由于页面上会出现同名的标签,因此获取到一定也是一个数组

改变 HTML 输出流:
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

改变 HTML 内容:

ent.getElementById(id).innerHTML=new HTML 

改变 HTML 属性:

document.getElementById(id).attribute=new value 

改变 HTML 样式:

document.getElementById(id).style.property=new style 

HTML DOM 事件

onclick=JavaScript 
  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时
JS中的事件

给页面上的标签绑定事件对应的函数的2种方式:
1、直接在页面上的标签上书写事件名称,然后给名称的属性值绑定JS函数名
2、在页面加载完成之后,通过js和dom技术获取到这个标签对象,然后动态给这个标签绑定事件

<script type="text/javascript">//直接在页面上的标签上绑定事件function _click(){var input = document.getElementById("username");if( input.value == "请输入用户名"){input.value="";}}//动态的给页面上的标签绑定事件//必须在页面架子完成之后绑定事件/*JS中的正则对象:JS中创建正则对象可以直接new,还可以使用/正则表达式/var reg = new RegExp("正则表达式");var reg2 = /正则表达式/;*/window.onload = function(){document.getElementById("username").onblur = function(){//在事件中可以使用this关键字,this表示的是当前发生事件的哪个标签对象var value = this.value;var reg = new RegExp("^\\w{6,12}$");if( reg.test(value) ){document.getElementById("nameSpan").innerHTML = "用户名正确".fontcolor("green");}else{document.getElementById("nameSpan").innerHTML = "用户错误".fontcolor("red");}}   }
</script>
dom中的创建和添加方法

    function demo(){//获取页面上的div标签对象var div = document.getElementById("div");//div.innerHTML = "添加数据";//使用dom技术动态先在内存中创建出一个文本对象var text = document.createTextNode("数据");//把文本标签对象条件到div中div.appendChild(text);}function demo2(){var div = document.getElementById("div");//div.innerHTML = "<a href='http://www.itheima.com'>黑马</a>";//创建a标签对象var a = document.createElement("a");//<a></a>a.innerHTML = "黑马"; //<a>黑马</a> //给a标签上添加属性a.setAttribute("href","http://www.itheima.com");//<a href='http://www.itheima.com'>黑马</a> div.appendChild(a);}
dom中的删除、克隆、替换方法

//删除页面上的id为two 的 divfunction demo(){var two = document.getElementById("two");//删除的时候必须获取当前标签的父标签,才能删除自己var body = two.parentNode;//删除当前div标签对象//获取 id为 one的div 使用兄弟标签获取var one = two.previousSibling;body.removeChild(one);}//替换function demo2(){//使用id为one的div替换id为two的divvar two = document.getElementById("two");var one = document.getElementById("one");//获取父标签var body = two.parentNode;body.replaceChild(one, two);}//克隆替换function demo3(){//使用id为one的div替换id为two的divvar two = document.getElementById("two");var one = document.getElementById("one");//获取父标签var body = two.parentNode;//克隆出id为one的div标签var cloneOne = one.cloneNode(true);body.replaceChild(cloneOne, two);}
JSON格式数据

JSON格式的数据表现形式:
第一种格式:
{
key:value,
key:value,
key:value
}
JSON格式中的数据的key必须是字符串value值可以是任意类型的数据

第二种格式:
[
{ key:value , key:value },
{ key:value , key:value },
{ key:value , key:value }]
/*
json的第一种格式:
var json = {key:value,key:value}
可以根据指定的json对象,调用它的key,得到对应的value
调用的方式:
格式1:对象.key 获取到key对应的value
格式2:对象["key"] 获取到key对应的value

            如果要遍历json个数的所有数据,需要使用循环for in循环====================================================Java中的foreach 遍历容器:for( 容器中的数据类型  变量名 : 容器名 ){变量空间中保持的是容器中的某个元素数据}   ====================================================JS中的for in格式for( var 变量  in 数组|对象|json ){如果是数组的话,变量是数组的下标如果是json个数数据,变量是key值如果是对象,变量是对象中的某个属性或者方法名}       var arr = [4,2,7,9,0,11];for( var i in arr){alert(arr[i]);}*/var json = {"name":"林青霞","age":26,"address":"东莞","sex":"不详","student":{"name":"风清扬","age":32,"address":"西安",}};//for in循环是用来遍历对象或json的for( var j in json ){document.write(j +":"+json[j]+"<br/>");for( var i in json[j] ){document.write(i +":"+json[j][i]+"<br/>");}}var json2 = [{"name":"黑马","age":"5"}];alert(json2[0].name);

注意:var j ; json.j;//这格式是错误的,j是变量,不能这样使用json.j访问该json的属性值。

posted @ 2015-08-25 22:13 beyondbycyx 阅读(...) 评论(...) 编辑 收藏

刷新评论刷新页面返回顶部

转载于:https://www.cnblogs.com/beyondbycyx/p/4758861.html

javascript+dom相关推荐

  1. 六、前端开发-JavaScript DOM

    六.前端开发语言体系-JavaScript DOM 文章目录 六.前端开发语言体系-JavaScript DOM JavaScript DOM DOM简介 DOM方法 DOM事件 DOM事件监听器 D ...

  2. javascript DOM 遍历

    javascript DOM 遍历 由 愚人码头 撰写 http://www.css88.com/archives/514 javascript DOM 遍历 以下一系列的辅助函数可以帮助您,他们能取 ...

  3. javascript DOM(08-21)

    1.createElement()和createTextNode() //创建一个li新元素 var newChild=document.createElement('li'); //创建一个a 新元 ...

  4. html dom 替换节点,从javascript dom文本节点替换

    我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...

  5. javascript dom追加内容的例子

    javascript dom追加内容的例子 javascript dom追加内容的使用还是比较广泛的,在本文将为大家介绍下具体的使用方法. 例子: <!DOCTYPE html PUBLIC & ...

  6. java svg 读取dom结构_SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  7. JavaScript Dom编程艺术

    当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...

  8. html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)...

    本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...

  9. 高性能JavaScript DOM编程

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和 JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间 ...

  10. Javascript——DOM编程

    Javascript--DOM编程 基本概述 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语 ...

最新文章

  1. 学数学,你要如何过题海:游泳?冲浪?划小船?开游艇?
  2. java学习之—实现一个简单的ArrayList
  3. 皮一皮:我是谁,我在哪里,我的爸爸是哪个?
  4. max 安装 mysql5.x_MySQL5.7安装
  5. Matlab | Matlab从入门到放弃(6)——数组
  6. Nacos-环境隔离
  7. 河南农业大学计算机试题,河南农业大学计算机vb考试必出
  8. Python-Django-入门
  9. 用C++实现随机分组
  10. 用计算机如何扫描仪,扫描仪的使用方法 扫描仪怎么用
  11. 编译Linux内核4.4实现可读NTFS
  12. dnmap分布式集群扫描
  13. 一个敷衍的开头。。。
  14. Java手机号码工具类(判断运营商、获取归属地)
  15. windows编程学习——1 关闭窗口不退出
  16. android开发-指纹识别
  17. 基于Spark的案例:同义词识别
  18. 世界气象日话“海洋气象”系列之——CMRC
  19. windows系统配置redis可通过IP访问(外部局域网可访问)
  20. 最新JAVA编程题全集(50题及答案)

热门文章

  1. VC中BSTR和CString的使用
  2. 基于地图开发控件GMap.Net 使用 (一) 原创
  3. Pixysoft.Framework.Noebe.Socket 开发实录
  4. Linux 编程中的API函数和系统调用的关系【转】
  5. Npm 包版本知识总结
  6. 使用AdMob实现广告统一
  7. JAVA Builder模式构建MAP/LIST的示例
  8. Learn Python The Hard Way(20)
  9. Android自定义泡泡效果 源码
  10. 牛客假日团队赛1 B