区分：

JavaScript和JAVA一点关系没有，是一门单独的语言。（浏览器就是JavaScript的解释器）

JavaScript代码存在形式：

  1. #这些代码一般都是在<head></head>里边写的
  2.  
  3. 第一种是直接放在head里边
  4. <head>
  5. <style>CSS代码</style>
  6. <script>JavaScript代码</script>
  7. </head>
  8.  
  9. 第二种是利用脚本引入的方式
  1. <head>
  2. <script src="*.js">JavaScript代码</script>
  3. </head>

网页解释器的代码是从上向下进行，如果要把<script>的代码写到<head>上面，有可能出现地址访问不到网页一直转圈的情况，所以我们可以先让代码先执行完，再执行scipt代码。

也就是将<script>放在<body></body>里边的最后。

同理，<style>也一样

单行注释：//

多行注释：/*   */

JavaScript基础：

　　基本数据类型：

数字

字符串

列表

字典

布尔类型

条件语句

for循环（学语言一般要按照这个顺序写）

全局变量：

　　name=“alex”

局部变量：

　　var name="alex"

#声明变量一定要注意全局变量和局部变量的区别。

  1. 数字：
  2. age=18;//表示创建了一个数字
  3. <再写JavaScript代码的时候，可以在浏览器的终端写F12（console）>
  4.  
  5. 字符串：
  6.         a="alex";
  7.         //取字符串
  8.         a.charAt(1)
  9.         //切片，取第几个到i-1的字符串
  10.         a.substring(1,4)
  11.         //字符串的长度
  12.         a.length
  13.  
  14. 创建一个定时器
  15.         //setInterval("执行的操作",多少毫秒)
  16.         setInterval("alert(123);",5000)
  17.         或者setInterval("f1()",5000)
  18.  
  19. document.getElementById("li")
  20.         <div id="l1">欢迎老男孩莅临指导</div>
  21.         <script>
  22.         document.getElementById("li");   #根据ID来判断是哪个标签
  23.         tag=document.getElementById("li");
  24.         tag.innerText                    #看标签里面的文本
  25.         </script>
  26.  
  27.         #跑马灯小练习
  28.             <script>
  29.             function func(){
  30.                 //根据ID获取指定标签的内容
  31.                 var tag=document.getElementById("l1");
  32.                 //获取标签内部的内容
  33.                 var content = tag.innerText;
  34.  
  35.                 var f = content.charAT(0);
  36.                 var l = content.substring(l,content.length);
  37.                 var new_content = l + f ;
  38.                 tag.innerText=new_content;
  39.             }
  40.  
  41.             setInterval("func()",1000);
  42.             </script>
  43.             <div id="l1">欢迎老男孩莅临指导</div>
  44.  
  45. 布尔类型：
  46.         小写的false或true
  47.  
  48. 数组：（列表）a=[11,22,33]
  49.         obj.splice(起始位置，删除个数，插入什么数据)    插入，删除，或替换数字的元素
  50.         obj.slice() 切片
  51.         obj.join("分隔符")  在js中是列表的方法
  52.         obj.concat(value)   拼接
  53.  
  54. 字典：
  55.         a={'k1':'v1','k2':'v2'};
  56.  
  57. for循环：
  58.     第一种方式：循环时循环的是索引
  59.         a=[11,22,33,44]
  60.         for(var item in a ){
  61.             console.log(a[item]);
  62.         }
  63.         #这里输出的是列表的索引
  64.  
  65.     第二种方式：
  66.         for(var i=0;i<10;i++){
  67.         }
  68.  
  69.         eg:
  70.         a=[11,22,33,44]
  71.         for(var i=0;i<a.length;i=i+1){
  72.             console.log(a[item]);
  73.         }
  74.         //不支持字典的循环
  75.  
  76. 条件语句：
  77.         if(条件){}
  78.         else if(条件){}
  79.         else{}
  80.  
  81.         ==值相等
  82.         ===值和类型都相等
  83.         &&  and
  84.         ||  or

JavaScript函数：

  1. 函数：
  2.         function 函数名(a,b,c){
  3.             执行代码
  4.         }

