二、Javascript基础提升

1,Date

1,Date对象

//Date
/*ECMAScript中的Date类型是在早期Java中的java.util.Date类型的基础上构建的,
为此Date类型使用自UTC1970年1月1日午夜(零时)开始经过毫秒数保存时间的。
该Date类型保存的日期能够精确到1970年1月1日之前和之后的285616年
*/

//创建
/*1、直接用Date()函数
返回当前时间
注意: 无论Date()是否带参数,返回的都是当前时间
*/
var date1 = Date("2019-03-01");
console.log(typeof date1);//String类型
console.log(date1);//显示当前时间

/*2、构造函数法--不传参数
返回当前时间
*/
var date2 = new Date();
console.log(typeof date2);//Object类型
console.log(date2);

/*3、构造函数法--参数是一个表示时间的字符串
3.1、格式: month day, year hours:minutes:seconds
February 26, 2019 12:04:13
注意: 如果省略了小时、分钟、秒数,这些会被设置为0
3.2、2019-02-26 18:32:32  2019-2-26 18:32:32 
3.3、2019/02/26 18:32:32
*/
var date3_1 = new Date("2019/02/26");
console.log(date3_1);//Tue Feb 26 2019 00:00:00 GMT+0800 (中国标准时间)

var date3_2 = new Date("2019-02-26");
console.log(date3_2);//Tue Feb 26 2019 08:00:00 GMT+0800 (中国标准时间)

var date3_3 =new Date("2019-3-1");
console.log(date3_3);//Fri Mar 01 2019 00:00:00 GMT+0800 (中国标准时间)

/*4、构造函数法--参数是(年,月,日,时,分,秒,毫秒)
注意: 年和月必须写,日 月从0开始,日期从1开始
*/
var date4 = new Date(2019,02,01,10,20,66); //2019年3月
console.log(date4);//Fri Mar 01 2019 10:21:06 GMT+0800 (中国标准时间)

/*5、构造函数法--参数是毫秒数
返回中国标准时间
*/
var date5 = new Date(1000); //1秒
console.log(date5);//Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)

2, Date对象的方法

// Date对象的方法

var date = new Date();
//获取年份
console.log(date.getFullYear());//2020

//获取月份。注意0表示1月,依次类推
console.log(date.getMonth());//4 表示5月

//获取日期
console.log(date.getDate());//29 29号

//获取星期
console.log(date.getDay());//5 星期5

//获取小时
console.log(date.getHours());//5 表示5点

//获取分钟
console.log(date.getMinutes());//9 9分

//获取秒数
console.log(date.getSeconds());//19 19秒

//设置年份
date.setFullYear(2019)

//设置月份
//注意:传入的月份大于11,则年份增加
date.setMonth(2);

console.log("设置的月份是3月: " + date);
//设置日期
//注意: 如果传入的日期超过了该月应有的天数则会增加月份
date.setDate(01)
console.log("设置的时间是3月01号: " + date);

//注意:星期 一般不用设置

//设置小时
//注意: 如果传入的值超过23则增加日期
date.setHours(13);

//设置分钟
//注意:传入的值超过了59则增加小时数
date.setMinutes(56);

//设置秒数
//注意:传入的值超过了59则增加分钟数
date.setSeconds(10);

//设置毫秒数
//传入的值超过了999则增加秒数
date.setMilliseconds(888);
 
//设置距离1970-01-01的毫秒数
//date.setTime(1551398400000);

console.log(date);

//转换成字符串
//包含年月日时分秒
console.log(date.toLocaleString())

//包含年月日
console.log(date.toLocaleDateString());

//包含时分秒
console.log(date.toLocaleTimeString());

//Date.parse(dateString)
//参数: 日期字符串 格式: 2019-03-01 2019/03/01 12:00:00
//返回改日期距离1970年1月1日0点的毫秒数
console.log(Date.parse("2019-03-01"));

3,Date对象间的运算

//日期运算

var date1 = new Date()

var date2 = new Date(2019,03,01)

console.log( date1 - date2);//36654494525 得到的毫秒数
console.log((date1 -date2) / 86400000) //得到距今多少天

2,BOM(浏览器对象模块)

0,BOM介绍和对象属性

Window 对象表示浏览器中打开的窗口。

