zoukankan      html  css  js  c++  java
  • 强哥JavaScript学习笔记

    js文件放header头最后,js代码放body体最后

    js语言定位:
    js是基于对象的语言
    php、java是面向对象的语言

    定义变量:
    var str="hello world"

    js变量作用域:
    1.函数外面定义的变量不管带不带var全部都是全局变量
    2.函数里面定义的变量,带var的是局部变量,不带var的是全局变量

    js变量类型:

    js基础对象:
    1.window //窗口对象
    2.document //文档对象
    3.document.documentElement //html对象
    4.document.body //body对象
    5.document.head //head对象

    js特效:
    1.通过js把标签转成元素对象
    2.js操作标签样式
    3.js操作标签事件

    js变量类型:
    1.字符串
    2.整形
    3.浮点
    4.布尔
    5.数组
    6.对象
    7.json对象
    8.NaN //不是一个数字
    9.null
    10.undefined

    测试变量类型
    typeof();

    Global对象方法:
    parseInt(string, radix)
    parseFloat(string)
    typeof(Object)
    eval(string)
    isNaN(testValue)
    String(Object)
    Number(Object)
    Array()
    Object()
    Bool()
    转布尔类型后哪些为假:
    0
    false
    ""
    null
    undefined
    NaN

    转布尔类型方法:
    1.Boolean(num)
    2.!!num

    js运算符
    1.+ 字符串连接符
    2. new 创建新对象用的
    3.this 本对象
    4.in 检查某一个属性是否是这个对象里面的
    5.instanceof 检查某个对象是否是由某个构造函数产生的
    6.delete 不能删除用var定义的变量,其他都可以用delete删除

    js语法:
    if;...else
    for
    while
    switch...case
    with
    for...in

    js弹窗
    1.alert() //警告
    2.confirm() //确认
    3.prompt() //提醒

    js内置对象
    1.数学
    2.日期
    3.定时器
    4.超时器
    5.字符串
    6.数组

    数学对象:
    Math.PI
    Math.ceil()
    Math.random()
    Math.max()
    Math.min()

    日期对象:
    var dd=new Date();
    alert(dd.getFullYear()); //年
    alert(dd.getMonth()+1); //月
    alert(dd.getDate()); //日
    alert(dd.getHours()); //时
    alert(dd.getMinutes()); //分
    alert(dd.getSeconds()); //秒

    定时器:
    setInterval();
    clearInterval();

    超时器:
    setTimeout();
    clearTimeout();

    字符串函数:
    属性:
    length
    方法:
    indexOf() //返回 String 对象内第一次出现子字符串的字符位置
    lastIndexOf() //最后一次出现的位置
    substr(3) //从位置3开始截取
    slice(0,3) //截取0-3
    split() //将一个字符串分割为子字符串,然后将结果作为字符串数组返回。支持正则
    search() //返回与正则表达式查找内容匹配的第一个子字符串的位置
    match()
    replace()

    js数组对象
    属性:
    arr.length()
    方法:
    pop() //弹出数组最后一个元素
    push() //从最后添加一个元素
    shift() //从开头删除一个元素
    unshift() //从开头添加一个元素
    slice() //从数组中截取一部分元素
    concat() //连接多个数组
    reverse() // 翻转数组元素
    sort() //数组元素排序
    splice() //删除并替换数组元素

    js Dom对象
    1.windows
    2.document
    3.document.head
    4.document.body
    5.document.title
    6.document.documentElement

    获取元素对象
    1.document.getElementById()
    2.document.getElementsByTagName()
    3.document.getElementsByClassName();
    获取页面上所有元素对象
    document.getElementsByTagName('*');

    document.all; //仅IE支持

    总结元素对象常用方法:
    obj.innerHTML
    obj.outerHTML
    obj.length
    obj.outerHTML
    obj.innerText //即将淘汰
    obj.textContent
    obj.tagName

    测试一些高度
    obj.clientHeight; //本身的高
    obj.offsetHeight; //包含边框的高

    document.body.clientHeight; //文档的高 屏幕的文档区域的高
    document.documentElement.clientWidth;
    document.documentElement.clientHeight; //有效的高 屏幕可视的高
    document.documentElement.scrollHeight; //屏幕的总高度
    document.documentElement.scrollTop; //滚动的高 滚动的高度

    document.documentElement.scrollTop //已经滚动了的高度,chrome不支持,其他支持
    document.body.scrollTop; //已经滚动了的高度,仅chrome支持

    js对象:
    1.obj=new Object()
    2.obj=document.getElementById()
    3.obj={"name","user1"}

    阻止默认行为:
    event.preventDefault();
    或者
    return false;

    1.<a href="inde.php" onclick="return false;">超链接</a>
    2.aobj.onclick=function(event){
    //event.preventDefault();
    return false;
    }
    默认行为:a标签提交或者表单submit提交


    js事件
    onabort 图像加载被中断
    onblur 元素失去焦点
    onchange 用户改变域的内容
    onclick 鼠标点击某个对象
    ondblclick 鼠标双击某个对象
    onerror 当加载文档或图像时发生某个错误
    onfocus 元素获得焦点
    onkeydown 某个键盘的键被按下
    onkeypress 某个键盘的键被按下或按住
    onkeyup 某个键盘的键被松开
    onload 某个页面或图像被完成加载
    onmousedown 某个鼠标按键被按下
    onmousemove 鼠标被移动
    onmouseout 鼠标从某元素移开
    onmouseover 鼠标被移到某元素之上
    onmouseup 某个鼠标按键被松开
    onreset 重置按钮被点击
    onresize 窗口或框架被调整尺寸
    onselect 文本被选定
    onsubmit 提交按钮被点击
    onunload 用户退出页面
    oncontextmenu 右键上下文菜单

    js事件方法:
    select();
    focus();


    getAttribute(); //获取属性的值
    setAttribute(); //设置属性的值

    js BOM浏览器对象
    1.window对象
    2.navigator对象
    3.screen对象
    4.history对象
    5.location对象
    6.document对象

    window对象
    属性:
    frames //窗口数组
    length //frame个数
    name //窗口名字 target="win2"
    opener //打开我的那个窗口
    parent //父窗口
    top //顶级窗口
    closed //测试某个窗口是否被关闭

    方法:
    open("right.html","win2","特性")
    窗口特性:
    fullScreen=1|0 //是否全屏
    width="" //窗口宽
    height="" //窗口高
    left="" //离屏幕左上角的left
    top="" //离屏幕左上角的top
    location=1|0 //是否有地址栏
    menubar=1|0 //是否有菜单

    alert()
    confirm()
    prompt()
    setInterval()
    clearInterval()
    setTimeout()
    clearTimeout()
    close() //ie没问题,ff有问题,ff子窗口
    moveTo() //ie没问题,ff有问题,ff子窗口
    moveBy() //ie没问题,ff有问题,ff子窗口
    resizeTo() //ie没问题,ff有问题,ff子窗口
    resizeBy() //ie没问题,ff有问题,ff子窗口
    scrollTo() //都支持,做一些滚动条有关的特效
    scrollBy() //都支持,做一些滚动条有关的特效
    navigator对象:
    属性:
    userAgent //更精确的版本

    screen屏幕对象:
    属性:
    height
    width

    availHeight //有效高
    availWidth; //有效宽

    history历史对象:
    属性:
    length //返回历史个数
    方法:
    back() //后退一个历史go(-1)
    forward() //前进一个历史go(1)
    go(2) //前进两个历史
    go(-2) //后退两个历史

    location对象:
    属性:
    hash //获取url里的锚点
    #abc
    host //主机名
    href //地址跳转,保留历史,也可以不写href直接写location="index.html"
    pathname //index.html页面的名称
    port //端口:80
    portocol //协议 http:
    search //参数 ?id=10&name=user1
    方法:
    reload() //加载当前页面,刷新当前页面
    replace() //加载当前页面,还可以跳转,但是不留历史

    文档内常用集合:
    1.forms
    2.elements
    3.options
    4.rows
    5.cells
    6.images
    7.links
    8.anchors //锚点
    9.frames

    Ajax无刷新技术:
    1.找到Ajax对象xmlHttpRequest (xhr)
    FF:
    xmlhttp=new XMLHttpRequest();
    IE:
    xmlhttp=new ActiveXobject("Microsoft.XMLHTTP");

    2.Ajax属性
    xhr.responseText;
    3.Ajax get方法
    xhr.open("get","index.php",true);
    xhr.send();
    4.Ajax post方法:
    xhr.open("post","index.php",true)
    xhr.send(string) //必须是字符串
    4.Ajax事件
    xhr.readystatechange=function(){}


    1. js DOM document object model
    2.DOM对象集合
    3.window.frames
    4.document.froms
    5.document.elements
    6.document.elements[0].options
    7.document.images
    8.document.links
    9.document.anchors
    10.tabobj.rows
    11.tabobj.rows[0].cells
    12.eleobj.innerHTML
    13.eleobj.outerHTML
    14.eleobj.textContent
    15.eleobj.getAttribute()
    16.eleobj.setAttribute()
    17.document.head
    18.document.title
    19.document.body
    20.document.getElementById()
    21.document.getElementsByTagName()
    22.document.getElementsByClassName()
    23.document.createElement()
    23.js ajax XMLHttpRequest对象

  • 相关阅读:
    TweenMax参数补充
    jQuery.lazyload详解
    js函数和jquery函数详解
    数数苹果手机中的不科学
    网页全栈工程师要点分析
    瞄了一眼墙外的世界,只能给差评
    脑洞大开的自然语言验证码
    别再迷信 zepto 了
    产品列表页分类筛选、排序的算法实现(PHP)
    大学回顾和C与PHP之路
  • 原文地址:https://www.cnblogs.com/redheat/p/7069792.html
Copyright © 2011-2022 走看看