zoukankan      html  css  js  c++  java
  • JS学习笔记


    一、js如何运行
    二、输出
    document.write();
    alter();
    三、如何在HTML中是用JS
    1.使用<script></script>将JS语法嵌入到HTML中,可以使用多个,每一个之间都是有关联的;
    2.href = "javascript:代码";
    3.各种响应事件中
    4.写到外部文件中(.js)<script src = "相对路径"></script>
    JS语法
    命名规范:
    1.取名要有意义
    2.不能以数字开头,不能是系统的关键字($a合法)
    大小写:JavaScript区分大小写
    变量名和函数: 第一个单词以后每个单词首字母大写
    对象: 每个单词的首字母都要大写
    分号:
    功能执行语句:加分号(换行默认语句的结束)
    结构定义语句: 不加分号
    注释:
    // 单行
    /* */ 多行
    四、变量
    var a = 10; //内存释放是在关闭浏览器后才释放
    var 变量名 = 值;
    注意:JavaScript是弱类型语言(与PHP一样)

    五、数据类型
    typeof(变量名);
    1.number (int, float, double)注意:计算式还要按照整型和浮点型分开使用
    2.string (string, char)
    3.boolean(bool)
    4.object (对象类型,array, null)注意:分开处理
    5.undefined 没有声明变量

    函数类型:function

    六、运算符表达式
    算术运算符:+ - * / % ++ --
    加号:连接字符串和加法运算
    取余:弱类型语言允许浮点数取余
    赋值运算符:= += -= *= /= %=
    条件运算符:> < == != >= <= === !==
    逻辑运算符:&& || ^
    位运算符 :>> >>> << | & ~
    其他运算符: ? :
    七、流程控制
    八、函数
    是一段完成“特定功能”的已经“命名”的代码段(可以在声明之前调用,也可以在声明之后)
    1.函数名,函数名不加括号时就代表整个函数
    2.参数:根据需要使用参数
    3.函数体
    4.返回值(没有返回值是一个过程,又返回值是一个函数)

    回调函数
    把函数作为参数进行操作

    -----------------------------------------------------------------------------------------------------------

    JS数组的声明与应用

    1.只要是批量的数据都要使用数组的声明
    一、数组的作用

    二、如何声明数组
    a.快速声明数组的方法
    var 数组名 = [元素1,元素2,...,]
    b.声明方法
    使用Array对象
    var arr = new Array();
    三、遍历数组
    四、数组的处理
    concat 方法
    join 方法
    pop 方法
    push 方法
    reverse 方法
    shift 方法
    slice 方法
    sort 方法
    splice 方法
    toLocaleString 方法
    toString 方法
    unshift 方法
    valueOf 方法

    DOM
    将HTML中的元素转换成对象,是用js操作HTML文档,就需要将HTML文档结构转成就是对象
    a.操作属性
    b.操作内容
    innerText : (IE兼容)全以文本的形式把内容放进去(标签会被当做文本),取文本的时候反之(不会取标签) textContent :(其他浏览器(FF))
    innerHTML : 放进去的时候标签会被识别解析,取出来的时候标签会被取出
    outerText :
    onterHTML : 取出来的时候外部标签会被一起取出
    要取出表单中响应元素的内容时:object.value;
    注意:用document.all可以区分IE和其他浏览器
    c.操作样式
    object.style.backgroundColor = "red";
    //"-"去掉,后面单词的首字母大写
    批量操作: object.claaName = "类选择器名字"
    转成对象的两种形式
    1.标记名(多个)、id(唯一)、name(多个)
    document中的三个方法:
    var objs=document.getElementsByTagName("标记名");
    var objs=document.getElementById("id名");
    var objs=document.getElementsByName("name名");
    2.通过数组


    -----------------------------------------------------------------------------------------------------------
    在一个文档流中
    1.创建结点
    var obj = document.createElement("标签名");
    2.添加到文档流中
    a.在指定元素体里面添加
    obj.appendChild("动态创建的结点");
    b.在指定元素前面(newobj之前)
    parentobj.insertBefore(obj, newobj);
    c.在指定元素之后(自己写方法)
    function insertAfter(obj, newobj) {
    if (obj.nextSibling.nodeType==1) {
    one.insertBefore(newobj, obj.nextSibling);
    } else {
    one.appendChild(newobj);
    }
    }
    3.删除结点
    removeChild(one.lastChild);

    -----------------------------------------------------------------------------------------------------------

    事件处理
    一、事件源:任何一个HTML元素(结点)body div button p a
    二、事件:用户的操作
    鼠标:
    click 单击
    dblclick 双击
    contextmenu 文本菜单
    mouseover 放下
    mouseout 离开
    mousedown 按下
    mouseup 抬起
    mousemove 移动
    键盘:
    keypress 键盘事件
    keyup 抬起
    keydown 按下
    文档:
    load 加载(页面加载完之后触发的事件)
    unload 关闭
    beforeunloa 关闭之前
    表单:
    focus 焦点
    blur 失去焦点
    submit 提交事件
    change 改变
    其他
    scroll 滚动事件

    三、事件处理
    三种方式
    第一种:
    格式:<tag on事件 = "事件处理程序"/>
    第二种:
    <script>
    对象.onclick = function() {}
    </script>
    第三种:
    <script for = "事件源ID"event = "事件">事件处理程序</script>

    ----------------------------------------------------------------------

    事件对象
    window:
    document
    location//页面跳转
    <mate http-equiv = "refresh" content = "3">
    <mate http-equiv = "refresh" content = "3;url=http://www.baidu.com">//隔三秒钟跳转到百度首页
    header("Location:login.php");

    window.navigate('url');
    location.href='url';
    location.replace('url');
    要记住的:
    location = 'url';
    location.reload(true);
    history
    history.back();
    history.go(-2);
    screen


    关于位置的属性
    style.top
    style.left

    块高度:
    offsetWidth
    offsetHeight

    offsetLeft 块到左边对象的距离
    offsetTop

    scrollHeight
    scrollWidth
    scrollTop
    scrollLeft

  • 相关阅读:
    vim编辑器经常使用命令
    @RequestMapping value 能够反复吗 [
    [Android 4.4.2] 泛泰A870 Mokee4.4.2 20140531 RC1.0 by syhost
    leetcode——Reverse Linked List II 选择链表中部分节点逆序(AC)
    烤羊肉串引来的思考——命令模式
    全面解析Activity的生命周期
    PHP与Linux进程间的通信
    模块管理常规功能自己定义系统的设计与实现(36--终级阶段 综合查询[3])
    小米与格力的10亿豪赌!
    《Java设计模式》之装饰模式
  • 原文地址:https://www.cnblogs.com/virus1102/p/5040394.html
Copyright © 2011-2022 走看看