如果文档包含框架(<frame><iframe> 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

注意: 没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象

//BOM简介
/*
BOM: 浏览器对象模型(Browser Object Model),是一个用于访问浏览器和计算机
屏幕的对象集合。我们可以通过全局对象window来访问这些对象。
*/

console.log(window.document);

console.log(window.frames);

console.log(window.navigator);

console.log(window.screen);

console.log(window.location);

console.log(window.history);

//window.document 
/* 是一个BOM对象,表示的是当前所载入的文档(即页面),
但是它的方法和属性同时也是属于DOM对象所覆盖的范围。
*/



/*window.frames
是当前页面中所有框架的集合
*/

/*window.navigator
用来反应浏览器及其功能信息的对象
*/

/*window.screen
提供浏览器以外的环境信息
*/

/*window.location
href属性            控制浏览器地址栏的内容
reload()        刷新页面 
reload(true)    刷新页面,不带缓存 
assign()         加载新的页面 可以前后回去之前的页面
replace()        加载新的页面(注意: 不会再浏览器的历史记录表中留下记录)

*/

function func() {
    //alert("点我干啥?");
    window.location.href ="greenWindow.html";
    
}
function red() {
    window.location.href = "red.html";
    // window.location.reload(true);
}
function refresh(){ 
    
        window.location.reload();
}
function ass() {
    //window.location.assign("greenWindow.html");
    //window.location.replase("greenWindow.html");
    window.location.assign("https://yichenxiu.com");
    
}

/*window.history
window.history.length    获取历史记录的长度
back()                     上一页
forward()                下一页
go(num)                    num<0时,跳转到自己后方的第num个记录
            num>0时,跳转自己前方的第num个记录
*/

console.log("window.history.length = " + window.history.length);

//上一页
function backPage() {
    window.history.back()
}

//下一页
function forwardPage() {
    window.history.forward();
}

//go 
function goPage() {
        window.history.go() ;
}

Window 对象属性

属性描述
closed返回窗口是否已被关闭。
defaultStatus设置或返回窗口状态栏中的默认文本。
document对 Document 对象的只读引用。(请参阅对象)
frames返回窗口中所有命名的框架。该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架。
history对 History 对象的只读引用。请参数 History 对象
innerHeight返回窗口的文档显示区的高度。
innerWidth返回窗口的文档显示区的宽度。
localStorage在浏览器中存储 key/value 对。没有过期时间。
length设置或返回窗口中的框架数量。
location用于窗口或框架的 Location 对象。请参阅 Location 对象
name设置或返回窗口的名称。
navigator对 Navigator 对象的只读引用。请参数 Navigator 对象
opener返回对创建此窗口的窗口的引用。
outerHeight返回窗口的外部高度,包含工具条与滚动条。
outerWidth返回窗口的外部宽度,包含工具条与滚动条。
pageXOffset设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent返回父窗口。
screen对 Screen 对象的只读引用。请参数 Screen 对象
screenLeft返回相对于屏幕窗口的x坐标
screenTop返回相对于屏幕窗口的y坐标
screenX返回相对于屏幕窗口的x坐标
sessionStorage在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY返回相对于屏幕窗口的y坐标
self返回对当前窗口的引用。等价于 Window 属性。
status设置窗口状态栏的文本。
top返回最顶层的父窗口。

1,window中常用的方法

    <!-- window中常用的方法 -->
        
        <button onclick="openNewWindow()">打开新窗口</button>
        <button onclick="closeWindow()">关闭窗口</button>
        
        <script type="text/javascript">
            function openNewWindow(){
                //open(url,target,"特性的字符串")
                window.open("yellow.html", "blank","width=200px,height=400px,top = 0px ,left=0px"
                );
            }
            
            function closeWindow() {
                    window.close();
                    //火狐
                    //about:config
                    //我会保证小心
                    //allow_src
                    //true
                    
            }
        </script>

Window 对象方法

方法描述
alert()显示带有一段消息和一个确认按钮的警告框。
atob()解码一个 base-64 编码的字符串。
btoa()创建一个 base-64 编码的字符串。
blur()把键盘焦点从顶层窗口移开。
clearInterval()取消由 setInterval() 设置的 timeout。
clearTimeout()取消由 setTimeout() 方法设置的 timeout。
close()关闭浏览器窗口。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()创建一个 pop-up 窗口。
focus()把键盘焦点给予一个窗口。
getSelection()返回一个 Selection 对象,表示用户选择的文本范围或光标的当前位置。
getComputedStyle()获取指定元素的 CSS 样式。
matchMedia()该方法用来检查 media query 语句,它返回一个 MediaQueryList对象。
moveBy()可相对窗口的当前坐标把它移动指定的像素。
moveTo()把窗口的左上角移动到一个指定的坐标。
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
print()打印当前窗口的内容。
prompt()显示可提示用户输入的对话框。
resizeBy()按照指定的像素调整窗口的大小。
resizeTo()把窗口的大小调整到指定的宽度和高度。
scroll()已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy()按照指定的像素值来滚动内容。
scrollTo()把内容滚动到指定的坐标。
setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
stop()停止页面载入。

2,window中事件对象

/当页面完全加载成功触发该事件
            window.onload = function() {
                alert("页面已经加载完成,你还瞅啥")
            }
            alert("你瞅啥?")
        </script>
        
 
 
        <script type="text/javascript">
            window.onscroll = function() {
                var a = document.documentElement.scrollTop || document.body.scrollTop
                console.log(a)
                if (a >= 500) {
                    //加载新的数据
                    console.log("加载新的数据")
                }
            }
            
        </script>
        
<!-- 滚动事件 -->
        <script type="text/javascript">
        window.onresize = function() {
            w = document.documentElement.clientWidth || document.body.clientWidth|| window.innerWidth
            h = document.documentElement.clientHeight || document.body.clientHeight|| window.innerHeight
            console.log(w,h)
        
        }
            
        </script>


    <!-- 定时事件 -->
            <script type="text/javascript">
                
                var time = window.setInterval(function(){
                    console.log("yichen is a good man")
                },2000) //2秒执行
                
                function func1(){
                    //清除定时器
                    window.clearInterval(time)
                }
                
                //延时定时器
                //window可以不用写,在script里面
                var time1= setTimeout(function(){
                    console.log("yiche is a nice man")
                    
                },3000)
            </script>
    
        <button type="button" onclick="func1()">清除定时器</button>
        

3,DOM(文档对象模块)

HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

  • 文档是一个文档节点。
  • 所有的HTML元素(标签)都是元素节点。
  • 所有 HTML 属性都是属性节点。
  • 文本插入到 HTML 元素是文本节点。are text nodes。
  • 注释是注释节点。

image-20200530004336627.png


Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

Core DOM 核心DOM 针对任何结果话文档的标准模型
XML DOM  针对 XML 文档的标准模型
HTML DOM 针对 HTML 文档的标准模型

DOM节点层级关系(DOM树)

1、父节点(parent node)
    父节点拥有任意数量的子节点
2、子节点(child node): 子节点只能拥有一个父节点
3、兄弟节点(sibling node): 拥有相同父节点的同级节点
4、根节点(root node): 一个HTML文档一般只有一个根节点,根节点没有父亲节点,是最上层的节点,根节点没有父亲节点,是最上层的节点。

祖先节点: 包含子节点的节点都可以叫做祖先节点,其中包括了父节点。
后代节点: 一个节点内包含的所有节点,叫做后代节点,其中包括了子节点。

js跟页面中的这些标签进行交互
1、获取标签(元素)节点
    修改标签CSS样式
    修改标签属性
2、创建标签
3、删除标签
4、复制标签
5、插入标签

image-20200530005837727.png

HTML文档中可以使用以下属性和方法:

属性 / 方法描述
document.activeElement返回当前获取焦点元素
document.addEventListener()向文档添加句柄
document.adoptNode(node)从另外一个文档返回 adapded 节点到当前文档。
document.anchors返回对文档中所有 Anchor 对象的引用。
document.applets返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 元素。
document.baseURI返回文档的绝对基础 URI
document.body返回文档的body元素
document.close()关闭用 document.open() 方法打开的输出流,并显示选定的数据。
document.cookie设置或返回与当前文档有关的所有 cookie。
document.createAttribute()创建一个属性节点
document.createComment()createComment() 方法可创建注释节点。
document.createDocumentFragment()创建空的 DocumentFragment 对象,并返回此对象。
document.createElement()创建元素节点。
document.createTextNode()创建文本节点。
document.doctype返回与文档相关的文档类型声明 (DTD)。
document.documentElement返回文档的根节点
document.documentMode返回用于通过浏览器渲染文档的模式
document.documentURI设置或返回文档的位置
document.domain返回当前文档的域名。
document.domConfig已废弃。返回 normalizeDocument() 被调用时所使用的配置。
document.embeds返回文档中所有嵌入的内容(embed)集合
document.forms返回对文档中所有 Form 对象引用。
document.getElementsByClassName()返回文档中所有指定类名的元素集合,作为 NodeList 对象。
document.getElementById()返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()返回带有指定名称的对象集合。
document.getElementsByTagName()返回带有指定标签名的对象集合。
document.images返回对文档中所有 Image 对象引用。
document.implementation返回处理该文档的 DOMImplementation 对象。
document.importNode()把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding返回用于文档的编码方式(在解析时)。
document.lastModified返回文档被最后修改的日期和时间。
document.links返回对文档中所有 Area 和 Link 对象引用。
document.normalize()删除空文本节点,并连接相邻节点
document.normalizeDocument()删除空文本节点,并连接相邻节点的
document.open()打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()document.querySelectorAll() 是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState返回文档状态 (载入中……)
document.referrer返回载入当前文档的文档的 URL。
document.removeEventListener()移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()重命名元素或者属性节点。
document.scripts返回页面中所有脚本的集合。
document.strictErrorChecking设置或返回是否强制进行错误检查。
document.title返回当前文档的标题。
document.URL返回文档完整的URL
document.write()向文档写 HTML 表达式 或 JavaScript 代码。
document.writeln()等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

### 1,获取要操作的对象

<body>
        <div id="idDiv"></div>
        <div class="classDiv">yichen is a good nan </div>
        <div class="classDiv"></div>
        <div class="classDiv"></div>
        <div class="classDiv"></div>
        
        <input type="text" name="inputText" />
        <input type="text" name="inputText" />
        <input type="text" name="inputText" />
        
        <script type="text/javascript">
            //找到要操作的标签对象
            var jsDiv = document.getElementById("idDiv")
            
            console.log(jsDiv);
            console.log(typeof jsDiv);
            //通过class名获取
            var jsDivs = document.getElementsByClassName("classDiv")
            console.log(jsDivs)
            console.log(typeof jsDivs)
            
            //返回带有指定名称的对象集合。
            var jsInpsArr = document.getElementsByName("inputText")
            console.log(jsInpsArr)
            console.log(typeof jsInpsArr)
            
            //    返回带有指定标签名的对象集合。
            
            var inputtag = document.getElementsByTagName("input")
                console.log(inputtag)
                console.log(typeof inputtag)
            
            
        </script>

HTML 文档对象可以避免使用这些节点对象和属性:

属性 / 方法避免的原因
document.attributes文档没有该属性
document.hasAttributes()文档没有该属性
document.nextSibling文档没有下一节点
document.nodeName这个通常是 #document
document.nodeType这个通常是 9(DOCUMENT_NODE)
document.nodeValue文档没有一个节点值
document.ownerDocument文档没有主文档
document.ownerElement文档没有自己的节点
document.parentNode文档没有父节点
document.previousSibling文档没有兄弟节点
document.textContent文档没有文本节点

2,获取属性节点

<input type= "text" id ="in" placeholder="请留下你的大名!" my="我的" />
        <button type="button" onclick="func1()">变身</button>
        <script type="text/javascript">
            var jsInput = document.getElementById("in");
            console.log(jsInput)
            
            //方法一
            //获取官方定义的属性直接使用,元素节点.属性名
            //得到元素对应的属性的属性值
            var typeNode = jsInput.type;
            console.log(typeNode);//text
            var placeholderNode = jsInput.placeholder;
            console.log(placeholderNode);//请留下你的大名!
            var myNode = jsInput.my ;
            console.log(myNode);//undefined
            
            //alert("注意!我要变身了")
            //修改元素对应属性的属性值
            
            function func1(){
                jsInput.placeholder = "傻不傻";
            }
            
            /*方法二: 
            元素节点.getAttribute("属性名")
            得到元素对应属性的属性值
            注意,该方法还可以获取自定义属性
            */
           var idNode = jsInput.getAttribute("my");
           console.log(idNode);//我的
           
           //修改元素对应属性的属性值
           //元素节点.setAttribute("属性名", "新的属性值");如果属性名不存在,则定义新的属性
           jsInput.setAttribute("my", "yichen")
           console.log(jsInput);
           
           //移除元素节点对应的属性
           jsInput.removeAttribute("my");
           console.log(jsInput);
           console.log(jsInput.vaule)
                        
        </script>

3,获取文本节点和修改文本内容

<!-- 获取文本节点 -->
        <div id="box">   我是一个盒子</div>
        
        <script type="text/javascript">
            var jsDiv = document.getElementById("box");
            /*1、元素节点.innerHTML
            对象的开始标签到结束标签的全部内容,
            不包括本身html标签
            */
           var inner = jsDiv.innerHTML;
           console.log(inner);
           console.log(typeof(inner));
           
           /*2、元素节点.outerHTML
           除了包含innerHTML的全部内容外,还包含对象标签本身
           */
          var outer = jsDiv.outerHTML;
          console.log(outer);
          console.log(typeof(outer));
          
          /*3、元素节点.innerText
          从对象的开始标签到结束标签的全部的文本内容,获取真正的文本内容,
          */
         var text = jsDiv.innerText;
         console.log(text);
         console.log(typeof text);
          
          //修改对应的内容
          jsDiv.innerHTML = "<h1>good</h1>"
            
            
        </script>
        

4,行间样式和外部样式的读写



<!-- 行间样式表的读写 -->
        <div id="box1" style="width: 100px;height: 200px; background-color: red;">    
        </div>
        <button onclick= "changeColor1()">换颜色</button>
        <script type="text/javascript">
            //获取元素节点
            var jsDiv1 = document.getElementById("box1");
            //获取style属性节点
            var jsDivstyle = jsDiv1.style;
            console.log(jsDivstyle);
            
            /*获取样式表中样式属性的属性值
                style属性节点.样式属性名
                元素节点.style.样式属性名
                元素节点.style["样式属性名"]
            */
            function changeColor(){
                //注意:backgroundColor 对应css里面的background-color
                jsDivstyle.backgroundColor = "yellow"; //rgb(123,233,100)也可以
                jsDiv1.style.width= "200px";
                
                var h = jsDiv1.style["height"];
                console.log(h);
            }
            
            
            function changeColor1(){
                var r = parseInt(Math.random() * 256);
                var g = parseInt(Math.random()* 256);
                var b = parseInt(Math.random()* 256);
                
                var colorStr = "rgb(" + r + "," + g + "," + b +")";
                jsDiv1.style.backgroundColor = colorStr;
             }
        </script>
        
        
        
        <!-- 外部样式表属性修改读写 -->
        
        style.css文件的内容:
        #box2{
                background-color: blue;
                width: 200px;
                height: 300px;
            }
            #box3{
                background-color: hotpink;
                width: 500px;
                height: 600px;
            }
        
        <!-- 导入外部样式表 -->
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        
        <div id ="box2"></div>
        <div id ="box3"></div>
        <script type="text/javascript">
            /*获取
            
            IE中: 元素节点.currentStyle.样式属性名
                元素节点.currentStyle["样式属性名"]
            
            其他: window.getComputedStyle(元素节点,样式属性名)
            windos.getComputedStyle(元素节点,伪类)["样式属性名"]
                伪类一般写null即可
                */
             
             //获取元素的节点
             
             var jsDiv2 = document.getElementById("box2");
              var jsDiv3 = document.getElementById("box3");
              
              var w2 = 0;
              //判断是否是IE浏览器
              if (jsDiv2.currentStyle) {
                  //IE浏览器取样式属性值的方式
                  w2 = isDiv2.constructor.style.width;
              }else {
                  //其他浏览器获取样式属性值的方式;
                  w2 = window.getComputedStyle(jsDiv2,null).width;
              }
              console.log(w2);
               var w3 = 0;
               if (jsDiv3.currentStyle) {
                                 //IE浏览器取样式属性值的方式
                                 w3 = isDiv3.constructor.style.width;
                              r3 = isDiv3.constructor.style.backgroundColor;
               }else {
                                 //其他浏览器获取样式属性值的方式;
                                 w3 = window.getComputedStyle(jsDiv3,null).width;
                              r3 = window.getComputedStyle(jsDiv3,null).backgroundColor;
               }
               console.log(w3);
               console.log(r3);
               
              //设置样式中的属性的值
              //元素节点.style.样式属性名= 样式属性值
              jsDiv2.style.backgroundColor = "black"
              jsDiv3.style.backgroundColor = "blue";
              jsDiv3.style.width = "300px";
        </script>