Dom选择器：

  1. 1，如何去找到标签
  2. Dom直接选择器：
  3.         1，找到标签
  4.             #获取单个元素
  5.             document.getElementById('id')
  6.             整个html的id不可重复
  7.  
  8.             #获取多个元素
  9.             document.getElementByTagName("div")
  10.             或者
  11.             document.getElementByClassName('class')
  12.  
  13. Dom间接选择器：
  14.         也就是说先找到一个标签，然后去找他的上级，下级，父级等标签
  15.         tag = document.getElementById('id')
  16.  
  17.         parentElement           // 父节点标签元素
  18.         children                // 所有子标签
  19.         firstElementChild       // 第一个子标签元素
  20.         lastElementChild        // 最后一个子标签元素
  21.         nextElementtSibling     // 下一个兄弟标签元素
  22.         previousElementSibling  // 上一个兄弟标签元素
  23.         可以利用tag.方法来使用
  24.  
  25. 2，操作标签
  26.         标签.innerText=""           #对标签内的元素重新赋值
  27.         标签.className=""            #改掉class的值
  28.         标签.classList.add=""        #添加指定样式
  29.         标签.classList.remove=""    #删除指定样式

实现一个菜单切换的小例子模型：
　　

  1. <div onclick='func()'>点我</div>
  2.     <script>
  3.         function func(){
  4.         }
  5.     </script>

Day14 JavaScript的更多相关文章

  1. Day14 Javascript 点击添加出弹窗，取消隐藏弹窗小练习 反选，全选，取消边框

    点击添加出弹窗,取消隐藏弹窗小练习 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. 【目录】Python自动化运维

    目录:Python自动化运维笔记 Python自动化运维 - day2 - 数据类型 Python自动化运维 - day3 - 函数part1 Python自动化运维 - day4 - 函数Part2 ...

  3. 前端基础之JavaScript - day14

    写在前面 上课第14天,打卡: 唯心不易,坚持! 参考:http://www.cnblogs.com/yuanchenqi/articles/6893904.html 前言 一个完整的 JavaScr ...

  4. Python之路,Day14 - It's time for Django

    Python之路,Day14 - It's time for Django   本节内容 Django流程介绍 Django url Django view Django models Django ...

  5. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  6. python开发学习-day14(jquery、ajax等)

    s12-20160421-day14 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  7. day14(编码实战-用户登录注册)

    day14 案例:用户注册登录 要求:3层框架,使用验证码   功能分析 注册 登录   1.1 JSP页面 regist.jsp 注册表单:用户输入注册信息: 回显错误信息:当注册失败时,显示错误信 ...

  8. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  9. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

随机推荐

  1. Java进阶(三十六)深入理解Java的接口和抽象类

    Java进阶(三十六)深入理解Java的接口和抽象类 前言 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太 ...

  2. java设计模式---三种工厂模式

    工厂模式提供创建对象的接口. 工厂模式分为三类:简单工厂模式(Simple Factory), 工厂方法模式(Factory Method)和抽象工厂模式(Abstract Factory).GOF在 ...

  3. 分布式进阶(二)Ubuntu 14.04下安装Dockr图文教程(二)

    4.1 构建我们自己的映像 构建Docker映像有两种方法: •通过docker commit(提交)命令 •通过docker build(构建)命令以及Docker文件(Dockerfile) 目前 ...

  4. 1. MariaDB简介

    作者: 铁锚 日期: 2013年9月21日 官方博客地址:https://mariadb.org/ 官网地址: https://mariadb.com/ 百度百科地址: http://baike.ba ...

  5. gcov 统计 inline 函数

    gcov 统计 inline 函数 (金庆的专栏) gcov可以统计 inline  函数,可是实际使用中碰到统计次数总是为0的现象. 假设类A的头文件为 A.h, 实现文件为 A.cpp. A 有几 ...

  6. VC++读取图像RGB值

    代码: #include <iostream> #include <fstream> #include <string> #include <windows. ...

  7. numpy教程：矩阵matrix及其运算

    http://blog.csdn.net/pipisorry/article/details/48791403 numpy矩阵简介 NumPy函数库中存在两种不同的数据类型(矩阵matrix和数组ar ...

  8. 【一天一道LeetCode】#64. Minimum Path Sum.md

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  9. 关于reverse_iterator

    这个reverse_iterator曾经搞得我头大,其对应的函数也是那么的可不理解...现在一切都好了. 对于left_null>1->2->3->4->right_nu ...

  10. 基于Struts+Hibernate开发过程中遇到的错误

    1.import  javax.servlet.http.HttpServletRequest 导入包出错 导入包出错,通常是包未引入,HttpServletRequest包是浏览器通过http发出的 ...