zoukankan      html  css  js  c++  java
  • JavaScript

    <-------------------------------------------------------------------------------------------------
    --------------------------------------------使用说明------------------------------------------------
    --------------------------------------------------------------------------------------------
    ------------------------------------------------>
    本次笔记仅供参考, 属于本人在网上及自己探索所整理集合.
    以下符号作出声明:
    //////////////////////JavaScript//////////////////////////// (为知识点的分类)
    <----------------------------------------------------------> (分页)
    ------------------------------DOM-----------------------------(知识点开头)
    ---------------------------DOM(END)-------------------------(知识点结尾)
    ***********************************************************(分割线)
    --- (小知识点分割符)
    !!! (备注)
    * (特殊标记)
    <--
    (名词解释)
    -->

    <-------------------------------------------------------------------------------------------------
    --------------------------------------------目录------------------------------------------------
    --------------------------------------------------------------------------------------------
    ------------------------------------------------>
    *************************************************************************************
    目录:
    1.单词函数名词解释
    2.JavaScript
    3.JQuery
    4.ThinkPHP
    5.
    6.

    *************************************************************************************
    <-------------------------------------------------------------------------------------------------
    --------------------------------------------备用------------------------------------------------
    --------------------------------------------------------------------------------------------
    ------------------------------------------------>
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.












    <-------------------------------------------------------------------------------------------------
    --------------------------------------------内容------------------------------------------------
    --------------------------------------------------------------------------------------------
    ------------------------------------------------>

    ////////////////////////////////////////////////////////////////////////JavaScript//////////////////////////////////////////////////////////////////////////////
    instanceof 实例

    调试函数:
    console.log(内容); 在后台输出
    document.write(内容); 在页面显示
    alert(内容); 弹弹弹!

    javaScript由核心语法ECMAScript、浏览器对象模型(BOM) 主要用于管理窗口与窗口之间的通讯,因此其核心对象是window、文档对象模型(DOM)三部分组成.
    JavaScript的组成
    ①ES ->ECMAScript (变量,关键字,保留关键字,数据类型,流程控制语句,内置对象等)
    ②DOM ->Document Object Model 文档对象模型 (将HTML文档转换为JavaScript对象)
    ③BOM ->Browser Object Model 浏览器对象模型


    ES对象
    ①自定义对象 var obj = new Object();
    var obj = {};

    ②宿主对象 由ECMAScript实现的宿主环境提供的对象
    可以理解为:浏览器提供的对象
    所有的DOM和BOM都是宿主对象

    ③内置对象:
    a. String对象
    b. Array对象
    c. Math对象
    d. Number对象
    e. Date对象
    f. RegExp对象
    g. Function对象


    ----------------------------------------------------DOM-----------------------------------------------------------
    ---
    获取对象:
    document.getElements By TagName (HTML标签) ->节点列表
    document.getElements By Name (name属性) ->节点列表
    document.getElement By Id (id属性) ->单个DOM对象
    !!!
    ->返回值

    ---
    对象属性:
    获取对象:
    var obj = document.getElementsByName("alink");

    读:目标对象.属性名称
    console.log(obj[0].href);

    设置属性:
    obj[0].href = "http://www.163.com";


    ---
    对象样式
    读:目标对象.style.样式属性名称

    设置:目标对象.style.样式属性名称 = 样式的值
    !!!
    ①CSS属性中有短横杠的属性(例如: background-color),
    通过JS.style操作时,会将短杠去掉,转成"小驼峰"的命名方式(backgroundColor)

    ②对于某些HTML标签中,属性名称与属性值相同的属性
    (单选框/复选框的checked属性, option标记的selected="selected")
    在HTML DOM中使用boolean类型表示


    ---
    添加类:
    目标对象.className = "class样式名称";

    清空类:
    目标对象.className = "";

    ---
    对象文本
    读:
    对象.innerText
    对象.innerHTML

    写:
    对象.innerText = 值;
    对象.innerHTML = 值;
    !!!
    innerHTML支持HTML标签;
    innerText不支持HTML标签(源代码模式)

    ---
    a链接调用JS
    <a href="javascript: FunctionName() ">内容</a>

    ---
    节点对象
    <--
    如果将HTML文档看成是一个倒置的树形结构,在改结构中,所有的文档HTML,标签,注释,属性和文本都可以被视作一个节点(node),节点都有节点名称(nodeName),节点类型(nodeType),有一些节点有节点值(nodeValue).节点之有关系,找到一个节点,根据节点之间的关系就可以找到全部的节点
    -->
    属性:
    ①nodeName 当前节点名称
    ②nodeType 返回的是数字指向的指定节点的节点类型
    ③nodeValue 节点值
    ④childNodes 获取当前节点所有*子节点*组成的集合(数组)
    ⑤parentNode 获取当前节点的*父节点*
    ⑥firstChild 获取当前节点的*第一个子节点*
    ⑦lastChild 获取当前节点的*最后一个子节点*
    ⑧previousSibling 获取当前节点*同一级别*的*上一个/兄弟/*节点
    ⑨nextSibling 获取当前节点*同一级别*的*下一个/兄弟/*节点

    ---
    DOM事件:
    鼠标事件:
    1.onclick 单机事件
    2.ondblclick 双击事件
    3.onmouseover 鼠标划入
    4.onmouseout 鼠标划出

    键盘事件:
    onkeydown 键盘按下
    onkeyup 键盘弹开

    文档事件:
    onload 文件加载完毕
    onunload 文档被关闭

    表单事件:
    1.onfocus 获取焦点
    2.onblur 失去焦点
    3.onchange 改变
    4.onsubmit 提交表单事件

    如何开启事件???
    ①<标签 on+事件="事件处理程序()"></标签>
    eg: <a onclick="dianjishijian()"></a>
    ②对象.on事件 = "事件处理程序"

    !!!
    1.+为拼接符,实际写代码时不需要写+
    2.事件处理程序后需要加 ( )


    -----------------------------------------------------------DOM(END)--------------------------------------------------------------

    ***********************************************************************************************************************

    -------------------------------------------------------------BOM-----------------------------------------------------------------
    <--BOM(Browser Object Model)浏览器对象模型-->

    ①window对象 (对象表示浏览器中打开的窗口)

    ②location对象 (对象包含有关当前 URL 的信息。)

    ③history对象 (对象包含用户(在浏览器窗口中)访问过的 URL。)
    ( 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。)

    ④navigator对象 (对象包含有关浏览器的信息)

    ⑤Screen对象 (包含有关客户端显示屏幕的信息。)
    ---

    ①window属性
    <--
    Window表示一个包含DOM文档的窗口,
    其document属性指向窗口中加载的DOM文档.
    比如在标签浏览器中(比如Firefox),
    每一个标签都具有自己的window对象
    -->
    1.innerHeight 返回窗口的文档显示区的高度
    2.innerWidth 返回窗口的文档显示区的宽度
    3.outerHeight 返回第一个匹配元素的外部高度
    4.outerWidth 返回第一个匹配元素的外部宽度


    ----------------------------------------------------------BOM(END)-----------------------------------------------------------------

    网页中引入javaScript三种方式:
    1.使用<Script></Script>标签内部样式
    2.使用外部js文件
    3.直接在HTML标签中的行内样式。


    javaScript的作用
    1.实现页面表单验证
    2.实现页面交互特效


    javaScript的特点

    1.被设计用来向Html页面添加交互行为

    2.是一种英特网上最流行的脚本语言

    3.一般用于编写客户端脚本

    4.是一种解释性语言


    JS中的函数
    1.系统函数

    ParseInt();转换为整数 45.9a转换为45;a6转换返回为NaN(Not a Number)

    isNaN(判断是不是数字)

    typeof(var);判断是什么数据类型

    eval(“5+2”);计算表达式值

    2.自定义函数

    Function 函数名(){javaScript代码}

    Function 函数名(参数1,参数2){javaScript代码 return 返回值(可选)}

    Js中函数的调用:
    事件名=“函数名(传递的参数值)“;
    函数名(传递的参数值);

    匿名函数:
    匿名函数的声明:

    Var 变量名=function(参数){ 函数体 return 返回值;} ;
    调用

    变量名(参数)


    \\\\\\\\\\\\\\\\\\\\\\\\\\\\JQuery\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    $(document).ready(function(){});

    $(function(){});

    上述两个代码等价

    事件:
    鼠标事件: .mouseover
    .mouseout
    .click
    .dblclick

    键盘事件 keyup
    keydown

    表单事件
    focus 获取焦点
    blur 失去焦点
    change 变更事件
    submit 提交事件

    文本
    ready 就绪件
    load 加载事件

    复合事件
    hover
    toggle

    load() 当指定的元素(及子元素)已加载时,会发生 load() 事件。

    该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。

    next() 获取下一个弟弟(兄弟)节点


    爆炸函数-粘连函数
    json_encode
    json_decode

    *ajax

    .load()如果不传参, 接收是get
    如果传参则是,post请求

  • 相关阅读:
    洛谷 P1443 马的遍历 BFS
    洛谷 P1583 魔法照片 快排
    洛谷 P1093 奖学金 冒泡排序
    洛谷 P3811 【模板】乘法逆元 如题
    洛谷 P3384 【模板】树链剖分 如题
    洛谷 P3379 【模板】最近公共祖先(LCA) 如题
    vijos 信息传递 tarjan找环
    洛谷 P3373 【模板】线段树 2 如题(区间加法+区间乘法+区间求和)
    酒厂选址
    ⑨要写信
  • 原文地址:https://www.cnblogs.com/chenliuxiao/p/10674172.html
Copyright © 2011-2022 走看看