5,事件对象触发

<html>
    <head>
        <meta charset="utf-8">
        <title>事件对象触发</title>
    </head>
    <body>
        <!-- 事件: 就是用户或者是浏览器执行的某个动作
         事件处理程序: 就是响应事件的函数,事件处理程序名字是以"on"
         开头的
         -->
        
        <!-- 1, 直接在html标签中给与事件处理程序同名的属性赋值js代码 -->
        <button id = "btn1" onclick="console.log('事件处理1')">按键1</button>
        
        <!-- 2,给与事件处理程序同名的属性赋值一个函数调用语句 -->
        <!-- 使用HTML代码与JS代码稍微有点分离,不至于第一种那么紧密耦合 -->
        <!-- this代表的是button标签本身 -->
        <button id = "btn2" onclick= "func2(this)">按键2</button>
        
        
        <!-- 3,DOM0级事件处理程序 -->
        <!-- 这种方式也是早期的写法,但好处是可以将JA与HTML完全分离,前提是需要给HTML
         元素提供一个额外的id属性(或其它能获取该元素对象的方式)-->
        <button id ="btn3">按键3</button>
        
        <!-- 4,DOM2级事件处理程序 -->
        <button id ="btn4">按键4</button>
        
        <script type="text/javascript">
            
            //2
            function func2(obj){
                console.log("事件处理2");
                //obj接收的是this的值,表示的是调用该函数的标签节点
                console.log(obj);
                console.log(this);//this----window
                
            }
            //3
            //找到id为btn3的按键
            var jsBtn3 = document.getElementById("btn3");
            jsBtn3.onclick = func3;
            function func3(){
                console.log("事件处理3");
                console.log(this);//this--元素节点
                
            }
            //移除事件处理程序
            //jsBtn3.onclick = null;
            
            //4,是目前最流行的事件处理程序,各大主浏览器全部支持
            var jsBtn4 = document.getElementById("btn4");
            //添加事件监听器
            //元素节点.addEventListener("事件名",响应事件的函数,布尔值)
            //事件名 click mouseover mouseout focus  
            //函数名或匿名函数
            //事件流 false
            jsBtn4.addEventListener("click", func4,false);
            function func4(){
                console.log("事件处理4");
                console.log(this);//this---元素节点
            }
            //注意: 可以绑定多个事件,互相不影响
            jsBtn4.addEventListener("click",func5,false);
            function func5(){
                console.log("事件处理5");
                
            }
            
            //移除事件
            //注意:
            //1, 参数与添加事件时相同
            //2,添加事件时第二个参数不能是匿名函数
            //jsBtn4.removeEventListener("click",func4 false);
            
            /*能否使用this,this代表的谁??
            1、在标签中使用,代表的是标签本身
            
            2、在函数体中直接使用,代表的是window
            在标签中将this作为实参传递到函数中,在函数体中使用形参代表标签
            本身
            3、在事件函数中使用,代表标签本身
            
            */
           
           /*移除事件
           1、无法移除
           2.也无法移除
           3,元素节点.onclick = null;
           4、元素节点.removeEventLinstener("事件名",响应函数,false);
           
           */
          
            
        </script>
        

