js知识点

1.JS是一种脚本语言,不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定

2.alert警告提示信息,弹出框

3.输入    prompt()    输入对话框

输出    document.write()    向body内输出内容,可以写HTML标签

输出    alert()    浏览器弹出警示框

输出    console.log()    浏览器控制台打印输出信息

4.js中设置style样式都是加在行间  style取样式也是从行间来取

5.如果有行间样式再修改className是不起作用的  跟css优先级一样  一般要么就用class要么就用样式,不能混用

6.window.onload作用等页面加载完成后加载

7.var div = document.grtElementsByTagName('div')  是获得标签名 能获得多组  获得的是数组

    div.length  数组都有长度  一次只能对一个元素设置样式  直接对数组设置样式会报错

8.ECMAScript:翻译将js翻译给计算机  核心 解释器

9.DOM  Documen Object Model  操作HTML的能力      document

10.BOM Browser Object Model    操作对象是浏览器      window

11.BCMA    几乎没有兼容性

    DOM    有一些操作不兼容

    BOM      没有兼容问题(完全不兼容)

12.typeof 运算符  常见类型为  number string boolean  undefined object function null NaN

    undefined  1.没有定义  2.定义了但是没有给东西

一个变量应该只放一种类型的数据

13.文本框里边的是字符串

parseInt 是从左向右看转换为数字的  12px34  转换为12  如果不是数字则是NAN  非数字 如果第一个是数字则返回数字,第一个是字符则返回NAN  如 1ab2  返回1    a1b2 返回NAN

14.  任何数字和NAN相加还是NAN    数字加字符为字符 

