— Java攻城狮学习路线 —

一. JavaScript基础

输出

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

函数

  • 函数定义
  1. //无参函数
  2. function functionname(){
  3. 执行代码
  4. }
  5. //带参函数
  6. function myFunction(var1,var2){
  7. 代码
  8. }
  9. //带返回值函数
  10. function myFunction(){
  11. var x=5;
  12. return x;
  13. }
  • 函数访问
  1. //访问无参函数
  2. functionname();
  3. //访问带参函数
  4. myFunction(var1,var2);
  5. //访问带返回值函数
  6. var a=myFunction();

对象

  • 对象定义
  1. var person = { firstName:"John",
  2. lastName:"Doe",
  3. age:50,
  4. eyeColor:"blue"
  5. };
  • 对象属性
  1. // 访问对象的两种方式
  2. person.lastName;
  3. person["lastName"];
  • 对象方法
  1. //定义对象方法
  2. methodName : function() { code lines }
  3. //访问对象方法
  4. objectName.methodName()

javascript:void(0)

Javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。

二. JavaScript HTML DOM

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

改变HTML

  • 访问
  1. //通过ID获取
  2. var id = document.getElementById("thisId");
  3. //通过标签获取(获取为一个数组)
  4. var tags = document.getElementsByTagName("div");
  5. //通过类名获取(也为数组)
  6. var class = document.getElementsByClassName("className");
  • 修改
  1. 1.修改HTML内容
  2. document.getElementById(id).innerHTML = "HelloWorld";
  3. 2.修改属性
  4. //获取属性
  5. element.getAttribute("属性名");
  6. //设置属性
  7. element.attribute=新属性值;
  8. element.setAttribute("属性名","修改值");
  9. img.src = "img.jpg"; //设置img的src
  10. a.href = "www.baidu.com"; //设置a的链接

改变CSS

  1. document.getElementById(id).style.property=新样式;
  2. document.getElementById("p2").style.color="blue"; //改变p2的字体颜色为蓝色

事件

事件组成:元素 + 动作 + 反应过程

  1. //事件属性
  2. <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
  3. //HTML DOM分配事件
  4. element.onclick = function(){dispalyDate();};
  5. //HTML DOM EventListener
  6. element.addEventListener("click", function(){dispalyDate();});
  7. element.removeEventListener("mousemove", myFunction);
  8. //onload 和 onunload 事件:用户进入或离开页面时被触发
  9. <body onload="checkCookies()">
  10. //onchange 事件:结合对输入字段的验证来使用
  11. <input type="text" id="fname" onchange="upperCase()">
  12. //onmouseover 和 onmouseout 事件:户的鼠标移至 HTML 元素上方或移出元素时触发
  13. element.onmouseover = function(){...};
  14. element.onmouseout = function(){...};

DOM节点

  • 添加节点
  1. //添加前需要新键节点
  2. var p = document.createElement("p"); //新建元素p
  3. var word = document.createTextNode("文本内容"); //添加文本内容
  4. p.appendChild(word);//作为父元素最后一个子元素添加
  • 插入节点
  1. element.insertBefore(para,child); //插入指定位置
  • 替换节点
  1. parent.replaceChild(para,child);
  • 删除节点
  1. div.removeChild(p);

三. JavaScript 浏览器BOM

浏览器对象模型(Browser Object Model (BOM))

Window

表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

  • Window 尺寸
  1. window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
  2. window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
  • window 方法
  1. window.open() - 打开新窗口
  2. window.close() - 关闭当前窗口
  3. window.moveTo() - 移动当前窗口
  4. window.resizeTo() - 调整当前窗口的尺寸

Window Screen

window.screen 对象包含有关用户屏幕的信息。

  • Window Screen 可用宽度
  1. screen.availWidth;
  • Window Screen 可用高度
  1. screen.availHeight

