javaScript-进阶篇(三)】的更多相关文章

一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已.我们还需使用JavaScript增加行为,为网页添加动态效果.准备好,让JavaScript带你进入新境界吧! JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等) JS进阶篇学习什么?…
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScript 方案: var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientHe…
第1章 系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", "微软雅黑", "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; line-height: 1.6; margin: 0; padding: 1.33rem 1rem } h1,h2,h3,h4,h5,h…
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,window对象重点讲解计时器. 代码示例: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…
断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮,则删除当前行 <!DOCTYPE html> <html> <head> <title> new document </title>…
首先,什么事正则表达式呢,其实引入概念很多时候并不能帮我们明白它到底是什么,所以我先简单描述下,正则表达式,其实就是一个记录字符串规则则的字符串,等我们看完这一部分,也就能明白它到底是什么了. 基本语法:正则表达式就是“/expression/”+表示搜索范围的符号.例如我们要找function这个关键词,就是/function/gi,其中g表示global,就是全局搜索,i表示ignor,就是忽略大小写. 在js中,我们通过RegExp类来实现. 这个类里面有很多很多的符号用来表示不同的索引方…
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼盘 53万购东5环50平     京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝      经典清新简欧爱家 90平老房焕发新生      新中式的酷色温情 66平撞色活泼家居      瓷砖就像选好老婆 卫生间烟道的设计 二手房: 通州豪华3居260万 二环…
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTML代码分解为DOM节点层次图:…
1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:…
1.什么事对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法:能够在对象上执行的动作.例如,表单的“提交”(Submit),时间的“获取”(getYear)等: JavaScript 提供多个内建对象,比如 String.Date.Array 等等,使用对象前先定义,如下使用数组对象: var objectName =new Array();//使用new…
返回星期方法 getDay() 返回星期,返回的是0-6的数字,0 表示星期天.如果要返回相对应“星期”,通过数组完成,代码如下: <script type="text/javascript"> var mydate=new Date();//定义日期对象 var weekday=["星期日","星期一","星期二","星期三","星期四","星期五",&…
#常用函数对象属性介绍2 getAttribute()方法—— 通过元素节点的属性名称获取属性的值. 语法: elementNode.getAttribute(name) 说明: 1. name:要想查询的元素节点的属性名字 setAttribute()方法—— setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值. 语法: elementNode.setAttribute(name,value) 说明: 1.name: 要设置的属性名. 2.val…
1.什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果. 主要事件表:…
1.if语句--做判断 if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件) { 条件成立时执行代码} 注意:if小写,大写字母(IF)会出错! 假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司.代码表示如下: <script type="text/javascript">  var mycarrer = "HTML";  if (mycarrer == "HTML")  {    …
1.什么事数组 我们知道变量用来存储数据,一个变量只能存储一个内容.假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果需要存储更多数据,那就会变的更麻烦.我们用数组解决问题,一个数组变量可以存放多个数据.好比一个团,团里有很多人,如下我们使用数组存储5个学生成绩. 数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. 2.如何创建数组 使用数组之前首先要创建,而且需要把数组本身赋至一个变量.好比我们出游,要组…
一.函数 1. 什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; alert(sum); .... //不停重复两行代码 如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多.所以我们可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省去重复输入大量代码的麻烦. 使用函数完成: function add2(a,b){ sum = a + b…
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerHeight // - 浏览器窗口的内部高度 • window.innerWidth // - 浏览器窗口的内部宽度 二.对于 Internet Explorer 8.7.6.5: • document.documentElement.clientHeight //表示HTML文档所在窗口的当前高度.…
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 一.nodeName 属性: 节点的名称,是只读的. 1. 元素节点的 nodeName 与标签名相同 2. 属性节点的 nodeName 是属性的名称 3. 文本节点的 nodeName 永远是 #text 4. 文档节点的 nodeName 永远是 #document 二.nodeV…
认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合,DOM节点有: 1. 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript.DOM.…
History 对象history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能.窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联. 语法: window.history.[属性|方法] //window可以省略. History 对象属性 History 对象方法 使用length属性,当前窗口的浏览历史总长度,代码如下: <script type="text/javascri…
Array 数组对象数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的数组定义的方法: 1. 定义了一个空数组: var 数组名= new Array(); 2. 定义时指定有n个空元素的数组: var 数组名 =new Array(n); 3.定义数组的时候,直接初始化数据: var 数组名 = [<元素1>, <元素2>, <元素3>...]; 我们定义myArray数组,并赋值,代码如…
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 鼠标单击事件(onclick)onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用.例:我们单击按钮时,触发 onclick 事件,并调用两个数和的函数add2(). <html> <head> <script typ…
这节是根据慕课网和JavaScript DOM编程艺术一书加起来做的笔记 什么是函数如果需要多次使用同一段代码,可以把它们封装成一个函数.函数(function)就是一组允许在你的代码里随时调用的语句.每个函数实际上是一个短小的脚本.如:要完成多组数和的功能. var sum; sum = 3+2; alear(sum); sum = 7+8; alear(sum); ......//不停的重复两行代码 如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多.所以我们可以把完成特定功…
做判断(if语句)if语句是基于条件成立才执行相应代码时使用的语句.语法: if(条件){ 条件成立时执行代码 } 例子:假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司. 1 <script type="text/javascript"> 2 var mycarrer = "HTML"; 3 if (mycarrer == "HTML"){ 4 document.write("你面试成功,欢…
什么是数组数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. <script type="text/javascript"> var myarr=new Array(); //定义数组 myarr[0]=80; myarr[1]=60; myarr[2]=99; document.write("第一个人的成绩是:"+myarr[0]); document.write("第二个人的成绩是:&quo…
现在来说说判断语句(if)if语句是基于条件成立才执行相应代码时使用的语句.语法:if(条件){条件成立时执行代码}注意:if小写,大写字母(IF)会出错!假设你应聘web前端技术开发岗位,如果你会html技术,你面试成功,欢迎加入公司代码表示如下:<script type="text/javascript"> var mycarrer="HTML"; if(mycarrer == "HTML") {  document.write(…
主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证 一.创建对象的几种方式 1.使用Object或者对象字面变量创建对象 (1)使用Object创建对象 例如: var student = new Object(); student.name = "cc"; student.age = 20; 这样,一个student对象就创建完毕,拥有2个属性name以及age,…
把平常撸的码来博客上再撸一遍既可以加深理解,又可以理清思维.还是很纯很纯的小白,各位看官老爷们,不要嫌弃.最近都是晚睡,昨晚也不例外,两点多睡的.故,八点起来的人不是很舒服,脑袋有点晕呼呼,鉴于昨晚看到了这章的编程练习,想着自己DOM编程艺术也差不多看完了,高级3也看了点,所打算开始多敲代码了. 谁知,看着编辑器一脸懵逼,不知道如何啃下这块骨头,米思绪,写着也没什么感觉,索性就不写了,这不下午才来撸它. 要求如下: <!DOCTYPE html> <html> <head&g…
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环    北京首现零首付楼盘 53万购东5环50平    京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝     经典清新简欧爱家 90平老房焕发新生     新中式的酷色温情 66平撞色活泼家居     瓷砖就像选好老婆 卫生间烟道的设计 二手房: 通州豪华3…
如何插入JS JS基础语法 语法.函数.方法 提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>string对象</title>…