zoukankan      html  css  js  c++  java
  • JavaScript总结

    (一)基础

    JavaScript是一门(客户端)脚本语言

    JavaScript文件的扩展名 .js

    您可以在文本字符串中使用反斜杠对代码行进行换行。如:docment.write("hello sjdlk");

    方法是能够在对象上执行的动作,就是函数

    输入的数据为字符串,要转换。

    原生对象要声明,初始化,如var tody=new Date(); var d=gtody.etDate();

    内置对象不用初始化,直接被使用,只有两个原生对象,GlobalMath2

    instanceof查看一个对象是否为一个类的实例

    基本数据类型undefinedNullBooleannumberstring

    内置对象array,date,booleandatemathfunction,number,string,events,regexp

    global,parseint(),parsefloat()

    ()面向对象

    面向对象:就是将程序中的所有单位看作为对象

    特点:封装,继承(对象冒充,call(),apply()),多态

    arry

    属性

    constructor

    //index

    //input

    length

    prototype

    方法

    array.concat()

    array.join()

    shift()

    pop()

    unshift()

    push()

    reverse()

    sort()

    slice()

    indexof()

    splice()

    toSource()

    toString()

    toLocaleString()

    valueof()

    Date

    方法

    getDate()

    getDay()得到星期几

    getMonth()

    getFullYear()

    getHours()

    getMinutes()

    getSeconds()

    getMiliseconds()

    setDate()

    setDay()

    setMonth()

    setFullYear()

    setHours()

    setMinutes()

    setSeconds()

    setMiliseconds()

    toString()

    toLocaleString()

    toLocaleDateString()

    toLocaleTimeString()

    Math

    属性

    PI

    方法

    abs()

    ceil()

    floor()

    max(x,y,..)

    min(x,y,..)

    pow(x,y)

    randow()

    round(x)

    Number

    属性

    MAX_VALUE

    MIN_VALUE

    NaN

    NEGATIVE_infinity

    POSITIVE_infinity

    方法

    toFixed()

    String

    属性

    方法

    anchor()

    big()

    blink()

    bold()

    charAt()

    charCodeAt()

    fixed()

    fontcolor()

    fontsize()

    concat()

    italics()

    link()

    replace()

    slice()

    small()

    split()

    strike()

    sub()

    sup()

    //indexof()

    lastindexof()

    toLowerCase()

    toUpperCase()

    (三)事件

    事件是用户或浏览器操纵网页时发生的行为

    事件流是网页上的元素相应事件的顺序

    为响应一个事件而被调用的函数称为事件处理程序

    事件流事:件冒泡,事件捕获

    阻止冒泡:属性cancelBubble=true,方法stopPropagation()

    事件处理程序

    事件发生时采取什么处理程序

    DOM2级:addEventListener(),removeEventListener();

    有三个参数addEventListener(“事件名”,函数名,是否处理程序要用事件冒泡或事件捕获)

    第三个参数设置为true,在事件捕获阶段

    第三个参数设置为false,在事件冒泡阶段

    这里事件名,不加on

    Event对象

    event对象包含了事件发生时的特定信息:包括触发事件对象,事件发生时的鼠标(键盘)事件

    eventwindow对象的一个属性

    IE中可直接访问event,因为这时event作为全局变量来使用

    DOM标准中规定:event对象只能作为仅有的参数传递给事件处理程序

    事件属性方法见P45

    事件类型:

    鼠标事件

    click//只是点击那瞬间的效果

    dblclick

    mousedown//按下后效果一直在mousdownclick 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生

    mouseup

    mousemove

    mouseenter

    mouseover

    mouseleave

    mouseout

    键盘事件

    keydownkeyupkeypress

    HTML事件

    loadwindow.onload)、unloadaborterrorresizescroll

    submitresetonreset)、focusblurchangeselect

    onchange

    DOM

    标记:告诉浏览器要做什么

    DOM是一种XML文档的解析标准,对HTML进行处理

    HTML注重展示效果。

    XML越简单越好。

    节点又称标记。

    DOM提供的API,可以对节点树进行增删改查。

    API就是一堆函数(函数库),DOM中属性都是API

    DOM原理:

    不使用IE浏览器。

    body里的两种元素块级内嵌。

    元素:包括标记,内容。如<div>123wwe</div>

    123wwe就是文本节点

    HTML注释节点<!--sdf-->

    Mozilla浏览器中,换行、空格被视为文本节点。

    表单中用name才能提交值,value

    append在元素后追加文本

    文件选择框file

    table>tr*3>td*4快捷

    tableborder-collapsecollapse不分开,}

    DOM用于获取HTML中的元素,并且可以修改它

    获取指定节点

    getElementByTagName(“某元素/标签/标记名”);得到是集合

    getElementByName()

    getElemeentById()

    创建和操作节点

    createElement(TagName)

    createTextNode(Text)

    apendChild()将给定的节点追加到某个节点的尾部;

    function s(){

    var op=document.createElement("p");

    var optext=document.createTextNode("hahahaha");

    op.appendChild(optext);

    document.body.appenChild(op);

    }

    removeChild(),replaceChildnew,old),insertBefore(new,old);

    HTML DOM特征功能

    oimg.srrc="test1.html";

    table方法

    P92

    innerHTML

    改变HTML内容

    innerTEXT包含标记

    innerHTML

    getAttribute(),setAttribute(),removeAttribute()

    BOM

    没有相关标准

    窗口、导航对象、定位对象、屏幕对象

    表单里不能嵌套表单

    显示图片可用img type="img"

    *通配符选择器不推荐用,效率低

    body自带边距,要设置body{margin:0;}

    hr水平分割线

    window对象

    window表示整个浏览器窗口

    document.body.offsetWidth,容器自身宽度

    document.body.offsetHeight,容器自身高度

    div.offsetLeft;容器自身边界与浏览器(父元素)左窗口的距离,在设置定位后才能用

    导航打开新窗口

    window.open("URL""新窗口名字""字符特性p64");

    window.open();

    window.close();

    top.opener,用子窗口关闭父窗口,用这个比较安全

    var fu=div.top.opener找到父窗口,fu.close关闭父窗口

    系统对话框

    window对象的alert()、confirm()、prompt()方法。

    时间间隔和暂停

    以后还是用setTimeout

    setTimeout(函数名/hansu(num)/hans()”,毫秒数);

    document.write会重载页面

    setinterval()

    clearTimeout()

    clearInterval()

    disable无效=true

    历史

    ctrl+h,查看记录

    window.history.go-1)或history.go(-11)负数后退多少页,反则。。

    history.back()前一个URL

    history.forward()后一个URL

    document对象

    属性

    referrer

    title,该属性可读写,可改变页面的标题

    top.document.title="new title"

    url

    对象的集合:就是查看元素的个数

    anchors

    forms

    images

    links

    options

    elements

    var aa=fomm.forms;alert(aa);//2

    document.write()

    document.writeln()在字符串后默认添加一个换行符(

    location对象

    解析URL

    herf

    host

    pathname

    port

    protocol

    search

    跳转到新页面

    location.herf"新页面路径";精确

    location.assign"";

    location.replace没有历史记录

    刷新页面

    reload重新载入当前页

    location.reload(false)从浏览器缓存中重载,默认为false

    location.reload(true)从服务器端重载

    document.location==window.location

    navigator对象

    获取浏览器信息

    window.navigetor

    navigetor.appname

    第六章使用DOM操纵样式表

    htmlleft权重大于right

    rgb0,0,0)黑色

    第七章表单编程

    js是用来做表单验证的

    表单:inputselecttextarea

    提交按钮input type="submit"

    input type="image"

    form对象.submit()

    1.form元素进行脚本编写

    postget的区别

    传递密码、有个人隐私的信息、中文信息、上传文件用post

    默认字符集(iso8859-1

    中文<meta charset="UTF-8">

    简体中文gbk,简体中文big5

    1)获取表单元素方式

    var a=document.getElementById();定位一个元素的方法

    var oform=document.forms;使用文档表单集合

    var b=document.forms[0];得到表单第一个元素

    var c=document.myform;  myformname的值

    2)访问表单域(字段)

    访问表单里面的内容和属性

    每个表单字段包含在表单表单的Elements集合中

    var ofirstFiled=oform.Elements[0];得到第一个表单字段

    还是用定位一个元素的方法好

    3)表单提交按钮

    普通按钮submit,和js绑定才能使用button,图像按钮,type=imagesrc=“图片路径”

    <form action="test1.html"id=forms,name=forms,onsubmit="return false;"/>//onsubmit="return false;"阻止表单提交,js能提交

    <input type=submit value="提交"/>

    <input type=image src="1.jpg"/>

    <input type="button" onclick="document.form.submit()" />js绑定才能提交

    </form>

    4)属性,方法,所有表单字段(除了隐藏字段)都有这些

    disabled属性

    readonly属性,只读

    form属性

    blur()方法

    blur事件

    focus()方法

    focus事件

    change

    2.对文本框进行脚本编写

    支持属性value,以获取文本框中的文本

    1)获取更改本框

    value属性是一个字符串,得到的是字符串值,可以使用字符串的所有属性和方法

    value.length,计算长度(个数);

    value可以给文本框赋新值

    2)选择文本框

    两种文本框都支持select()方法

    select()选择文本的内容

    3)文本框事件

    blurfocuschangeselect

    4)实现自动选择文本框

    onfoucs="this.select";

    5)文本框

    style{resize:none;}//不能放大,缩小

    textarea的提示直接写在标记中间<textarea name="" id=""cols=""  rows="" style="resize:none;">请输入内容</textarea>

    3.对列表框和组合框脚本编写

    1)下拉列表

    访问选项

    options集合

    option元素属性:text显示文本(文本结点),value显示值(html中的属性值),index指示它在options集合中的位置

    length

    2)获取/更改选中项

    selectselectedIndex属性返回当前被选中的选项的索引,如果没有选中返回-1;要在提交后才看得到alert里的值

    select元素的multiple属性值为multiple,允许多选

    multiple:允许多选

    select的属性selected指示选项是否被选中

    size设置显示多少个

    selectedIndex//选项是否被选中,selectedindex.length,选中返回下标,没选中返回-1

    selectedIndex设置返回下拉列表中被选项目的索引号

    4.复选框和单选框

    有和input元素共同的对象和属性

    还有其他属性

    checked属性,指示控件的状态,是否被选中

    defaultchecked默认是否被选中

    input一样的方法,还可以用1click()

    <form action="1.html">

    <input type="radio" name="sex" value="m"id="male"/><label for="male"></label>//绑定用labelforinputid相同的值

    <input type="radio" name="sex" value="n"id="female"/><label for="female"></label>

    //这时name值是为了分组,value是为了提交表单值

    </form>

    5.表单进行验证

    is NaN(参数)

    字符串下标

    (八)正则表达式

    Regular Express(RegExp)

    规定字符串格式。

    基于人类神经发展起来的。

    减少所写的验证代码,执行效率不一定高。

    所有编程语言都可以用。

    学习常用的:

    1.什么是正则表达式?用于描述复杂规则的字符串的工具。用来验证字符串的

    2.语法格式

    3.最重要的是方法

    RegExp.test()检测字符串string,看它是否含有与regEpx相匹配的文本

    test()最好用

    var reg=/^lovo&/;//^表示匹配值的开头$表示匹配值的结束

            div1.innerHTML=reg.test(txt.value);//

    4.元字符

    +、这个符号左边的第一个字符连续出现一次或多次

    *、这个字符左边的第一个字符出现零次或多次

    ?、这个字符左边的第一个字符出现零次或一次

    s用于匹配单个空格符,包括tab和换行符

    S用于匹配除空格以外的所有字符

    d用于匹配从09的数字

    w用于匹配字母,数字或下划线字符

    W用于匹配所有与W不匹配的字符

    .用于匹配除换行符之外的所有字符

    ^”开始标记,“$”结束标记

    5.限定符   n必须为正整数

    {n}确定次数

    {n,m}n<=m次数在nm之间包括nm

    {n,}次数>=n

    {}表示出现的次数,[]对应位置上的取值选项。[]{2,4}2表示[]里面的每个元素出现的次数

    ()表示一整体匹配值,不能改变

    6.常用的正则表达式

    邮件地址:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/

    校验是否全由数字组成:/^[0-9]{1,20}$/

    校验邮政编码:/^[0-9]{6}$/

    校验密码:只能输入6-20个字母、数字、下划线

    /^(w){6,20}$/

    中文汉字:/^[u4e00-u9fa5]{2,}$/

    事件处理方式有几种:传统处理方式,现代处理发送

    传统处理方式

    document.getElementById("id").onchange=funtion(){}

    获得元素两种方法BOMDOM

    js中直接用blur(像素值)模糊度,invert0~1)饱和度,opacity0~10%)透明度

    img.style.opacity=0.1;

    img.style.blur="10px";

    1.使用步骤:在webstore中插入文件jquery-1.12.2.min.js

    才能在JavaScript中写jquery代码

    jquery

    1.是一种快速,简洁的javaScript库,写在JavaScript中,在JavaScript中调用

    2.它结合(BOMDOM)的优点

    3.获取元素(定位元素)采用css选择器的形式

    4.版本

    1*.*1.4.41.7.21.12.4)通用;

    2*.*2.2.4HTML5

    3*.*3.1.1ES6

    5.浏览器的兼容性

    6.jQuery是一些API,是一个查件

    7.jQuery$代替

    8.选择器

    9.css中有:ID选择器、类选择器、元素选择器、并集选择器。。。。

    大于1gt(greater than)

    小于ltless than

    常用的

    length对象中元素的个数

    index()搜索匹配的元素,并返回相应的索引值,从0开始

    slice(stratend)选取一个匹配的子集

    一、jQurey中的DOM操作

    1.添加

    jQuery中声明变量 var $n=("<p></p>");

    1)标签内

    append

    prepend

    2)标签外

    after

    before

    2.删除

    remove

    detach

    empty置空

    3.复制

    clone

    clone+true

    4.替换

    旧节点replaceWith(新节点)

    新节点replaceAll(旧节点)

    5.包裹

    wrap有多少个包裹多少个

    wrapall

    wrapinner

    6.属性节点

    获取元素属性attr(属性名),attr(属性名,属性值)

    修改多个attr({属性名:属性值,。。。})

    删除removeattr

    7.样式操作

    AddClass

    removeClass

    toggleClass切换样式(综合添,删效果);

    hasClass()判断某个元素是否有某个样式,返回truefalse

    8.设置与获取HTML和文本值

    html(),innerHTML属性 包括元素之间的内容(标签和内容)

    text(),innerTEXT属性只包括文本

    val(),value属性获取表单里面的控件的值,设置表单控件默认值

    9.遍历节点

    children()取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,只考虑子元素而不考虑所有后代元素

    parent()取得一个包含着所有匹配元素的唯一父元素的元素集合

    parents()取得一个包含着所有匹配元素的祖先元素的元素集合(不包括根元素)

    childrenx/parents(x)  x可以选定指定的元素,就是对同辈元素进行筛选

    next()同辈下一个节点,prev()同辈上一个节点

    Sibling()所有不包括自己的同辈节点

    ancestor desecondant//在给定祖先元素下匹配所有后代元素

    parent>child//在给定的父元素下匹配所有的子元素

    :animated匹配所有正在执行动画效果的元素

    20.CSS DOM操作

    with(),height()

    position()

    offset()相对于当前窗口偏移值(topleft

    hover()事件

    jQuery动画

    show()hide(),toggle()

    fadein()fadeout(),Fadeto(),FadeToggle()

    slideup()slidedown(),slideToggle()

  • 相关阅读:
    php 计算两点地理坐标的距离
    objective-c中#import和@class的差别
    我与小娜(07):量子通信的奥
    OpenStack部署到Hadoop的四种方案
    iOS UI13_数据解析XML_,JSON
    Redis集群
    《AndroidStudio有用指南》反馈问题和建议
    numpy函数库中一些经常使用函数的记录
    1015 history grep |mysql
    php 生成压缩文件
  • 原文地址:https://www.cnblogs.com/chenduzizhong/p/6536201.html
Copyright © 2011-2022 走看看