1,焦点事件

更多事件名及属性描述参考网址

https://www.runoob.com/jsref/dom-obj-event.html
  <!-- 焦点事件 html标签 -->
        <input type="text" name="in" id="put" value="" />

//1、焦点事件 js代码
          //焦点事件:一般用于文本框上
            var jsInput = document.getElementById("put");
            
            //获取焦点
            jsInput.addEventListener("focus",funcFocus,false);
            function funcFocus(){
                console.log("聚焦");
            }
            
            //失去焦点
            jsInput.addEventListener("blur",funcBlur,false);
            function funcBlur(){
                console.log("离焦");
            }
            
            

2,鼠标单击与双击事件

        <!-- 鼠标单击事件与双击 -->
        <div id="box">单击与双击</div>
        
//1、鼠标点击与双击
            var jsDiv = document.getElementById("box");
            //console.log(jsdiv);
            
            //区分单击还是双击,使用延时定时器
            var timer;
            //添加单击事件
            jsDiv.addEventListener("click",funcOnceClick,false);
            function funcOnceClick(){
                clearTimeout(timer);
                timer = setTimeout(function(){
                    //这里对应写单击需要执行的事件函数
                    console.log("单击");
                }, 300); //300表示0.3秒
            }
            //添加双击事件
            jsDiv.addEventListener("dblclick",funcDoubleClick,false);
            function funcDoubleClick(){
                clearTimeout(timer);
                console.log("双击")
            }
            

