妙味课堂 - 小试牛刀（JS）-

最新推荐文章于 2018-09-22 13:58:56 发布

赵羽珩

最新推荐文章于 2018-09-22 13:58:56 发布

阅读量1.5k

点赞数

JS基础

HTML属性操作

五、JS数据类型、类型转换

5.1、JS数据类型

JS中的数据类型有哪些~？
数字、字符串、布尔、函数、对象（obj、数组[]、json{}、null空 ）、undefined

5.2、Number()、parseInt()、parseFloat() の区别

Number() 函数把对象的值转换为数字。
parseInt() 函数可解析一个字符串，并返回一个整数
parseFloat() 函数可解析一个字符串，并返回一个浮点数。

var a = '100.23px'
        alert(Number(a))      // NaN
        alert(parseInt(a))    // 100
        alert(parseFloat(a))  // 100.23

5.3、判断是否是数字——isNaN()

isNaN() 
    isNaN（）会利用 Number() 来判断某些值是否是数字
    是数字=false、不是数字=true
    栗子：
    alert(isNaN('250'));    
    Number() '250' => 250 => false

举个栗子：

window.onload = function () {
            var aInp = document.getElementsByTagName('input');
            var str = '';   //存一个值

            aInp[1].onclick = function () {
                str = aInp[0].value
                if (isNaN(str) == false) {
                    alert(str + '是数字')
                }else {
                    alert(str + '不是数字')
                }
            }
        }

六、函数传参、重用、价格计算

6.1、函数传递参数

函数传递参数
    参数=JS的数据类型：
    数字、字符串、布尔、函数、对象、未定义
    function fn1(a,b) {
        alert(a+b)
    }
    fn1(100,'px');    //100px

6.2、价格计算

作用域、JS预解析机制

Date对象

2、DOM

DOM(文档对象模型)简单来说：document提供了一些API(接口).赋予开发者操作界面的能力.

2.1、DOM节点

DOM节点：parentNode 父节点、  children 子元素、
        nextElementSibling    下一个兄弟节点、
        previousElementSibling上一个兄弟节点

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style media="screen">
        ul {width: 200px; }
        ul li {
            color: #666;
            background-color: #eee;
            font-weight: bold;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            padding: 0 20px;
            list-style: none;
        }
        ul .focus {          /* 鼠标移入的样式 */
            font-size: 22px; background-color: #555; color: #fff;
        }
        ul .near {           /* 上下兄弟 的样式 */
            font-size: 18px; background-color: #ccc; color: blue;
        }
        ul .none {           /* 首位行的样式 */
            background-color: #333; color: #fff;
        }
        ul .side {           /* 鼠标移入 首位行的样式 */
            background-color: orange;
        }
    </style>
</head>
<body>
    <ul id="ul1">
        <li class="none">这是首行</li>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>33333</li>
        <li>22222</li>
        <li>11111</li>
        <li class="none">这是末行</li>
    </ul>
    <script type="text/javascript">
        var oUl = document.getElementById('ul1');
        var aLi = oUl.children;              // 子节点集合  所有li
        var first = oUl.firstElementChild;   // ul 第一个 li
        var last = oUl.lastElementChild;     // ul 最后一个 li

        for (var i = 0; i < aLi.length; i++) {
            aLi[i].onmouseover = function () {      // 鼠标 移动事件

                if (this == first || this == last) {      // 当鼠标进入  (第一个li   或   最后一个 li)    时
                    this.className = 'side';
                }else {
                    this.className = 'focus';
                    this.nextElementSibling.className = 'near';         // 当前li 的下一个兄弟
                    this.previousElementSibling.className = 'near';     // 当前li 的上一个兄弟
                    first.className = 'none';
                    last.className = 'none';
                }
            }
            aLi[i].onmouseout = function () {
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = ''
                }
                first.className = 'none';
                last.className = 'none';
            }

        }
    </script>
</body></html>

2.2、元素相关尺寸及位置获取offsetWidth、clientWidth、getBoundingClientRect()

能讲一下offsetWidth，width，clientWidth这三者的区别吗，他们都有什么用？

