js导读

  1. '''
  2. js属于编写运行在浏览器上的脚本语言(相当于具有逻辑的代码)
  3.  
  4. 一个完整的JavaScript实现应该由以下三部分组成:1)ECMAScript:核心 2)DOM:文档对象模型 3)BOM:浏览器对象模型
  1. js采用ECMAScript语法
  2. 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录
  3. 操作DOM:文档对象模型
  4. '''

js引入

  1. <style>
  2.     #box, #wrap, #temp, #res {
  3.         width: 200px;
  4.         height: 200px;
  5.         background-color: red;
  6.         margin-top: 10px;
  7.     }
  8. </style>
  9. <!--1.行间式: js代码块也就是脚本书写在事件的全局属性中-->
  10. <!--this就是激活该代码块(脚本)的页面标签(页面元素对象)-->
  11. <div id="box" onclick="this.style.borderRadius = '10px'"></div>
  12. <div id="wrap" onclick="this.style.backgroundColor = 'orange'"></div>
  13.  
  14. <!--2.内联式-->
  15. <div id="temp"></div>
  16. <!--操作写在下面-->
  17. <script>
  18.     // id为标签的唯一标识, 使用可以识别到html中的具体标签
  19.     temp.onclick = function () { // 完成某一项功能
  20.         this.style.width = "400px";  // this => temp
  21.     }
  22. </script>
  23.  
  24. <!--3.外联式-->
  25. <div id="res"></div>
  26. <script src="js/1.js">
  1. // js/1.js
  2. res.onclick = function () {  // res点击会触发一个功能
  3.     this.style.height = "100px";  // this => res
  4.     this.style.backgroundColor = "yellow";
  5.     this.style.borderRadius = "50%";
  1. <script></script> 写在 </body>与</html>之间

js选择器

  1. <body>
  2.     <div id="box"></div>
  3.     <div id="box"></div>
  4. </body>
  5. <script>
  6.     box.onclick = function () {
  7.       this.style.borderRadius = "50%";
  8.     }
  9. </script>
  10. //上述结果一个都匹配不到
  11. //注意:虽然id可以重复,但是js中却无法唯一标识识别,为了可以唯一标识识别,我们要确保标签id名的唯一性
  12.  
  13. // document对象 文档对象:整个页面中的所有对象,通过document可以获取文档中的所有对象
    //getElement系列选择器
  14. <body>
  15.     <div id="box"></div>
  16.     <div id="box"></div>
  17. </body>
  18. <script>
  19.     document.getElementById('box').onclick = function () {
  20.         this.style.borderRadius = "50%";
  21.     }
  22. </script>
  23. // 上述操作能获得到第一个id="box", 但是第二个永远取不到, 所以id还是不能重复
  24.  
  25. js中如何定义变量名?
    关键字 变量名 = 变量值
  26. var num = 10;
  27. 如何查看变量名?
  28. 不能用print(num),这个操作是调用浏览器使用打印机
  29. ①弹出框查看 alert(num)
  30. ②浏览器控制台查看 console.log(num);
  31. ③将内容书写在页面中 document.write(num);
  32. ④断点调试
  33. ②④使用的比较多
  34.  
  35. <div id='box'></div>
  36. <div id='box'></div>
  37. <div class='box1'></div>
  38. <div class='box1'></div>
  39. <div class="box2">1</div>
  40. <div class="box2">2</div>
  41. <script>
  42. // getElement系列
  43. //①通过id查找
  44. // box 获取的是第一个box
  45. var box = document.getElementById('box');
  46. console.log(box) #结果:<div id='box'></div>
  47. box.onclick = function () {
  48.     this.style.backgroundColor = "red";
  49. }
  50.  
  51. //②通过类名查找=>类名可以重复,获取结果是数组(列表)
  52. // [] | [.box1] | [.box1, ..., .box1]
  53. var boxs = document.getElementsByClassName('box1');
  54. console.log(boxs) #结果:[div.box1, div.box1]
  55. boxs[0].onclick = function () {
  56.     this.style.backgroundColor = "pink";
  57. }
  58. boxs[1].onclick = function () {
  59.     this.style.backgroundColor = "black";
  60. }
  61.  
  62. //③通过标签名查找=>标签名=>获取结果数组(列表)
  63. // [] | [div] | [div, ..., div]
  64. var divs = document.getElementsByTagName('div');
  65. console.log(divs) #结果:[div#box, div#box, div.box1, div.box1, div.box2, div.box2, box: div#box]
  66. divs[1].onclick = function () {
  67.     this.style.borderRadius = "50%";
  68. }
  69. // 总结: 参数采用的是id名或类名或标签名,不需要带符号(#|.)
  70. </script>
  71.  
  72. <script>
  73. // 只能获取检索到的第一个满足条件的标签(元素对象)
  74. var box2 = document.querySelector('body .box2');
  75. console.log(box2)
  76. box1.onclick = function () {
  77.     this.style.borderRadius = "50%";
  78. }
  79. // 获取的是所有满足条件的标签
  80. var boxes = document.querySelectorAll('body .box2');
  81. console.log(boxes)
  82. boxes[0].onclick = function () {
  83.     this.style.backgroundColor = "pink";
  84. }
  85. boxes[1].onclick = function () {
  86.     this.style.backgroundColor = "black";
  87. }
  88. // 总结: 参数采用的就是css选择器语法
  89. </script>

事件

  1. var box = document.querySelector('.box');
  2.  
  3. // 元素对象.事件名 = 函数
  4. box.onclick = function() {
  5.     // 具体功能代码块; this代表就是激活该事件的元素对象
  6.     this.style.color = 'red'; // 将box的字体颜色修改为红色
  7. }

操作页面文档

  1. // 1. 通过选择器获取页面元素对象(指定的标签)
  2. // 2. 为该对象绑定事件
  3. // 3. 通过事件中的功能操作元素对象
  4. // i) 修改内容: innerText | innerHTML
  5. // ii) 修改样式
  6. // iii) 修改类名
  7.  
  8. var box = document.querySelector('.box'); // 获取页面元素
  9. box.onclick = function () {  // 绑定事件
  10.     // 修改内容
  11.     // this.innerText = "innerText";  // 不能解析html标签
  12.     // this.innerHTML = "<i>innerHTML</i>";  // 可以解析html标签
  13.  
  14.     // 修改样式 => 修改的是行间式 => 优先级高于所有内联外联样式(没有设置!important前提下)
  15.     // this.style.color = "green";
  16.     // this.style.fontSize = "12px";
  17.  
  18.     // 修改类名
  19.     // this.className = "box1";  // 直接修改类名, 会丢失之前类名下的属性们
  20.     // 在原类名基础上添加类型
  21.     this.className += " box1"; // 多类名之间用空格隔开, 所有做字符串拼接时一定需要添加空格
  22.     // 清除类名
  23.     this.className = "";  // 将类名等于空字符串就是置空类名
  24. }

计算后样式

  1. //什么是计算后样式?内联式和外联式书写的样式都是计算后样式
  2.  
  3. // 如何获取提取设置好的样式属性值
  4. var box = document.querySelector('.box');
  5. var ftSize = box.style.fontSize;  // 这种方式操作的永远是行间式
  6. console.log(">>>>>>>>>>>>>>>>" + ftSize);
  7.  
  8. // 内联或外联设置(getComputedStyle也能获取到行间式的设置)
  9. .box {
  10.     font-size: 100px;
  11. }
  12. // 如何获取计算后样式
  13. // getComputedStyle(元素对象, 伪类).属性名
  14. var box = document.querySelector('.box');
  15. var ftSize = getComputedStyle(box, null).fontSize;
  16. console.log(ftSize);  // 100px

数据类型

  1. // 1.定义变量
  2. var num = 10;
  3. var s = "hello js";
  4. console.log(num, "<<>>", s);
  5. console.log("%d  %s", num, s);
  6. // 将字符串赋值给页面元素对象,直接在页面上打印
  7. box.innerText = s;
  8.  
  9. //命名规范：
  10. // 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
  11. // 区分大小写
  12. // 不能出现关键字及保留字
  13. // var var = 30;  // 出错

值类型

  1. // Number: 数字类型
  2. var a1 = 10;
  3. var a2 = 3.14
  4.  
  5. // String: 字符串
  6. var s1 = "123";
  7. var s2 = '456';
  8.  
  9. // undefined: 未定义
  10. var u1;
  11. var u2 = undefined;
  12.  
  13. // Boolean: 布尔
  14. var b1 = true;
  15. var b2 = false;
  16.  
  17. // typeof() 来查看数据类型
  18. eg:console.log(a1,typeof(a1));
  19.  
  20. 注意:js不直接操作内存

引用类型

  1. // Object:对象类型=>可以当做字典来使用
  2. var obj = {};
  3.  
  4. // Function:函数类型
  5. var func = function(){}
  6.  
  7. // Null =>空对象
  8. var n = null;

常用对象类型

  1. // 数组
  2. a = new Array(1, 2, 3, 4, 5);
  3. a = [5, 4, 3, 2, 1];  // 语法糖
  4.  
  5. // 时间对象
  6. var a = new Date();//当前时间
  7. // a = new Date("2019-3-1 12:00:00");  // 设定的时间
  8. console.log(a.getFullYear());//年
  9. console.log(a.getDay()); // 周几
  10. console.log(a.getMonth()); // 月份(从0开始)
  11. console.log(a.getDate()); // 几号
  12. // 浏览器cookie 需要前后台交互,存储临时状态 如:过期时间,七天免登陆
  13.  
  14. //正则
  15. re = /\d{2}/g;
  16. res = 'a1b23c456'.match(re);
  17. console.log(res);
  18. 结果:(2) ["23", "45"]
  19.  
  20. re =/[abc]/gi; //a或b或c
  21. res = 'aBc'.match(re);
  22. console.log(res);
  23. 结果:(3) ["a", "B", "c"]
  24. // 总结:
  25. // 1.正则 /正则语法/
  26. // 2.参数g 全文匹配
  27. // 3.参数i 不区分大小写

数组与对象（字典）的使用

  1. var arr = [3,5,2,1,4];
  2. console.log(arr[1]);
  3.  
  4. var dic = {'name':'henry','age':18,'little-name':'zz'};
  5. console.log(dic['name']);
  6. console.log(dic['age']);
  7. console.log(dic.name);
  8. console.log(dic.age);
  9. console.log(dic['little-name']);
  10. // dic中所有的key都是string类型, value可以为任意类型
  11. // dic中key可以通过中括号及 .语法访问值,当key不满足js命名规范时,只能使用中括号语法

js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型的更多相关文章

  1. js事件,操作页面文档,计算后样式,数据类型

    js:运行在浏览器的脚本语言 js引入 1.行间式:存在于行间事件中 <div id="div" onclick="this.style.color="r ...

  2. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  3. js闭包 选择器 面向对象 事件 操作页面

    闭包js函数的嵌套定义,定义在内部的函数 就称之为闭包为什么使用闭包: 1.一个函数要使用另一个函数的局部变量 2.闭包会持久化包裹自身的函数的局部变量 3.解决循环绑定 function outer ...

  4. python 之 前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作）

    11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <scr ...

  5. Java文件操作系列[3]——使用jacob操作word文档

    Java对word文档的操作需要通过第三方组件实现,例如jacob.iText.POI和java2word等.jacob组件的功能最强大,可以操作word,Excel等格式的文件.该组件调用的的是操作 ...

  6. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  7. 文档对象模型操作xml文档

    简介 :文档对象模型(DOM)是一种用于处理xml文档的API函数集. 2.1文档对象模型概述 按照W3C的定义,DOM是“一种允许程序或脚本动态地访问更新文档内容,结构和样式的.独立于平台和语言的规 ...

  8. 操作xml文档的常用方式

    1.操作XML文档的两种常用方式: 1)使用XmlReader类和XmlWriter类操作 XmlReader是基于数据流的,占用极少的内存,是只读方式的,所以速度极快.只能采用遍历的模式查找数据节点 ...

  9. 操作PDF文档功能的相关开源项目探索——iTextSharp 和PDFBox

    原文 操作PDF文档功能的相关开源项目探索——iTextSharp 和PDFBox 很久没自己写写心得日志与大家分享了,一方面是自己有点忙,一方面是自己有点懒,没有及时总结.因为实践是经验的来源,总结 ...

