JavaScript基础入门

getElementById 和 getElementsByClassName

``####原生JS实现document.ready和window.onload以及$(function(){...})的先后顺序
dom树加载完毕——$(document).ready()
页面加载完成后立即执行
$(document).ready(function() { alert('hello'); });
与
<body onload="alert('hello');">是等价的

而
window.onload = function(){ alert("welcome"); }

还有
$(function(){ })

页面全部（包括图片）加载完毕——$(window).load()

$(function(){...})>$(document).ready(function(){...})>window.onload

示例一
在图片加载失败后修改图片地址url

 $(document).ready(function() {
 
  //循环选中的img元素
    $("img").each(function (i, e) {
        //获取单一img元素的src属性值
        var imgsrc = $(e).attr("src");
        //在图片加载完成后，显示图片信息
        $(e).load(function () {
            //在图片加载完成后，打印图片url
        console.log("图片加载成功"+imgsrc);
        }).error(function () {
            //同时更改错误的src链接为不存在的占位符图片链接
            $(e).attr("src", "../img/err.png");
        });
    });
 
 
     });

备注：此方法浏览器控制台还是会打印404错误

js获取ip地址
通过api接口

<script src="http://pv.sohu.com/cityjson"></script>
<script type="text/javascript"> document.write('当前IP：'+returnCitySN["cip"]) </script>

js显示本地时间