它们之间的关系，可以概括如下：
clientWidth = width + padding
offsetWidth = width + padding + border

<html>
    <head>
    </head>
    <body>
         <div id='test' style="border:2px solid blue; padding:5px;width: 200px;">
              天下武功出少林！！    
        </div>
        <script>
              var ele = document.getElementById('test');
              //clientWidth:210  offsetWidth:214 width:200px
              alert("clientWidth:"+ele.clientWidth+" offsetWidth:"+ele.offsetWidth+" width:"+ele.style.width);
        </script>
    </body>
</html>

offsetWidth与offsetHeight

offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

offsetLeft与offsetTop

offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)

offsetParent

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

　　总的来说两条规则：

　　1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

　　2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
</head>
<body>
    <style type="text/css">
        body {
            margin:0;
            padding:0;
            background:#EEE;
        }
        #test {
            width:400px;
            height:300px;
            padding:20px;
            background:#F60;
            border:10px solid #888;
        }
        #wrap {
            margin:30px;
            position:relative;//offsetParent的元素最近的（在包含层次中最靠近的)并且是已进行过CSS定位的容器元素。
            left:150px;
            top:70px;
            padding:20px;
        }
    </style>
    <div id="wrap">
        <div id="test">
        </div>
    </div>
    <script>
var test = document.getElementById("test");
test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
    "<p>offsetParent:" + test.offsetParent.tagName + "</p>" +
    "<p>offsetWidth:" + test.offsetWidth + "</p>" +
    "<p>offsetHeight:"+test.offsetHeight+"</p>"+
    "<p>offsetLeft:"+test.offsetLeft+"</p>"+
    "<p>offsetTop:"+test.offsetTop+"</p>";
    </script>
</body></html>

getBoundingClientRect的用法

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

1.语法：这个方法没有参数。

rectObject = object.getBoundingClientRect();
2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（上，右，下，和左）表示的坐标的矩形，以像素为单位。

　rectObject.top：元素上边到视窗上边的距离;

　rectObject.right：元素右边到视窗左边的距离;

　rectObject.bottom：元素下边到视窗上边的距离;

　rectObject.left：元素左边到视窗左边的距离;

示图：
这里写图片描述

2.3、获取元素的宽高 [登录框、返回置顶]

2.4、创建元素 [微信留言板、商品分类筛选、邮件拖拽删除]

添加、下一个添加、上一个添加、删除、替换、克隆
元素操作：createElement，appendChild/insertBefore，removeChild、

表格操作。综合案例：配后端的留言板案例(添加留言、删除留言)

BOM

3天

BOM (browser object model) 浏览器对象模型,、五大对象：window、navigator、locaation、history、screen window 对象、 window.open(URL,name,features,replace) 打开新窗口、 window.close() 关闭窗口、 页面相关距离获取、 可视区大小、 页面大小、 窗口滚动条距离、 window常用事件、 scroll 监听滚动条滚动、 resize 监听窗口大小发生变化、 location 对象、 href hash search host hostname pathname port protocol reload()、 navigator、 screen、 history

Event 对象事件详情

3天

事件基础

事件、 事件监听器 、 el.removeEventListener("event",func,事件流)、 事件流、 事件对象、 e.target 事件源，发生事件的元素、 e.type 事件类型、 阻止冒泡、 阻止默认行为、 鼠标位置获取、 e.button 返回用户按下的是鼠标的哪个键、 键盘事件、 滚轮事件、 常用事件汇总：、 鼠标事件、 键盘事件、 keydown 键盘按下、 keyup 键盘抬起、 表单事件、 change 状态发生改变、 input value发生变化、 blur 失去焦点 focus 获得焦点、 reset 重置时、 submit 提交时、 submit() 提交表单

事件应用

拖拽的原理分析、 事件：mousedown鼠标按下，mousemove 鼠标移动、mouseup 鼠标抬起、 记录信息、 move时获取新的鼠标坐标，计算出move于down之间的位移值、 用down时的鼠标坐标加上位置值求出元素拖拽后的坐标、 案例：限制范围拖拽、 碰撞检测、 检测元素所有不会碰撞的状态，剩余状态便是碰撞了、 综合案例：拖拽图片，碰撞交换位置、 自定义滚动条、 根据内容高度和外框高度计算滚动条高度、 为滚动条添加限制范围拖拽、 添加滚轮操作移动滚动条位置、 根据滚动条移动距离同步内容移动距离

