主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。...返回值：一个可以传递给 window.clearInterval() 从而取消对 code 的周期性执行的值。...3.2.2 JavaScript样式获得或修改 获得或设置样式 obj.style.属性 ，获得指定“属性”的值。 obj.style.属性=值 ，给指定“属性”设置内容。...获得元素 lgetElementById() 通过id属性值获得元素（整个HTML文档id位置） lgetElementsByName() 通过name属性值获得所有元素（整个...() 通过标签名获得所有的元素 创建 createElement() 创建指定名称的元素 createTextNode() 创建指定内容的文本节点 常见属性 childNodes，获得所有的子节点
DOM(Document Object Model) 文档对象模型 ---- 概念 将标记语言文档（HTML,XML…）的各个部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD动态操作 W3C...ID的td节点 var td_id=document.createElement("td"); //创建节点 var text_id=document.createTextNode...(num); //创建文本子节点 td_id.appendChild(text_id); //插入子节点 //创建姓名的td节点...> HTML DOM 主要功能 标签体的设置和获取：innerHTML 使用html元素对象的属性 控制样式 innerHTML innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML...ondblclick 当用户双击某个对象时调用的事件句柄。 焦点事件 onblur 元素失去焦点。 onfocus 元素获得焦点。
它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。...() 把指定属性设置或更改为指定值 removeAttribute() 元素中移除指定属性 innerHTML 设置或返回元素的内容 注意 innerHTML 获取/设置标签体内容 【该标签会刷新父标签内所有内容...，会导致id绑定的监听失效，需要设置属性绑定】 1.3.2 示例 <!...1.4.1 常用方法 方法 描述 name 返回属性的名称 value 设置或返回属性的值 1.5 事件 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态...1.5.1 事件句柄 点击事件 事件 描述 onclick 单击事件 ondblclick 双击事件 焦点事件 事件 描述 onblur 失去焦点 onfocus 元素获得焦点 加载事件 事件 描述
if(xmlHttp.readyState==4){ //200代表服务器响应成功，404代表资源未找到，500代表服务器内部错误 if..."); //获得这些数据之后，就可以动态的显示数据了。.../* td.onclick = function(){ //这个方法实现的是，当用鼠标点击一个关联数据时，关联数据自动填充到输入框中。...-- 输入框 --> <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur...-- 下面是内容展示的区域 --> <table id="content_table" bgcolor="#FFFAFA" border
获取Element对象 ① getElementById() 根据id属性值获取元素对象。...id属性值一般唯一 ② getElementsByTagName() 根据元素名称获取元素对象们。...方法 ① setAttribute() 设置属性 ② removeAttribute() 删除属性 四、Node对象 1. 概述 * HTML文档会生成一个DOM树。 2....innerHTML 获取/设置标签体内容 【该标签会刷新父标签内所有内容，会导致id绑定的监听失效，需要设置属性绑定】 五、事件监听机制 1....焦点事件 ① onblur 失去焦点 ② onfocus 元素获得焦点。 3. 加载事件 ① onload 一张页面或一幅图像完成加载。 4.
如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示： 改变页面内容 图片 当我点击上面左图的 点击我 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能...而在JavaScript 是一门弱类型语言，变量==可以存放不同类型的值==；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数 var test = 20; test = "张三";...图片 而我们只讲解 length 属性，该数组可以动态的获取数组的长度。...2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态 for (let i = 0; i < hobbys.length; i++) {...如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。 图片 onblur 失去焦点事件。
如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示： 改变页面内容 当我点击上面左图的 点击我 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。...我们应该让用户看到页面内容，然后再展示动态的效果。 ### 2.2 外部脚本 **第一步：定义外部 js 文件。如定义名为 demo.js的文件** 项目结构如下： !...元素对象的 checked 属性值设置为 true 来改变复选框的选中状态 for (let i = 0; i < hobbys.length; i++) { hobbys[i].checked...当表单提交时触发该事件 onmouseover 鼠标被移到某元素之上 onmouseout 鼠标从某元素移开 onfocus 获得焦点事件。...如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。 onblur 失去焦点事件。
开头 ID选择器：# ID选择器 后代选择器： 选择器1 选择器2 子元素选择器：选择器1 > 选择器2 选择器分组： 选择器1，选择器2，选择器3{} 属性选择器：选择器[属性名称='属性值'...scrollTo(): 把内容滚动到指定的坐标 scrollBy(): 按照指定的像素值来滚动内容 resizeTo(): 把窗口的大小调整到指定的宽度和高度 resizesBy(): 按照指定的像素调整窗口的大小...timeout，clearTimeout()取消由setTimeout()方法设置的timeout。..."js文件路径" type="text/javascript" /> ondblclick: 当用户双击某个对象时调用的事件 onerrror: 在加载文档或图像时发生错误 onfocus: 元素获得焦点...(): 创建文本节点 getAttribute(): 返回指定的属性值 setAttribute(): 把指定属性设置值 ?
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。 3.2、Element元素的获取操作 具体方法 代码实现 <!...常用的事件 事件名 说明 onblur 元素失去焦点，在对象失去焦点时发生 onchange 域的内容被改变时发生 onclick 当用户点击某个对象时调用的事件句柄 ondblclick...当用户双击某个对象时调用的事件句柄 onfocus 元素获得焦点时发生 onsubmit 确认按钮被点击时发生 onreset 重置按钮被点击，事件会在表单中的重置按钮被点击时发生...创建 tr 元素。 创建 4 个 td 元素。 将 td 添加到 tr 中。 获取文本框输入的信息。 创建 3 个文本元素。 将文本元素添加到对应的 td 中。 创建 a 元素。...将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。 8.1、Windows窗口对象 定时器 唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
设置触发条件 这里模拟一个使用场景，就是在用户登陆时，异步的对用户名以及密码进行验证。所以使用onBlur()触发，onBlur函数在输入框焦点遗失时，就会触发。... 16 创建Ajax的对象 由于Ajax并不是一个统一的标准，因此各个浏览器有自己的创建方式，因此在创建时，需要进行浏览器的验证，使用如下的验证方法即可。...在函数返回时，可以使用之前创建好的req对象，调用它的readystate 以及 status属性，4表示XMLHttpRequest对象响应正常结束。200表示HTTP请求获得正确的响应。 ...成功时的效果！...失败时的效果！
不是一种新的编程语言 ，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS的新用法。 Ajax：只刷新局部页面的技术。...包括以下几种技术： JavaScript：更新局部的网页。 XML：一般用于请求数据和响应数据的封装。 XMLHttpRequest对象：发送请求到服务器并获得返回结果(浏览器内核创建的)。... method参数：指请求的HTTP方法，典型的值是GET或POST URL参数：指请求的地址 async参数：指是否使用异步请求，其值为true或false，默认值是true，一般这个参数不写...> 使用Ajax验证用户名是否存在的实现步骤： 使用文本框的onblur事件(失去焦点事件) 使用Ajax技术实现异步交互 a) 获取用户名 a) 创建 XMLHttpRequest 对象 b)...处理响应结果，创建回调函数，根据响应状态动态更新页面 c) 建立一个连接 d) 发送请求 示例代码如下： <%@ page language="java" contentType="text/<em>html</em>;
如果我们能够在客户端（浏览器）对用户输入的数据先进行验证，这样会减少针对服务器请求的频率，从而缓解Web服务器访问的压力。...假设具体的验证操作实现在validate函数中，那么我们可以采用如下的HTML时相应的文本框在失去焦点的时候对输入的数据实施验证。...虽然演示jQuery验证使用一个单纯的HTML文件就可以了，但是在这里我们还是通过Visual Studio的ASP.NET MVC项目模板创建一个空的Web应用，这样做有两个目的：其一、项目在创建过程中会自动添加包含...由于我们使用View来定义最终呈现的完整的HTML，所以我们将Layout设置为Null。 1: @{ 2: Layout = null; 3: } 4: <!...现在我们将上面演示实例中的View的HTML进行相应的修改，将包含在表单中的四个文本框通过class属性设置的验证规则移除。
1.1：第一种方式：先说使用get方法向服务器发送请求的方法吧； 首先创建一个页面，如register.jsp,代码如下所示： 1 8 9 //onblur失去焦点的值 10 11 //定义一个变量用于存放XMLHttpRequest...("account").value; 16 //alert("测试获取文本框的值："+account); 17 //先创建XMLHttpRequest对象 18...注册的页面 8 9 //onblur失去焦点的值 10 11 //定义一个变量用于存放XMLHttpRequest...("account").value; 16 //alert("测试获取文本框的值："+account); 17 //先创建XMLHttpRequest对象 18
Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。...使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。 使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。..."jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?...：失去焦点触发事件--%> 用户名: 5、启动tomcat测试！..." id="pwd" onblur="a2()"> 【记得处理json乱码问题】 测试一下效果，
当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件: myScript.js文件 //外部js文件中不能有script标签，直接编写JavaScript脚本代码即可...可以通过将变量的值设置为 null 来清空变量。...该值介于 2 ~ 36 之间 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。...HTML元素上移开鼠标 onkeydown 用户按下键盘按键 onload 浏览器已完成页面的加载 onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 function...获得了足够的能力来创建动态的 HTML： JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有
Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。...使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。 使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。..."jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?..., 发起一个请求(携带信息)到后台--%> 用户名:...="name" onblur="a1()"/> 密码:<input type="text" id="pwd" onblur
AJAx是一种无需重新加载整个页面的情况下,能够更新部分页面的技术 AJAx 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术 传统页面(不适用ajax技术的页面...高可用、更丰富、更动态的Web用户界面。...JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?...//发给服务器 //接收服务器返回的数据 } 用户名 密码 <span
为网页创建的表称为网页表。...动态网页表 表中显示的信息是动态的。例如，电子商务网站上的详细产品信息，销售报告等。 为了演示如何使用Selenium处理表格，我们使用w3school HTML表格页面中可用的表格。...尽管使用表时跨浏览器测试的问题较少，但是Internet Explorer，Chrome和其他Web浏览器的某些旧版浏览器不支持HTML Table API。...获得有关行的详细信息后，我们将迭代该行下的标签。 在这种情况下，对于本Selenium WebDriver教程，行（）和列（）都是可变的。...列值附加到XPath的值为td [1] / td [2] / td [3]，具体取决于必须访问以处理Selenium中的表的行和列。
[attribute *= value] 选取属性值包含value的所有元素 练习6： ² 设置所有含有id属性的div，字体颜色红色 ² 设置所有class属性值 含有itcast元素背景色为黄色...value... }); attr("checked","true") 等价于 prop("checked") 练习1： ² 点击一个button，动态设置 div的属性 id name class.../jquery-1.8.3.min.js"> // 点击一个button，动态设置 div的属性 id name class...> ④：HTML代码&文本&值操作 l 读取和设置某个元素中HTML内容 html() 读取innerHTML html(content) 设置innerHTML l 读取和设置某个元素中的文本内容...练习3： ² 传智播客 获取div中 html和text 对比 ² 使用val() 获得文本框、下拉框、单选框选中的value ² 测试能否通过 val() 设置单选框
领取专属 10元无门槛券
手把手带您无忧上云