3,鼠标事件-mouserover、mouserout、mousedown、mouseup、mousemove

<!-- 鼠标事件 -->
        <ul>
            <li>鼠标进入变红色</li>
            <li>鼠标离开变蓝色</li>
            <li>鼠标按下字体放大2倍</li>
            <li>鼠标抬起字体小2倍</li>
            
        </ul>
        
        <script type="text/javascript">
            
            // 鼠标事件
            var lis = document.getElementsByTagName("li");
            
            for (var i = 0; i < lis.length; i++){
                //鼠标移到标签上
                lis[i].addEventListener("mouseover",function(){
                    this.style.backgroundColor = "red"
                },false)
                //mouseout鼠标从某元素移开
                lis[i].addEventListener("mouseout",function(){
                    this.style.backgroundColor = "blue"
                },false)
                //mousedown 鼠标被按下
                lis[i].addEventListener("mousedown",function(){
                    this.style.fontSize =parseInt(getComputedStyle(this,null).fontSize) * 2 +"px"
                },false);
                
                //mouseup 鼠标按键被松开
                lis[i].addEventListener("mouseup",function(){
                    this.style.fontSize =parseInt(getComputedStyle(this,null).fontSize) / 2 +"px"
                },false);
                
                lis[i].addEventListener("mousemove",function(){
                    console.log("鼠标在移动")
                },false)
            }
            //鼠标被移动  docmunent表示整个文档,可以改为对应的标签
                // document.addEventListener("mousemove",function(){
                //     console.log("鼠标在移动")
                // },false)
            
            </script>