移动端事件

touch事件、 touchEvent、 touches 当前屏幕上的手指列表 targetTouches 当前元素上的手指列表、 changedTouches 触发当前事件的手指列表、 案例：移动端幻灯片效果实现、 orientationchange 事件，监听手机横竖屏切换、 window.orientation 获取当前手机横竖屏状态、 devicemotion 事件,监听手机加速度发生变化、 -accelerationIncludingGravity 加速度对象 deviceorientation 事件, 监听手机旋转角度发生变化、 ev.alpha 围绕Z轴的旋转角度、 ev.beta 围绕X轴的旋转角度、 ev.gamma 围绕Y轴的旋转角度

1天

（储存在用户本地终端上的数据）

Cookie 可以翻译为“小甜品，小饼干” ，Cookie 在网络系统中几乎无处不在，当我们浏览以前访问过的网站时，网页中可能会出现 ：你好 XXX，这会让我们感觉很亲切，就好像吃了一个小甜品一样。这其实是通过访问主机中的一个文件来实现的，这个文件就是 Cookie。在 Internet 中，Cookie 实际上是指小量信息，是由 Web 服务器创建的，将信息存储在用户计算机上的文件。一般网络用户习惯用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 Session 跟踪而存储在用户本地终端上的数据，而这些数据通常会经过加密处理

通常情况下，当用户结束浏览器会话时，系统将终止所有的 Cookie。当 Web 服务器创建了Cookies 后，只要在其有效期内，当用户访问同一个 Web 服务器时，浏览器首先要检查本地的Cookies，并将其原样发送给 Web 服务器。这种状态信息称作“Persistent Client State HTTP Cookie” ，简称为 Cookies

AJAX

3天

ajax全称为Asynchronous JavaScript And XML，即异步的JavaScript和XML，主要用来与服务器进行通信，在不重新加载页面的情况下发送请求给服务器，做到无刷新页面更新数据，接受并使用从服务器发来的数据。创建包含发送请求和响应功能的对象：new XMLHttpRequest。课程包括原生ajax知识点：get,post,状态码status,原生ajax库的封装使用，jQuery中ajax的使用，axios库的使用，ajax文件上传 、跨域产生和解决方案、cookie介绍，http 协议、获取cookie，设置cookie、localStorage介绍。

运动

3天

正则表达式

好像是用来表单验证的
1天

正则表达式，又称规则表达式，查找匹配某些符合规则的字符串，正则表达式就是写这种规则的工具。课程包括创建正则表达式、表达式规则（普通字符，元字符）、修饰符（影响整个正则规则的特殊符号）、正则的方法（执行一个检索，用来查看正则表达式与指定的字符串是否匹配）、字符串的方法：search()，match()，replace()、元字符：\d，\s，\w、边界符：\b，^，$、数词量：{n}，{n,m}、分组、字符集合：中文[\u4e00-\u9fa5]，ASCII码等。

面向对象

3天

面向对象编程面向对象编程（oop）是一种编程思想，用抽象方式创建基于现实世界模型的一种编程模式。目的是在编程中促进更好的灵活性和可维护性。JavaScript是基于构造函数（constructor）和原型链（prototype），JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成对象的函数。它提供模板，描述对象的基本结构。一个构造函数，可以生成多个对象，这些对象都有相同的结构。面向对象三大特性：封装、 继承、多态。

赵羽珩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
妙味课堂 - 小试牛刀（JS）-

JS基础HTML属性操作五、JS数据类型、类型转换5.1、JS数据类型JS中的数据类型有哪些~？数字、字符串、布尔、函数、对象（obj、数组[]、json{}、null空）、undefined5.2、Number()、parseInt()、parseFloat() の区别Number() 函数把对象的值转换为数字。parseInt() 函数可解析一
复制链接

扫一扫