javascript语言学习
本课将和大家一起学习简单的js dom 操作,涵盖DOM API以及JQuery的方法。
相关简介
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。[1]为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML)。HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript和 VBScript 使用。Javascript中提供了一系列操作dom的函数,我们称之为DOM API。
Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。同样的Jquery提供了方便、强大的dom节点操作函数,在逐渐成为行业开发标准的今天jquery的学习对于研究和利用前端安全也日益重要。
0x01 DOM节点获取
在输入框中输入JS代码,点击执行就可以执行了。为了便于演示代码的效果,点击右键查看源代码,如下图。
上图中画圈部分的DIV元素,id为output就是我们操作的DOM节点目标。现在我们来依次演示DOM API、JQuery获取该节点的方法。
1) getElementsByTagName、getElementById
通过标签名称来获取,注意output的标签是页面第二个div,所以下标是1。输入如下代码并点击执行。
]; output.innerHTML = 'getElementsByTagName得到取得节点';
如上图,代码成功修改页面下方显示的文字。接下来尝试通过id值来查找,输入如下代码并执行:
var output = document.getElementById('output'); output.innerHTML = 'getElementById得到取得节点';
2) 直接通过ID值操作dom
在唯一ID值的情况下,可以直接通过id值来直接表示节点,输入并执行如下代码:
output.innerHTML = '使用ID直接获取节点';
3) JQuery选择器
使用Jquery 选择器可以通过id值快速选择dom节点。输入如下代码并执行:
$('#output').html('JQuery方法取得节点。');
0x02 DOM节点的创建
接下来我们的目标是在div中创建一个节点,是一个按钮,点击后可以弹出一些文字。在创建代码时要在上一节的基础上,先能够选择到节点。
首先是DOM API,输入如下代码并执行:
var addone = document.createElement('input'); addone.type = 'button'; addone.value = '点击我'; addone.id = 'addone'; addone.onclick = function(){ alert('document.createElement生成的按钮'); } var output = document.getElementById('output'); output.appendChild(addone);
接下来,使用Jquery的append方法来创建,输入如下代码并执行:
$('#output').append('<input id="addone" />'); $('#addone').attr('type', 'button'); $('#addone').attr('value', '点击我'); $('#addone').bind('click', function(){ alert('JQuery 生成的按钮'); });
可以看到,使用Jquery是很有优势的,编程的思路非常清晰。
0x03 DOM节点的删除
如果我们要删除前面创建的节点怎么做呢?首先我们知道我们创建的按钮ID值为addone,那么输入如下代码并执行:
var output = document.getElementById('addone'); output.parentNode.removeChild(output);
JQuery删除节点更加简单,只需要调用remove方法即可,下面这段代码创建按钮的按钮点击过后能删除自己:
$('#output').append('<input id="addone" />'); $('#addone').attr('type', 'button'); $('#addone').attr('value', '点击我删除'); $('#addone').bind('click', function(){ $('#addone').remove(); });
点击“点击我删除”后,按钮消失。
最新文章
- windows 7下qtcreator里QWT文件的pro配置
- 接入Google Play SDK
- Python基本数据类型之list
- 网页中插入FLASH(swf文件),并且让Flash不遮挡HTML元素
- MVC中session创建并获取问题
- Android中的距离单位
- CT 来值班,让您安心过新年!
- Android getResources的作用和须要注意点
- JSP内置对象---application
- HtmlParser应用
- Charles抓包工具使用
- Scss 与 Sass 是什么,他们的区别在哪里?
- Django之组件--auth组件
- ubuntu 16 安装 openjdk 8
- 【netcore基础】MVC API接口权限控制Attribute
- 【git1】git+gitHub+webStorm的使用
- EhCache 配置信息
- Ubuntu16安装GPU版本TensorFlow(个人笔记本电脑)
- mysql 表的增删改查 修改表结构
- poj 1006 Biorhythms (中国剩余定理模板)