<div id="webjx" style="text-align: center;">当前时间</div>
<script>setInterval("webjx.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script>

一些常用方法

刷新页面
location.reload();
弹窗
alert("我是一个弹窗!!")

JavaScript 弹窗

发现新大陆还有这种写法

document.getElementById('search-logo').onclick = switchEngine;

然后方法另外起一行

function switchEngine(){}

我们普遍的写法是

$("#search-logo").click(function (event) {}  )

在JS中一个function函数要调用另一个function函数下的变量。

不使用全局变量或者常量的情况下

function函数一

function diy() { url = $(this).attr('data-url');}

类似方法 prop() 设置或返回被选元素的属性和值。

function函数二

function diyAnother() { var newurl = url + $(".wd").val(); }

切记第一个函数前别加变量类型var

使用原生audio 播放音乐

  // 播放
play.onclick = function(){
    if(audio.paused){
        audio.play();
    }
}
// 暂停
 pause.onclick = function(){
    if(audio.played){
        audio.pause();
    }
}

播放和暂停放在一个按键

play_btn.onclick = function(){
            if(audio.paused){
                 audio.play();
                 this.innerHTML='end';    
            }else{
                this.innerHTML='start';
                audio.pause();
            }
        }

JS中$含义及用法
$("p") 代表所有的 p 标签

$(".p") 代表所有的类名为p的控件

$("#p") 代表id为 p 的控件

多个元素同时书写中间用，号隔开
示例：

$(".default-list,.developers-list,.tools-list,.resources-list,.others-list")

注意事项：
书写js时，单独的function方法可以放最外面，而click等事件一定要放$(document).ready(function () {这里面}
ps 有一次把点击事件放到了外层发现怎么都不执行。

一些示例：

document.getElementById('default-list').style.display = 'block';


$(".overseas-list,.developers-list,.tools-list,.media-list,.others-list").css("display","none");

a标签如何实现模拟键盘组合键

<li><a class="chrome-link" data-url="chrome://bookmarks" data-action="Chrome Bookmarks" id="bookmarkLink" href="" target="_blank" title="打开书签页">书签</a></li>
<li><a class="chrome-link" data-url="chrome://history" data-action="Chrome History" id="historyLink" href="" target="_blank" title="打开历史记录">历史记录</a></li>
<li><a class="chrome-link" data-url="chrome://apps" data-action="Chrome Apps" id="appsLink" href="" target="_blank" title="打开扩展程序">应用</a></li>
<li><a class="chrome-link" data-url="chrome://newtab" data-action="Chrome Apps" id="newtabLink" href="" target="_blank" title="打开新标签页">新标签页</a></li>

js下直接书写 `$('.other').style.display == 'none'` 或者 `$('.other').style.color = "red";`

这类写法都是错误的
class类使用必须要带下标例：$('.other')[0].style.color = "red";

鼠标双击事件ondblclick

ondblclick="window.open('<?= $v['cate_url'] ?>')"

onerror事件

onerror="javascript:this.src='https://api.iowen.cn/favicon/<!--{:H($v['icon'])}-->.png';imageError()"

图片无法显示时加载备用图片

<!-- 图片错误执行的函数 -->
function imageError() {
    var img=event.srcElement;
    img.style="width:30px;";
     <!-- img.src=newsrc; -->
    // $("img").attr('src','');
     img.οnerrοr=null;   //控制图标不要一直跳动 
}

js代码立即执行

$(document).ready(function(){})

js执行php代码

var js = "<?php "+"$_SESSION['tempdiyorder']='"+diyOrderType+"'; ?>";
             document.write(js);

js延时器，计时，计时器

setTimeout("window.location.reload()", 500 )  /* 提交数据完成后 延迟1秒 再刷新页面 保证同步 */

addEventListener() 方法使用疑点

一旦获取的元素不存在或是被移除了就报错！！！

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

a标签的name属性能坐锚点目录跳转用

id绑定点击事件onclick

var newid=document.getElementById("id");
newid.onclick=function() {}

写法二：直接内联js
html 内 οnclick="one()"
js 内 function one(){ alert("hello");}
写法三：绑定点击事件
document.getElementById("abc").onclick = function（）{ }
写法四：绑定监听事件
document.getElementById('abc').addEventListener('click',function() { }

页面延时跳转
<meta http-equiv="refresh" content="秒数;url=当前页面"/>　　延迟跳转

弹窗类型
最常见的警告框
alert("你好，我是一个警告框！");
还有、、、
确认框confirm
提示框，对话框 prompt 可以返回用户输入的字符串，实现简单的数据交互

swal()方法是一个提示框

新窗口打开链接
window.open("https://www.1.cn/")
当前页面打开 window.open("https://www.1.cn/","_self")
location.href="/url" 当前页面打开URL页面
window.location.href

js选项卡

$(document).ready(function(e) {
        $(".tab li").click(function(){
            $(this).parent(".tab").children("li").eq($(this).index()).addClass("activ").siblings().removeClass("activ");
            $(this).parent(".tab").next(".tabCon").children("div").hide().eq($(this).index()).show();
        })
    });

window.open拼接参数
window.open(test+"&page="+ss,"_self");

多个变量同时定义初始化 var s1= "shao", s2 = "yi", s3= 1009; 中间逗号分隔

onclick使用

var emptyBtn = document.getElementById("empty-btn");
emptyBtn.onclick = function(){}

控件使用jquery框架的show()方法重新显示的控件会设置

element.style {
    display: block;
}

js代码拼接用`+`

var s1 = document.getElementById('page'+ss);
s1.style.color="red";

引申其他拼接方法
concat()方法或者 join()方法
JS字符串拼接/连接（3种方式）
还有使用${}配合反引号

点击事件绑定键盘回车键

$(function(){ 
$("#diySearch").keydown(function(event){ 
if(event.keyCode==13){ 
shaoSo(); 
} 
}); 
});

`switch`语句

switch (传入匹配的变量) 
{ 
case "1":
break; 
case "匹配的值":
break; 
default:   //其他
}

备注若是需要匹配中文字符可以通过 Unicode编码转换
示例：\u89c6\u9891 即为 视频

jQuery serialize() 方法

serialize() 方法通过序列化表单值创建 URL 编码文本字符串。
示例:

$.ajax({
                type: "POST",//方法
                async:true, //不同步
                url: "diyso.php" ,//表单接收url
                data: $('#form1').serialize(),
                success: function (sss) {
                  //提交成功的提示词或者其他反馈代码
                // console.log('欧耶，成功了23333！');
                   if(sss){
                     window.open(sss);
                      }
                },
                error : function() {
                  //提交失败的提示词或者其他反馈代码
                  console.log('晕，失败 呜呜呜！');
                }
            });

判断字符串是否以`/`开头

使用startsWith()

var str = "/Hello world！";
var n = str.startsWith("/");
document.getElementById("demo").innerHTML = n;

使用indexOf()
查找第一次出现的位置返回0 代表出现在首位。依次返回3 代表出现在第四个位置
-1代表不包含

var newStr=str.indexOf("/");
     if(newStr==0){
　　　　console.log("字符串是以/开头的！")
　　}
　　if(newStr==-1){
　　　　console.log("字符串不是以/开头的！")
　　}

这里特别注意的事： indexOf("")空字符的情况返回是0

引申含字符串的方法比较
IndexOf() LastIndexOf() Contains() StartsWith() EndsWith()方法比较

去除字符串空白
trim()方法
或者replace正则匹配方法

使用encodeURIComponent()对url进行编码
不进行编码传入url被浏览器转义如+加号转义为空格
, / ? : @ & = + $ # 这些特殊字符的编码
decodeURIComponent() 函数解码
其他 encodeURI、encodeURIComponent、decodeURI、decodeURIComponent
escape,encodeURI,encodeURIComponent有什么区别_ - 知乎
总结：encodeURI用来编码整个url ，可以确保http后面的双斜杠不会被编码
encodeURIComponent它的编码范围更大。用来编码url后面的参数（有的参数包含特殊字符如@ & = + $，而encodeURI这个不会编码这些）

字符串引号里书写引号的问题

解决办法
1.轮流切换单双引号（外面双引号里面单引号或是外单里双）
2.通过反斜杠转义如同一种引号里直接书写 \"

后代选择器

查找后代元素三种方法
children() contents() find()

jQuery的方法同css
//$("s1,s2")// 并集选择器
//$("s1 s2")// 后代选择器（子子孙孙）
//$("s1>s2")// 子代选择器
//$("li.green")
//$("s1s2") //交集选择器

//$("div.s1"); class为s1的div元素
//$("div #s3"); id为s3的div元素
//$("div p"); div下的p元素

引申： jQuery 父元素选择器 parent() 和 parents()

html元素的存值和取值所用到的属性和方法

jQuery的方法

val()
val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

text()
text()方法方法设置或返回被选元素的文本内容。

html()
html()方法设置或返回被选元素的内容（innerHTML）。

原生JavaScript属性

innerHTML属性设置或返回表格行的开始和结束标签之间的 HTML。
value属性用于设置或者返回属性的值。多用于input元素
textContent 属性设置或者返回指定节点的文本内容,同样可返回所有子节点的文本。
innerText 设置和获取标签中的文本内容

createElement('元素名') 创建元素
appendChild() 增加子元素

write() 方法可向文档写入 HTML 表达式或 JavaScript 代码
document.write("<span>测试</span>");

初始默认页面底部位置
var c = window.document.body.scrollHeight;
window.scroll(0,c);

也可以使用锚链接
或者
window.location.hash = "#abc";
abc为id

刷新页面
location.reload();
location.reload(true);
true 浏览器重新从服务器请求资源
loaction.reload(true/false);
false 为从浏览器的缓存中重新加载
window.location.reload();
window.location.reload(true/false);
history.go(0);
还有下面这个会不保存滚动条位置
window.location.href=window.location.href;
使用在提交数据后需要更新页面的情况(实时聊天更新界面)

还有这个
window.location.reload;
和

不刷新
location.replcace(locatoin.路径名pathname);

不刷新只是跳转到指定id位置
window.location.replace("#abc");
和
window.location.hash = "#line";
还有重新载入
jQuery load() 方法

追加+插入元素
append() 和 appendTo()
js原生
document.write()

刷新到底部
document.documentElement.scrollTop = window.document.body.scrollHeight;

$(window).scrollTop(document.documentElement.scrollHeight);

var scrollHeight = $('.post').prop("scrollHeight");

JavaScript学习笔记之 document.body.scrollTop用法

框架
<iframe></iframe>

延时执行
setTimeout()

延时重复循环执行
setInterval()
示例
setInterval(function(){ diyfresh() },3000);

jQuery toggle() 方法
隐藏和显示来回切换

$("#id").css('display','none');
或document.getElementById("id名").style.display = 'none';
而这一句是错误的$("#id").style.display = 'none';
需要加上[0] 完整代码为 $("#id")[0].style.display = 'none';

修改输入框和密码框的值

$("input[type=text]").val();
$("input[type=password]").val();

知道控件具体id的情况
document.getElementById("ls_username").value = "666";

控制台添加jQuery写法

var scr = document.createElement("script");
scr.src = "https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js";//这里的网址需要验证是否有效
document.body.appendChild(scr);
$=jQuery.noConflict();

js小书签制作
javascript:(function(){这里面是js代码})();

自动填写账号和密码的js小书签、

javascript:var scr = document.createElement("script");scr.src = "https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js";document.body.appendChild(scr);$=jQuery.noConflict();$("input[type=text]").val("111");$("input[type=password]").val("222");

将上面代码保存为浏览器书签就行了

获取网址主机名
window.location.hostname
端口
location.port
主机名+端口号
location.host

获取css属性
style.getPropertyValue
示例： var width = box.style.getPropertyValue("width"); //读取div元素的width属性值

onclick点击事件

var lastpass=document.getElementById("lastpass");
lastpass.onclick = function() {
    document.getElementsByTagName("input")[0].value=username;
document.getElementsByTagName("input")[1].value=password;
};

原生js获取class的点击事件

var list=document.getElementsByClassName('accGroup'); // 获取class为accGroup的元素
for(var i in list){
     list[i].onclick=function() {
         console.log('欧耶，成功了-i的值！'+i);
         };

};

或者document.querySelector(’.abc’)所有 document.querySelectorAll(’.abc’)

创建div并设置onclick事件

var accGroup=document.createElement("div");
accGroup.setAttribute('onclick','test()');

账号密码输入框

document.querySelectorAll('input[type=text]').value= "111";
document.querySelectorAll('input[type=password]').value= "222";

账号密码输入框二

var input_text = document.querySelectorAll('input[type="text"]');
var input_password = document.querySelectorAll('input[type="password"]');
input_text[0].value=s1;
input_password[0].value=s2;

for循环
for(var i = 0; i < 数组元素.length; i++){语句};

原生js 遍历所有子元素添加onclick事件

var oUl = document.getElementById('lastpass');
    var aLi = oUl.children;//获取ul元素的所有元素子节点
    document.onclick = function(){
     for(var i = 0; i < aLi.length; i++){
         aLi[i].onclick=function() {
  };
     };
};

删除 css属性
var declaration = document.styleSheets[0].cssRules[0].style;
兼容
var declaration = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
var removedvalue = declaration.removeProperty("visibility");
和
removeAttribute('visibility');
removeAttribute("style");
removeAttributeNode("style"); 有返回值
以上方法都无法删除内联css样式
删除特定css样式 document.getElementById('lastpass').style.removeProperty("visibility");

设置css属性
document.getElementById('lastpass').style.visibility = 'hidden';
对象.style.cssText = "多个css样式";
.setAttribute("style","样式");
使用jquery实现 $("对象").css('display', 'none');

document.body.style['background-color']= 'red';
和document.body.style.cssText = "background-color:red";

HTML DOM Style 对象

获取css属性
var temp = document.getElementById('test').getAttribute('data');
设置
var temp2= document.getElementById('test').setAttribute('data','diy');
和attributes['属性名']
最常见的方式： 对象.style.visibility="visible";

定义变量
const和var还有let的区别
作用于的不同

选中元素
querySelector
document.querySelector('body').style.background = "silver";

增加子元素
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

相邻元素查询
var sy= s.children; //子元素
var chils= s.childNodes; //得到s的全部子节点
var par=s.parentNode; //得到s的父节点
var ns=s.nextSibling; //获得s的下一个兄弟节点
var ps=s.previousSibling; //得到s的上一个兄弟节点
var fc=s.firstChild; //获得s的第一个子节点
var lc=s.lastChild; //获得s的最后一个子节点
注释：
previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）；
nextElementSibling 属性返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。

给元素添加class类
对象.setAttribute("class", "abc");
对象.setAttribute("className", "abc");
对象.className = 'abc';

获取对象
querySelectorAll() 方法
通过 id, class, 类型, 属性, 属性值等作为选择器来获取元素
document.querySelector("#abc")

末尾添加子元素
appendChild() 方法

getElementsByTagName()和getElementsByName()

查找匹配
match() 方法
在字符串内检索指定的值

遍历json数组对象、

var text = JSON.parse(xhr.responseText);
for(var p in text ){
};

遍历
forEach()和map()遍历

on()方法在被选元素及子元素上添加一个或多个事件处理程序。
bind()和on()还有bind()

div元素不支持 onblur事件可以通过设置 tabindex属性来支持

没有赋值的变量值为 undefined

单引号嵌套双引号，单双引号轮流交替使用

Js获取input文本框值
name = 表单form的id名.表单form的name属性名.value;alert(name);

监听输入框事件
oninput 事件，keyup事件， onchange 事件
还有 onPropertyChange事件和 addEventListener方法
jQuery框架的change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
当元素的值改变时发生 change 事件（仅适用于表单字段）。
keyup方法（按键松开时执行）或者 oninput事件（用户输入时触发）用于 <input> 或 <textarea> 元素

为同一个元素绑定多个事件方法

/**
    * 为同一个元素绑定多个不同的事件，指向相同的事件处理函数
    * @param {*} e 元素
    */
    document.onclick = f1;
    document.onmouseover = f1;
    document.onmouseout = f1;
    function f1(e) {
        switch (e.type) {
            case "click": alert("你好啊！");
                break;
            case "mouseover": this.style.backgroundColor = "red"; 
                break;
            case "mouseoiut": this.style.backgroundColor = "green"; 
                break;
            default:
                break;
        }
    }

或是 attachEvent和addEventListener
还可以使用jquery的on()方法

查找字符串是否包含另外一个字符串
search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
indexOf() 方法返回某个指定的字符串值在字符串中首次出现的位置。
还有 match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
注意事项：var n=str.match(/字符串/gi); 无法直接传入变量名时(直接插入变量名会被当成正则的一部分来处理)
var re = eval("/"+ 变量名 +"/gi"); var n = this.match(re);
返回的都是元素起始位置，没有找到则返回 -1

原生js获取ul元素(id为test)下所有的li
var obj_lis = document.getElementById("test").getElementsByTagName("li");

数学相关运算所用到的Math对象下函数
如 Math.ceil(1.4) 向上取整

正则表达式相关方法
RegExp(正则表达式)
RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法。

字母大小写转换
toUpperCase() 方法将字符串小写字符转换为大写。

遍历
forEach方法和 jquery的 eq()，each() 方法，原生js的for循环
示例：for(var i in lis){};
for (var i=0; i<lis.length; i++){};

去字符串头尾空格
trim() 方法

三目运算符
等式
赋值运算： var 变量名 = (判断条件) ? 成立执行1 : 不成立执行2;
函数内return返回值： return (判断条件) ? 成立执行1 : 不成立执行2;

定义变量

定义一个Array数组变量： var a = []; 和 var a = new Array();
示例： var ary = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

定义一个Object对象： var o = {}; 和 var o = new Object();
构造函数

js函数
let fun = function(){};

用户选择的文本范围或光标的当前位置
window.getSelection();

获取主机名
document.domain 与 window.location.hostname

有趣的是：可以赋值成当前的域名或者一级域名如 document.domain = "baidu.com";
用来实现子域名与子域名间的跨域数据传输
示例：alert(document.domain);
alert(window.location.hostname);

其他url注解
1.获取整个url：window.location.href

2.获取url协议：window.location.protocol

3.获取url主机：window.location.host

4.获取url端口：window.location.port

5.获取url路径：window.location.pathname

6.获取url查询或参数部分（链接中“？”号后面的部分）：window.location.search

7.获取url信息片段：window.location.hash

转换为字符串的方式
通过 toString() 方法可把一个 Number 对象转换为一个字符串
或者直接 +"" 拼接空字符串

JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别
只有第一个getElementByID()获取到的对象是唯一一个，后面两个获取到的都是符合条件的对象集合

选中的内容传入剪切板（实现自动复制功能）
document.execCommand('copy');
具体详细代码

const range = document.createRange();
range.selectNode(document.getElementById('对象id名'));
const selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');

如果需要复制的对象来自input的话代码更简洁
选中 input对象.select();
执行复制 document.execCommand('copy');

字符串拆分
split() 方法用于把一个字符串分割成字符串数组。
split() 方法根据匹配给定的正则表达式来拆分字符串。
示例：var s1 = "www.beiduoye.cn";
var diyArray = s1.split(".");
会得到一个三部分组成的一个数组["www", "beiduoye", "cn"]

createElement 创建对象
createTextNode 创建文本
appendChild 末尾插入节点
parentNode 父节点
removeChild 删除节点

onmouseover 事件发生在鼠标指针移动到元素或它的子元素上时
当鼠标指针移出元素或其子元素之一时，会发生 onmouseout 事件。

document.all是页面内所有元素的一个集合。例如：
document.all(0)表示页面内第一个元素

js脚本注入

const theScript = document.createElement('script');
theScript.src = '//cdn.bootcss.com/jquery/3.2.1/jquery.js';
document.body.appendChild(theScript);

双击禁止选择文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()

ie老古董浏览器出错--对象不支持“setProperty”属性或方法

c_nav_firstp.style.setProperty('visibility', 'visible');c_nav_prev.style.setProperty('visibility', 'visible');
c_nav_next.style.setProperty('visibility', 'visible');c_nav_lastp.style.setProperty('visibility', 'visible');

尝试了下下面这段还是不行

c_nav_firstp.setAttribute('style', 'visibility: visible;');c_nav_prev.setAttribute('style', 'visibility: visible;');
    c_nav_next.setAttribute('style', 'visibility: visible;');c_nav_lastp.setAttribute('style', 'visibility: visible;');

接着换成这段就支持了

c_nav_firstp.style.visibility = 'visible'; c_nav_prev.style.visibility = 'visible';
c_nav_next.style.visibility = 'visible'; c_nav_lastp.style.visibility = 'visible';

trim()去除字符串两端空格
在ie下出错--对象不支持“trim”属性或方法
解决方法改用 replace正则匹配方法
去除字符串内所有的空格：str.replace(/\s*/g,"");

字符串转为数字
parseInt()字符串转为十进制纯数字整数的函数 int类型
还有下面两个
Number() 函数把对象的值转换为数字。
parseFloat() 函数
parseFloat() 函数可以将参数转换为一个浮点数
通过 +-*/ 等运算符实现

查找type为text的input输入框
query框架： $(":text") 或者 $("input[type=text]")
原生js: document.querySelectorAll('input[type="text"]');

节点名称(返回节点类型)
nodeName
示例：
<p id="x">测试</p>
var y = document.getElementById("x").nodeName;
console.log(y);打印结果为p

一些不常用的document属性
document.anchors // 返回文档中所有锚点元素的列表。
document.characterSet // 返回文档正在使用的字符集。
document.documentURI // 以字符串的类型，返回当前文档的路径。(当前页面的url)
document.head // 返回当前文档的 <head> 元素。
document.images // 返回当前文档中所包含的图片的列表。
document.links // 返回一个包含文档中所有超链接的列表。
document.designMode // 控制整个文档是否可编辑,有效值为 "on" 和 "off"
document.dir // 获取或设置文档的文字方向（rtl 或 ltr）
document.URL // 只读以字符串的类型，返回当前文档的路径
document.referrer // 返回来源页面的url
document.domain // 获取或设置当前文档的域名
document.readyState // 返回当前文档的加载状态 loading / 正在加载 interactive / 可交互 complete / 完成

querySelector 获取某一元素
querySelectorAll 获取所有元素
e.currentTarget 获取当前对象的HTML标签
getAttribute 获取当前元素属性
setAttribute 设置当前元素属性
classList.add 添加class
classList.remove 移除class
js中原生的选择器主要有以下四种
document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()

for…of 循环
for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。
示例：

const iterable = ['mini', 'mani', 'mo'];
 for (const value of iterable) {
  console.log(value);
}

Array.from()
from() 方法从具有 length 属性或可迭代对象的任何对象返回 Array 对象。

+= 和 =+ 还有++ ，--
示例： a += 1 //就相当于 a = a + 1
a++ // 每次都执行 a=a + 1
a-- // a=a - 1
但是 ++a 和 --a就有区别了
同理其它的 -= ，%= ，/= 运算符和+=运算符一样的规则，作用于自身

jQuery 遍历 - next() 方法查找同胞元素

stopPropagation() 方法防止调用相同事件的传播。
//阻止冒泡事件

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

JSON.parse() 方法将数据转换为 JavaScript 对象

控制台打印日志
console.log();
清除控制台所有信息
清空打印 console.clear();

Math.random() 随机函数

onwheel 事件鼠标滚轮在元素上下滚动时触发

event.preventDefault() 方法阻止元素发生默认的行为。

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

JS 获取html元素宽高及设置宽高
innerHeight() 方法返回第一个匹配元素的内部高度。

clientWidth 属性是一个只读属性，它返回该元素的像素宽度
---它包含内边距（padding），不包含边框（border），外边距（margin）和滚动条

offsetWidth 属性是一个只读属性，它返回该元素的像素宽度
---它包含内边距（padding）和边框（border），不包含外边距（margin）

高度也是同样

load()方法重新加载元素（控件），实现无刷新更新数据

`cookie`相关操作

修改 document.cookie="username=bdy; expires=Thu, 18 Dec 2040 12:00:00 GMT; path=/";
删除 document.cookie="username=; expires=Thu, 18 Dec 1990 12:00:00 GMT; path=/"; 时间设置为以前的时间就行了

random() 方法可返回介于 0 ~ 1 之间的一个随机数。
产生一个1-100的随机数 Math.floor((Math.random()*100)+1);

while 语句只要条件满足就无限循环
do/while 语句先执行一次循环体（代码块），再判断条件。与while的区别：第一次无需判断条件

onclick事件里传递参数时，注意事项：
传递纯数字可以不用加引号，字符串一定要加引号

转义字符

\n 软回车
\r 软空格
\\ 反斜杠
\" 双引号
\' 单引号

Number() 函数将对象参数转换为表示对象值的数字
类型转化成数字
方法二：使用 parseInt()或者 parseFloat()

限制 input 输入框只能输入纯数字
oninput = "value=value.replace(/[^\d]/g,'')"

自动加载动态时间

setInterval(function() { 
    $("#bdytime").load("datetime.php"); 
}, 1000);

cursor属性
鼠标光标指针形状

JavaScript基础入门

在JS中一个function函数要调用另一个function函数下的变量。

使用原生audio 播放音乐

a标签 如何实现 模拟键盘组合键

js下直接书写 $('.other').style.display == 'none' 或者 $('.other').style.color = "red";

鼠标双击事件ondblclick

onerror事件

图片无法显示时 加载备用图片

js代码 立即执行