4,键盘事件

属性描述DOM
onkeydown某个键盘按键被按下。2
onkeypress某个键盘按键被按下并松开。2
onkeyup某个键盘按键被松开。2
    
        <script type="text/javascript">
            
            //键盘事件
            //keydown 表示按下了某个键,
            // document.addEventListener("keydown",function(e){
            //     var event = e || window.event
            //     console.log("你按下了某个键")
            //     console.log(event)
            //     console.log(event.altKey,event.ctrlKey,event.shiftKey,event.key,event.keyCode )
                
            //     //提取某个键
            //     var youkey = event.key
            //     console.log("你按下了" + youkey + "键")
            // },false)
            //keyup.某个键盘松开
            document.addEventListener("keyup",function(e){
                var event = e || window.event
                console.log("你松开了%s键", event.key )
                console.log(event)
                console.log(event.altKey,event.ctrlKey,event.shiftKey,event.key,event.keyCode )},false)
            
            //keypress按住了某键并松开了
            document.addEventListener("keypress",function(e){
                var event = e || window.event
                console.log("你按住了%s,并松开了%s键", event.key,event.key )
                console.log(event)
                console.log(event.altKey,event.ctrlKey,event.shiftKey,event.key,event.keyCode )},false)
            

4.1键盘事件的例子