随机推荐

  1. django基础（一）

    一.创建django程序 1.终端:django-admin startproject sitename 2.IDE创建Django程序时,本质上都是自动执行上述命令 常用命令: python man ...

  2. openCV学习——一、图像读取、显示、输出

    openCV学习——一.图像读取.显示.输出   一.Mat imread(const string& filename,int flags=1),用于读取图片 1.参数介绍 filename ...

  3. mysql数据库表设计小数类型

    float:浮点型,含字节数为4,32bit,数值范围为-3.4E38~3.4E38(7个有效位)double:双精度实型,含字节数为8,64bit数值范围-1.7E308~1.7E308(15个有效 ...

  4. HDU 6298

    Problem Description Given an integer n, Chiaki would like to find three positive integers x, y and z ...

  5. Must Know Tips/Tricks in Deep Neural Networks (by Xiu-Shen Wei)

    http://lamda.nju.edu.cn/weixs/project/CNNTricks/CNNTricks.html Deep Neural Networks, especially Conv ...

  6. python二 总结--函数-- 装饰器

    装饰器是什么? 有什么用? 为什么要用? 真的有用吗? 1.装饰器: 装饰器: 定义:本质是函数,(装饰其他函数)就是为其他函数添加附加功能. 原则:1.不能修改被装饰的函数的源代码          ...

  7. 孤立森林(Isolation Forest)

    前言随着机器学习近年来的流行,尤其是深度学习的火热.机器学习算法在很多领域的应用越来越普遍.最近,我在一家广告公司做广告点击反作弊算法研究工作.想到了异常检测算法,并且上网调研发现有一个算法非常火爆, ...

  8. VPS采用的几种常见技术(OVZ、Xen、KVM)介绍与对比

    很多人看到同样配置的VPS价格相差很大,甚是不理解,其实VPS使用的虚拟技术种类有很多,如OpenVZ.Xen.KVM.Xen和HVM与PV. 在+XEN中pv是半虚拟化,hvm是全虚拟化,pv只能用 ...

  9. bzoj4448 情报传递

    题目链接 离线+树上主席树,主席树维护时间标记 注意查询时如果c<0要把c赋为0: #include<iostream> #include<cstdio> #includ ...

  10. python里面的xlrd模块

    ♦python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 今天就先来说一下xlrd模块: 一.安装xlrd模块 ♦ 到python官网下载 ...