• JS笔记


    =============数据类型===================
    console.log(str.length); 获取字符串的长度
    console.log(typeof str); 查看变量的类型
    ======将其他类型转化为字符串类型的三种方法======
    1. console.log(num.toString());
    2. console.log(String(num));
    3. console.log(num+'');
    ======将其他的类型转化为数值类型的方法========
    1. console.log(Number(str));
    2. console.log(parseInt(str)); ***parseInt不能转化布尔型的类型,当字符类型为 '123abc' 这种数字开头的字符,则转化为数字。以'abc123' 字符开头的则NAN
    3. console.log(parseFloat(str));
    4. console.log(+str);
    ======布尔值转化为false的情况==============
    console.log(Boolean(str)) 1. null 2.undefined 3. '' 4. 0
    ========js的三种引用=====================
    1.行内引用
    <input type="button" onclick="alert("1111111")">
    2.直接用
    <script></script>
    3.外部引用
    <script src="index.js"></script>

    ============表达式=================
    表达式由运算符和运算数组成,并且会返回一个结果(值)

    ========运算符=====================
    ===算术运算符=====
    + - * / (两个运算数的运算符是二元运算符)
    ===一元运算符=====
    前置 ++num 先运算++num,再返回值
    后置 num++ 先返回num原来的值,再执行num++对num自身+1
    ===逻辑运算符=====
    与&& 或|| 非!
    ===关系运算符=====
    < > >= <= == === !== !===

    *** == !== 双等号判断的是值是否相等
    *** === !=== 三等号判断的是类型和值是否相等
    ===三元运算符=====
    表达式1?表达式二:表达式3
    ============arguments=================
    作用:可以通过arguments来获取函数调用时的实参
    例如:
    function getfirst(){
    var first=arguments[0];
    return first;
    }
    // 函数的返回值是调用该函数时传入的第一个参数; getfirst(4,5,6);的返回值时4
    ============访问对象属性两种方法=================
    1. 对象名.属性; 例:dog.name;
    2. 对象名['属性']; 例: dog['name'];
    ============函数和对象的区别=================
    函数: 独立存在的函数;用于封装一些代码,可以重复使用;
    方法: 属于对象的函数就是方法;
    ============自定义构造函数===================
    function Hero(name,weapen,equipment,blood){
    //this指向的就是对象本身
    this.name=name;
    this.weapen=weapen;
    this.blood=blood;
    this.equipment=equipment;
    }

    调用:
    var hero1=new Hero('盖伦','大宝剑',['头盔','战甲'],100);
    ============this出现在以下位置,分别代表什么===================
    1.函数中 this指向window
    2.在方法中 this指向这个方法所属的对象
    3.构造函数 this指向的是构造函数所创造的对象
    ============遍历对象属性和值===================
    var obj={
    name:'zs',
    age:19,
    score:99
    }
    for(var key in obj){
    console.log(key+'------'+obj[key]);
    }
    ====删除对象的属性====
    delete obj.name
    ==============API的概念====================
    概念:一些事先预定好的函数
    ==============webAPI的概念====================
    浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

    ==============DOM里面内容相关概念================
    DOM:是一种基于树的API文档,文档对象类型
    BOM:是浏览器对象类型
    文档: 一个网页可以成为文档
    节点:网页中的所有内容都是节点(标签,属性,文本,注释等)
    元素:网页中的标签

    =====判断是否是数组对象


    =====Math和公式
    //返回一个介于min和max之间的随机数
    function getRandom(min,max){
    return Math.random()*(max-min)+min;
    }
    //返回一个介于min和max之间的整型随机数
    function getRandom(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
    }
    //返回最大
    Math.max(1,2,3,4,5)
    //返回最小
    Math.min(1,2,3,4,5)
    //返回一个小于或等于给定数字的最大整数
    Math.foor(10.9); 返回10

    =====根据id获取页面元素
    var main=document.getElementById('main');
    通过console.dir(main)可以该对象的方法 _proto_: 后面跟的是这个对象的类型
    =====根据标签名来获取所有的标签
    var div=document.getElementsByTagName('div');
    返回的对象是所有的div
    =====根据标签的class属性获取元素(仅支持ie8以后的浏览器版本)
    var name=document.getElementClassName('name');
    =====根据选择器获取元素(仅支持ie8以后的浏览器版本)
    var element=document.querySelector('.a'); //仅能获取一个元素
    var elements=document.querySelectorAll('.a'); // 获取所有符合条件的元素
    =====截取一段字符串
    var s='';
    s=s.substr(开始位置,结束位置);
    ================非表单元素的属性=========================
    引用图片 img.src="";
    取消a标签的跳转行为 在a标签的点击事件里面加上return false;就可以;
    =====获取div标签里面的内容
    div.innerHTML; 会显示div里面的所有信息,包括标签

    div.innerText;
    div.textContent; 会显示div里面的文本信息,不包括标签,
    ***两个都支持的浏览器:新谷歌,新火狐,新ie,旧版火狐只支持textContent,旧版ie只支持innerText
    ================表单元素的属性=========================
    disabled:禁用属性
    checked:复选框选中属性
    selected:下拉菜单选中属性
    ***当这些属性的属性值只有一个值的时候,在js中操作只有true和false两个值
    ======获取自定义的属性的值
    1.box.getAttribute('age');
    ======设置自定义的属性的值(包括已有的属性的值)
    box.setAttribute('age',9);
    ======删除自定义的属性的值
    box.removeAttribute('age');

    ================获取父元素中的子元素(父子结构)=========================
    parentNode 父节点
    childrenNodes 子节点
    children 子元素
    firstChild 获取第一个子节点
    lastChild 最后一个节点
    firstElementChild 第一个子元素
    lastElementChild 第一个子元素
    nextSibling 下一个兄弟节点
    previousSibling 上一个兄弟节点
    nextElementSibling 下一个兄弟元素
    previousElementSibling 上一个兄弟元素

    ===============使a标签禁止跳转========================
    1. <a href="javascript:void(0)"></a>
    2. <a href="javascript:undefined"></a>


    ===============动态添加元素========================
    1.document.write('hellow <p>World<p/>')
    //和点击事件配合使用的话会把之前的整个html覆盖掉
    2.box.innerHTML='<ul>';
    box.innerHTML+='</ul>';

    3. var ul=document.creatElement('ul');
    my$('box').appendChild(ul); //往box盒子里面添加ul标签
    ****如果要添加的标签已经存在于页面中,会把之前的删掉,换到新的位置

    =======删除元素
    box.removeChild('box');

    =======把元素插入到指定的位置
    box.insertBefore(要插入的节点,插入的位置 )
    =======把当前元素的标签替换
    box.replaceChild(替换成什么元素,被替换的元素 )

    ================注册事件的3中方法================
    1. btn.onclick=function(){

    }

    //移除该事件的办法
    btn.onclick=null;

    2.
    function btnClick(){

    }
    btn.addEventListener('click', btnclick }) //ie9 +支持

    //移除该事件的办法(不能使用匿名函数)
    btn.removeEventListener('click', btnclick )


    3.btn.attachEvent('onclick',function(){ //ie9 -支持

    })

    //移除该事件的办法(不能使用匿名函数)
    btn.removeEventListener('onclick', 函数名)


    ==================事件对象==========================
    =====获取真正触发事件的对象
    e.target;
    =====相对于屏幕的位置
    e.clientX;
    e.clientY;
    =====相对于整个页面的位置(ie 9+ 支持)
    e.pageX;
    e.pageY;
    =====获取页面的滚动距离
    documet.body.scrollLeft;
    document.body.scrollRight;
    document.body.scrollTop;
    =====获取盒子(div)的坐标
    box.offsetLeft;
    box.offsetTop;
    =====取消默认行为
    e.preventDefault();
    =====取消冒泡
    e.stopPropagation();

    ==================BOM==========================
    bom:浏览器对象类型

    =====onload
    onload=function(){
    } 页面加载完成后执行
    =====onunload
    onunload=function(){

    } 页面卸载的时候运行

    =====location
    用来获取和设置url地址

    location.href="";

    =====history=====
    history.forward(); //前进
    history.back(); //后退

    history.go() 参数1 -1 分别代表前进后退


    ===============定时器======================
    setTimeout( fn, 3000 ) :定时炸弹 相隔一段时间执行一次(仅执行一次) 第一个参数是函数,第二个是时间
    setInterval() : 闹钟 相隔一段时间执行一次
    clearTimeout() : 取消定时器 参数是定时器名

    ======offset系列属性========
    box.offsetParent 离子元素最近的有定位的父元素
    box.offsetLeft 盒子的左偏移距离
    box.offsetHeight 盒子的高度(包括边框和内边距的距离)
    =======client属性==========
    box.clientLeft 获取边框的的宽度
    box.clientTop 获取边框的宽度

    box.clientWidth 不包括边框的宽度(包括padding)
    box.clientHeight 不包括边框的高度(包括padding)
    =======scorll属性==========
    box.scrollTop 距离滚动条上方滚动的距离

    box.scrollHeight 整个文本框的高度(包括看不到的滚动条高度)

    ==========mouseenter和mouseover的区别=============
    mouseover:
    mouseout:
    会触发事件冒泡

    mouseleave:
    mouseenter:不会触发事件冒泡


    ==================Ajax======================
    不需要重新加载整个页面,可以局部跟更新数据

    我要再和生活死磕几年,要么我就毁灭,要么我就注定辉煌,如果有一天,你发现我在平庸面前低了头,请向我开炮。
  • 相关阅读:
    Computer Networking: Computer networks and the Internet
    编译pqxx源码configure时遇到codecs.py LookupError的解决方法
    DBMS-存储和文件结构
    DBMS-关系数据库的设计:范式、函数依赖、分解算法、多值依赖
    WebPack填坑笔记
    VsCode常用快捷键
    用户 在地址栏输入网址 经历了那些
    正向代理和反向代理
    检测浏览器(BOM)以及地址栏网址的API
    js变量按照存储方式区分,有哪些类型,并表述其特点
  • 原文地址:https://www.cnblogs.com/nlovestudy/p/11711627.html
Copyright © 2020-2023  润新知