创建一个j文件,封装一些函数

//获取滚动高度
function $scrollTop(){
    return document.documentElement.scrollTop || document.body.scrollTop;
    
}

//根据id获取元素节点
function $(idName){
    return document.getElementById(idName);
    
}

//获取可视窗口的宽度
function $w(){
    return document.body.width|| docment.documentElement.Width || window.innerWidth;
    
}

//获取可视窗口的高度
function $h(){
    return document.body.heighet || document.documentElement.height||window.innerHeight;
    
}

//随机颜色
function randomColor(){
    //rgb(255,255,255)
    var r = parseInt(Math.random()*256);
    var g = parseInt(Math.random()*256);
    var b = parseInt(Math.random()*256);
    return "rgb("+r+","+g+","+b+")";
    // "#ffffff"
}

//获取内部样式表 外部样式表中属性的属性值
// obj-->元素节点
// at---->属性名
function getStyle(obj,at){
    if(obj.currentStyle){
        //IE
        return obj.currentStyle[at];
    }else{
        return window.getComputedStyle(obj,null)[at];
    }
}

写html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>键盘事件的例子</title>
        
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
    </head>
    
    <body>
        
        <!-- 1,在页面有一个div,
         按下shift+C键的时候div随机改变背景色 -->
         <div id = "box" ></div>
        <script type="text/javascript" src= "js/3.yichen.js"></script>
        
        <script type="text/javascript">
            //通过函数获取id为box的元素节点
            var jsDiv = $("box");
            console.log(jsDiv);
            
            //改变颜色
            document.onkeydown = function(e){
                var evt = e || window.event;
                
                //按键为shift和c 键,就执行randomColor()函数
                if (evt.shiftKey == true && evt.keyCode == 67){
                    jsDiv.style.backgroundColor = randomColor();
                    
                }
            
            };
            
            //移动
            document.addEventListener("keydown",funcMove,false);
            function funcMove(e){
                var evt =e|| window.event;
                switch(e.keyCode)
                {
                    
                    case 37:
                    //像左减5px
                    jsDiv.style.left = jsDiv.offsetLeft - 5 + "px";
                        break;
                    
                    case 38:
                    //像上面减5px ,也就是像下移动
                    jsDiv.style.top = jsDiv.offsetTop - 5 + "px";
                        break;
                    case 39:
                    //向上面加 5px
                    jsDiv.style.left =jsDiv.offsetLeft + 5 +"px";
                        break;
                    case 40:
                    jsDiv.style.top = jsDiv.offsetTop + 5 + "px";
                        break;
                    
                }
                
            }
            
        
        </script>
    
    
    </body>
</html>

5,鼠标事件的event对象

属性
属性描述DOM
altKey返回当事件被触发时,"ALT" 是否被按下。2
button返回当事件被触发时,哪个鼠标按钮被点击。2
clientX返回当事件被触发时,鼠标指针的水平坐标。2
clientY返回当事件被触发时,鼠标指针的垂直坐标。2
ctrlKey返回当事件被触发时,"CTRL" 键是否被按下。2
Location返回按键在设备上的位置3
charCode返回onkeypress事件触发键值的字母代码。2
key在按下按键时返回按键的标识符。3
keyCode返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。2
which返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。2
metaKey返回当事件被触发时,"meta" 键是否被按下。2
relatedTarget返回与事件的目标节点相关的节点。2
screenX返回当某个事件被触发时,鼠标指针的水平坐标。2
screenY返回当某个事件被触发时,鼠标指针的垂直坐标。2
shiftKey返回当事件被触发时,"SHIFT" 键是否被按下。2

方法