15.NAN和NAN是不相等的  如var a = parseInt('abc)  var b = parseInt('def');  a和b是不相等的

16.一个函数检测是不是NAN  alert(isNAN(a))如果a是NAN则返回true

17.paseFloat  在不知道是小数还是整数的时候就用paseFloat 

18.也叫做强制类型转换 显示类型转换

19.隐式类型转换    ==是先转换类型再比较  ===是不转换直接比较  -也是隐式转换  a='7' b = '5'  a-b等于2

  -号在js中只有数字相减


20.全局变量在函数上边声明,在任何地方都可以用    局部变量只能在定义她的函数里边才能用

    闭包是子函数可以使用父函数的局部变量

21. json = {a:12,b:5,c:'abc'} json是用花括号  alert(json.a)    json['a']  arr[0]json的下标是字符串  数组的下标是数字    json没有length    for(var i in json)  用for in解决json循环

JSON的数据结构是基于文本的,由键值对组成,键必须是字符串类型,值可以是字符串、数字、布尔值、数组、对象或null。

22. rutern 没给值返回的是undefined  一个函数只返回一种类型的值  也可以没有return

23.arguement  可变参  不定参  arguement是数组里边是传定的参数  function(){}

取非行间的样式

window.addEventListener('load',function() {

            var oDiv = document.querySelector('#div1');

            if(oDiv.currentStyle) {

                alert(oDiv.currentStyle.width);

            }else {

                alert(getComputedStyle(oDiv,false).width);

            }

        })6

24

// 获取目标元素

const element = document.getElementById("yourElementId");

// 使用 window.getComputedStyle 获取行外样式

const computedStyle = window.getComputedStyle(element);

得到的为json

// 获取特定的样式属性

const color = computedStyle.color; // 获取颜色

const fontSize = computedStyle.fontSize; // 获取字体大小

const width = computedStyle.width; // 获取宽度

console.log("Color:", color);

console.log("Font Size:", fontSize);

console.log("Width:", width);

兼容性:

window.getComputedStyle()是现代浏览器的标准方法,兼容性非常好,适用于所有主流浏览器(包括IE9及以上版本)。

var styles = window.getComputedStyle(div);求行外样式

25.数组

创建数组  var a  = [1,2,3];

var a = new Array(1,2,3);

数组的length即可以获取又可以设置  例如  var a = [1,2,3,4,5,6]  a.length = 3  则数组a就变成了a[1,2,3];

快速清空数组的值  a.length = 0;

数组里边应该只存在一种类型的变量

数组的添加

push()数组末尾添加  pop()数组末尾删除  unshift()数组头部添加  shift()头部删除

arr.splice(起点,长度)  如 arr[1,2,3,4,5,6] arr.splice(2,3)  arr会变成[1,2,6];

插入  arr.splice(起点,长度,添加的元素);  arr.splice(2,0,'a','b');在第二个元素之后添加ab  0表示删除0给元素

替换  arr.splice(2,2,'a','b')  将数组第二个之后的两个元素替换成a和b

数组连接

var a=[1,2,3],var b = [4,5,6];  a.concat(b)  将a数组和b数组拼接连接为一个数组  谁在左边连接谁

数组拼接

var arr = [1,2,3]  arr.join('-')  就将数组连接成  1-2-3 的字符串

数组的排序 arr.sort()  方法将数组里边的数进行排序  数字进行排序的时候将排序第一位数字

var arr = [1,7,32,6,82,2];  排序后 [1,2,32,6,7,82]  是将数组当成字符串进行排序的了  sort只认识字符串

arr1.sort(function(a, b) {

            //  return a - b; 升序的顺序排列

            return b - a; // 降序的顺序排列

        });

24.定时器

setInterval(函数不加括号,时间ms)  一直都会执行

setTimeout(函数不加括号,时间)  到时间执行一次  只执行一次

清除定时器

clearInterval(定时器名字);  setTimeout同理

定时器打开的时候不会立即执行  会在第一个时间之后执行

字符串用charAt【i】

使用定时器时有时候需要开局清除定时器然后再添加

25.Date

var oDate = new Date();  创建时间

getFullYear()年      getMounth()月份是从0开始的    getDate()日      getDay()星期 周日是0

26.offsetLeft  是获得当前对象的left值

27.最大值和最小值  Number.Max—VALUE  Number_—VALUE    infinity表示无穷大 -infinity表示无穷小

NaN 表示是非数值

28.字符串长度为  string.length

29.字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。

30.num.toString()可以将数字转换为字符串  或者String(num)  或者 num + ''

31.流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构

32.函数命名

尽量小驼峰式命名法

前缀应该为动词

can    判断是否可执行某个动作

has    判断是否含有某个值

is    判断是否没某个值

get    获取某个值

set    设置某个值

load    加载某些数据

33.

//生成M-N之间随机整数的函数

function getRandomInt(M, N){

    return Math.floor(Math.random() * (N - M + 1)) + M

}

32.节点

    oUl.childNodes[i].nodeType      nodeType 为检测节点的类型

    nodeType = 3 为文本节点        元素节点为1

      oUl.children    只包含元素不包含文本  兼容  子节点只算第一层

    oUl.parentNode  为父节点

    offsetParent  根据样式会发生改变

    第一个子节点    oUl.children[0]  最后一个子节点 oUl.children[oUl.children.length - 1]

    获取元素属性的值 

    getAttributes(名称)

    设置元素属性的值

    setAttribute(名称,值)

    删除removeAttribute(名称)

    var aEle = oParent.getElementsByTagName('*')    * 通配符意味着选取所有的子级

    var li = document.createElement('li');    document.createElement(创建的标签名称)

    这两个都是对父元素进行操作的

    ul.appendChild(li);    appenChild(创建的节点)  这是给元素添加子节点 

    ul.insertBefore(li,ul.children[0])  是在第0个元素前插入子元素  insertBefore(需要添加的子元素,哪个子元素)

    父级删除子级元素    ul.removeChild(要删除的li)

    文档碎片  对高级浏览器基本没什么用,可能会降低性能,对于低级浏览器有用

    var ul = document.querySelector('ul');

        var oFag = document.createDocumentFragment();//创建文档碎片

        for(var i = 0; i < 100000;i++) {

            var li = document.createElement('li');

            oFag.appendChild(li);

        }

        ul.appendChild(oFag);

33.表格

    var oTb = document.querySelector('#tab1');

    oTab.tBodies[0]    取tbody时要用[0]   

    oTb.tBodies[0].rows  取的是所有的行

    oTb.tBodies[0].rows[0].cells  取的是某一行的所有td

    给表格删除行时要从tbody里边进行删除

    一般添加一个id之后的表格里边的id就不能重复用了  删除之后不能再用  一般在用过之后id++

    .toLowerCase()方法是将字符串全转为小写  一般用于输入小写的时候也能搜出来大写的比较

    str.search('要找的字符')    找到的话返回位置  没找到的话-1

    str = 'abc 123 ert'

    var arr = str.split(' ')将字符串切割分为数组

34.表单

    表单.onsunmit  = function(){} 给表单提交时触发的 事件

    表单.onreset = function(){} 给表单重置时触发的事件

 

35.修改类名

    element.className = ''

    element.classList.add('')

    element.classList.remove('')

    element.classList.toggle('')

   

    事件监听的其他版本

    DOM L0:事件源.on事件 = function() { }

    DOM L2:事件源.addEventListener(事件, 事件处理函数)

    区别:on方式会被覆盖,addEventListener方式可绑定多次,拥有事件更多特性,推荐    使用

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容

  • JavaScript 1 初识JavaScript 1.1 JavaScript 是什么 JavaScript 是...
    SY阅读 237评论 0 2
  • 1. 闭包 闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在函数内创建函数,通过函数访问...
    抽疯的稻草绳阅读 1,363评论 0 26
  • I javascript数据类型 一、六种数据类型 五种基本类型(原始类型): Number String Boo...
    这昵称好帅嘞阅读 405评论 0 2
  • 数据类型: 一,原始类型: Number String Boolean null undefined二,引用类型 ...
    2点半阅读 619评论 0 3
  • 1.web标准是什么?结构-样式-行为(html-css-javascript)2.css样式层级?!import...
    不去解释阅读 549评论 0 4