Window Location

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

  • 属性

    • location.hostname 返回 web 主机的域名
    • location.pathname 返回当前页面的路径和文件名
    • location.port 返回 web 主机的端口 (80 或 443)
    • location.protocol 返回所使用的 web 协议(http:// 或 https://)
  • 方法
  1. //location.assign() 方法加载新的文档。
  2. window.location.assign("http://www.w3cschool.cc");

Window History

window.history 对象包含浏览器的历史

  • history.back() - 与在浏览器点击后退按钮相同
  • history.forward() - 与在浏览器中点击向前按钮相同
  • history.go() - 跳转到指定页面

JavaScript 弹窗

  • 警告框
  1. //用于确保用户可以得到某些信息
  2. alert("sometext");
  • 确认框
  1. //用于验证是否接受用户操作
  2. //返回true或false
  3. var a = confirm("sometext");
  • 提示框
  1. //用于提示用户在进入页面前输入某个值
  2. //如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null
  3. var a = prompt("sometext","defaultvalue");

JavaScript 计时事件

  • setInterval()方法
  1. //间隔指定的毫秒数不停地执行指定的代码。
  2. var timer = setInterval("javascript function",milliseconds);
  • clearInterval()方法
  1. //用于停止 setInterval() 方法执行的函数代码
  2. clearInterval(timer);
  • setTimeout()方法
  1. //在指定的毫秒数后执行指定代码
  2. var timer= setTimeout("javascript function", milliseconds);
  • clearTimeout()方法
  1. //停止执行setTimeout()方法的函数代码
  2. clearTimeout(timer);

JavaScript操作HTML&CSS简单入门的更多相关文章

  1. 一个CSS简单入门网站

    讲的知识简单明了,很实用: http://zh.learnlayout.com/

  2. CSS简单入门

    - Java攻城狮学习路线 - 一. 什么是CSS CSS指层叠样式表(Cascading Style Sheets),定义如何显示HTML元素 二. CSS语法 /* 选择器 { 声明: 声明:}* ...

  3. JavaScript简单入门(补充篇)

    本文是对上一篇 JavaScript简单入门 的一些细节补充. 一.全局变量和局部变量 在<script>标签内定义的变量是当前页面中的全局变量.即 <script>标签可以直 ...

  4. python从入门到大神---4、python3文件操作最最最最简单实例

    python从入门到大神---4.python3文件操作最最最最简单实例 一.总结 一句话总结: python文件操作真的很简单,直接在代码中调用文件操作的函数比如open().read(),无需引包 ...

  5. 简单入门PHP中的多字节字符串操作

    什么是多字节的字符串操作呢?其实不少的同学可能都已经使用过了,但我们还是要从最基础的问题说起. 一个字符占几个字节并不是我们表面上看到的那样.正常情况下,一个数字或英文以及英文符号都是占用一个字节的. ...

  6. javascript操作html元素CSS属性

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .ori ...

  7. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  8. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  9. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

随机推荐

  1. 我所理解的monad(4):函子(functor)是什么--可把范畴简单的看成高阶类型

    大致介绍了幺半群(monoid)后,我们重新回顾最初引用wadler(haskell委员会成员,把monad引入haskell的家伙)的那句话: 现在我们来解读这句话中包含的另一个概念:自函子(End ...

  2. servlet向浏览器输出信息

    package com.aaa.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebS ...

  3. 在Unity中json文件的解析方式

    using System.Collections; using System.Collections.Generic; using UnityEngine; using LitJson; using ...

  4. 解决vcenter 6.0 vcsa安装插件时报错的问题

    在安装vCenter 6.0 vsca的时候,安装插件到第二个的时候,会报出一个windows installer的错误.需要联系软件管理员或者技术支持的一个error. 经过多次的测试,我终于找到了 ...

  5. 启动模拟器的qq

    #coding = utf-8from appium import webdriver '''1.手机类型2.版本3.手机的唯一标识 deviceName4.app 包名appPackage5.app ...

  6. [kernel学习]----如何debug kernel

    #ll /sys/kernel/debug/tracing/events/kmem total 0 -rw-r--r-- 1 root root 0 Feb 3 20:17 enable -rw-r- ...

  7. [luogu1129 ZJOI2007] 矩阵游戏 (二分图最大匹配)

    传送门 Description Input Output Sample Input 2 2 0 0 0 1 3 0 0 1 0 1 0 1 0 0 Sample Output No Yes HINT ...

  8. 3.在eclipse中创建Web项目,并部署到Tomcat上

    1.找到创建web项目的菜单 2.创建web项目并选择web环境 3.查看创建好的web项目结构 4.在web项目的webContent文件夹下创建jsp页面 5.查看是否创建jsp页面成功,并编辑j ...

  9. 转载 - Tarjan算法(求SCC)

    出处:http://blog.csdn.net/xinghongduo/article/details/6195337 说到以Tarjan命名的算法,我们经常提到的有3个,其中就包括本文所介绍的求强连 ...

  10. 对Django框架中Cookie的简单理解

    概念的理解:首先Cookie和Session一样,是django中用于视图保持状态的方案之一.为什么要进行视图保留呢,这是因为浏览器在向服务器发出请求时,服务器不会像人一样,有记忆,服务器像鱼一样,在 ...