方法描述W3C
initMouseEvent()初始化鼠标事件对象的值2
initKeyboardEvent()初始化键盘事件对象的值3
altKey: false
bubbles: true
button: 0    0左键  1滚轮键 2右键 
buttons: 0
cancelBubble: false
cancelable: true
clientX: 107    相当于浏览器的水平坐标
clientY: 19        相当于客户端浏览器的垂直坐标
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 107
layerY: 19
metaKey: false
movementX: 0
movementY: 0
offsetX: 100  相当于div模块的水平坐标位置
offsetY: 11        相当于div模块的垂直位置    
pageX: 107        相当于页面的水平位置和clientX一样,这个比较常用
pageY: 19        相当于页面的垂直位置和clientY一样,这个比较常用
path: (5) [div#in, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 96        相当于电脑屏幕的水平坐标位置
screenY: 120    相当于电脑屏幕的垂直坐标位置
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: div#in
target: div#in
timeStamp: 3360.8000000003813
toElement: div#in
type: "click"
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
which: 1
x: 107
y: 19
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>鼠标事件event对象</title>
        <style type="text/css">
            #in{
                width: 100px;
                height: 100px;
                background-color: red;
                /* position: absolute; */
            }
        </style>
    </head>
    <body>
        
        <div id="in"></div>
        
        <script type="text/javascript">
            
            var jsDiv1 = document.getElementById("in")
            
            jsDiv1.addEventListener("click", function(e){
                var ev = e || window.event;
                console.log(ev);
                
            },false)
            
        jsDiv1.onclick = function(e){
            var evt = window.event ||e ;
            console.log(evt);
            //浏览器可视窗口坐标
            console.log("浏览器的可视坐标X水平位置是%d,Y垂直位置是%d",evt.clientX,evt.clientY);
            //页面坐标
            console.log("页面坐标pageX是 %d ,pageY是 %d ",evt.pageX,evt.pageY);
            
            //电脑屏幕的坐标
            console.log("电脑屏幕的坐标screenX是 %d ,sereenY是 %d ",evt.screenX,evt.screenY);
            
            //按键0左键  1滚轮键 2右键 
            console.log("按键button是 %d ", evt.button);
            
            
        }    
            
        </script>

        
    </body>
</html>

6,事件流

事件的概念:
  HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。

什么是事件流:
  1,DOM事件流,

  "DOM2事件流"规定的事件流包括三个阶段:

    1,事件捕获阶段。

    2,处于目标阶段。

    3,事件冒泡阶段。
    

 1,addEventListener

  addEventListener是DOM2级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值,最后这个布尔值如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

  2,document,documentElement和document.body三者之间的关系:

    document代表的是整个html页面,

    document.documentElement代表是的<html>标签。

    document.body代表的是<body>标签。
    
    
  

  在标准的“DOM2级事件”中规定,事件流首先是经过事件捕获阶段,接着是处于目标阶段,最后是事件冒泡阶段。这里可以画个图示意一下:
1353608.png

  首先在事件捕获过程中,document对象首先接收到click事件,然后事件沿着DOM树依次向下,一直传播到事件的实际目标。就是id为btn的标签。

  接着在事件冒泡的过程中,时间开始是由具体的元素(a标签)接收,然后逐级向上传播到较为不具体的节点。

jQuery的常用事件:
13536083.png

6.1 事件流阻止冒泡和默认跳转行为

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>事件流阻止冒泡</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            
        }
    </style>
    </head>
    <body>
     <div id="box"> </div>
         <input type="text" name="in" id="put" value="" />
         <a href ="red.html" id ="link">点我跳转</a>
    
         <script type="text/javascript">
             document.body.onclick = function(){
                this.style.backgroundColor ="yellow"
            }
            
            document.getElementById("box").onclick = function(e){
                var ev = e || window.event
                //把后面冒泡事件不让他执行
                ev.stopPropagation()
                
                this.style.backgroundColor ="blue"
                
            }
            
            document.getElementById("put").onclick=function(e){
                var ev = e || window.event
                    //把后面冒泡事件不让他执行
                    ev.stopPropagation()
                    
                    
                    }
            document.getElementById("link").onclick=function(e){
                var ev = e || window.event
                    //把后面冒泡事件不让他执行
                    ev.stopPropagation()
                    var info = window.confirm("你浏览的网页存在风险,是否继续??")
                    if (info == false){
                        //阻止跳转的默认行为
                        ev.preventDefault()
                    }
                    
                    }
            
         </script>
    
    </body>
</html>

4,css和js常用模块Swiper5

https://www.swiper.com.cn/usage/index.html
Last modification:July 1st, 2020 at 03:25 am
如果觉得我的文章对你有用,请随意赞赏