day26JS

0、js引入方式和打印方式

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
在使用其他js文件前,先导入

<script src="js.js"></script> src后为js文件地址

四种引入方式
(1)<a href="javascript:alert('集合,准备团战')">百度一下</a>
(2)<div style="width:200px; height:200px; background-color:red" onclick="alert('等等我,马上到')"></div>
(3)在html页面的任何位置加入 <script>js代码</script>
(4)在html页面的任何位置加入 <script src='js.js'></script>
三种打印方式
(1)alert弹窗打印
(2)console.log('打印的内容') 结合浏览器控制台查看
(3)document.write('打印的内容') 往html文档中写内容

1、函数

全局变量和局部变量
    全局变量:直接定义的变量,全局有效
        加var和不加var都一样
    局部变量:函数体内定义的变量,只在函数体内有效
        如果局部前面有var,该变量真是一个局部变量
        如果局部前面没有var,该变量其实是一个全局变量,在函数调用之后,该变量即可随便使用
        上面知道即可,一般情况定义变量都加var
        如果局部和全局同名,优先使用局部变量
匿名函数
    没有函数名的函数,需要将其赋给一个变量,然后变量按照函数的形式进行调用即可
封闭空间
    将匿名函数用小括号括起来,然后在后面再加一个小括号调用这个匿名函数,称之为封闭空间

2、数组

定义:array
遍历:
    数组定义通过索引进行访问,索引从0开始
    但是数组也可以通过属性值追加属性和值,但是一般不这么使用
    遍历的时候,通过for进行遍历只能遍历索引数组,通过forin进行遍历,既可以遍历索引,又可以遍历属性
字符串遍历
    通过索引进行遍历,索引从0开始

3、对象

三种方式:
(1)构造方法
(2)通过官方创建
(3)直接写一个对象即可
    obj = {name: '王宝强', age: '36', wife: '马蓉蓉'}
    属性的引号可以添加也可以不添加,一般就不加了
    使用时候
    obj['name']   或者  obj.name
    在js中json格式字符串和js对象相互转化的函数
    将js对象转化为json字符串
        string = JSON.stringify(obj)
    json字符串转化为js对象
        obj = JSON.parse(string)
        obj = eval('(' + string + ')')

4、常用对象和函数

parseInt
    将字符串转化为整型,必须以数字开头,只要碰到非数字,转化结束
    如果以非数字开头,转化为NaN, 两个NaN不能判断是否相等,判断是不是NaN可以使用 isNaN函数 判断是不是NaN,是返回true,不是返回false
parseFloat
    将字符串转化为浮点,必须以数字开头,碰到非数字立马结束,小数点不算
    如果以非数字开头,转为NaN
Math对象
    abs : 绝对值函数
    ceil : 向上取整
    floor : 向下取整
    max : 取最大的值,传递过个参数,找到最大值
    min : 传递多个参数,找到最小值
    pow : 求幂
    random : 随机值  只能随机0-1之间的小数,如果需要随机5-10之间的数,自己实现
    round : 四舍五入函数
字符串常用函数
    indexOf : 字符串查找函数,返回查找到的字符串的第一个字母的下标,如果找不到,返回-1   类似于python里面的find
    lastIndexOf : 字符串查找函数,找最后一次出现的位置,找不到返回-1,类似于python里面的rfind
    substr : 字符串的提取  substr(start, length)  从start开始提取length个字符
    replace : 字符串替换,只能替换第一个  string.replace(old, new)
    toLowerCase : 全部转化为小写
    toUpperCase : 全部转化为大写
    fromCharCode : 所有的大写 65-90  所有的小写 97-122  数字 48-57
    split : 按照特定的字符进行切割
数组常用函数
    push : 给数组追加一个元素
    pop : 弹出最后一个元素,只能这么做
    shift : 弹出数组中第一个元素
    unshift : 数组最前面添加一个元素
    join : 字符串拼接  arr.join('*')  将列表里面所有的字符串按照 * 拼接
    reverse : 将数组逆序
    slice : slice(start, end)   [start, end)  左闭右开
    sort : 排序,如果都是数字,默认按照数字的ascii进行排序,如果想按照数字大小排序
        arr.sort(function (a, b) {return a > b})  从小到大排序
日期对象常用函数
    getDate : 获得日期
    getDay : 获得星期几  0-6  0表示周天
    getMonth : 0-11  当前月份减一
    getFullYear : 得到年份
    getHours : 得到小时  24小时进制
    getMinutes : 得到分钟数
    getSeconds : 得到秒数
    getTime : 时间戳,毫秒数

    每一个都有对应的设置方法,自己看看
    创建日期对象的方式
    // 创建当前时间的时间对象
    d = new Date()
    // 根据指定的时间戳创建时间对象
    d = new Date(1534750144520)
    // 根据时间字符串创建时间对象
    d = new Date('2018/8/20 15:29:04')
    // 根据年月日时分秒值创建对象
    d = new Date(2018, 7, 20, 15, 29, 4)

5、js简单演示

背景切换
核心:页码中有一个标签,如果想给标签添加点击事件,只需要写onclick,如果想添加其它的,添加对应事件即可。在事件的后面就要写代码,通过js的DOM操作找到指定节点,将节点的属性修改即可

6、获取对象

DOM操作,document object mxxx, 文档操作,document就是整个文档对象
document.getElementById          得到指定对象
document.getElementsByClassName  得到对象集合,符合类名要求的都可以得到
document.getElementsByName
document.getElementsByTagName    得到对象集合

7、常用事件

onmouseover :鼠标移动上去触发
onmouseout : 鼠标离开的时候触发
onmouseup : 鼠标按下松开的时候触发
onmousedown : 鼠标按下的时候触发
onmousemove : 鼠标移动的时候触发
onclick : 点击的时候触发
ondblclick : 双击的时候触发
如下两个用在input框中
onblur : 失去焦点
onfocus : 获取焦点

8、获取、设置属性和内容

获取属性
    odiv.id
    odiv.className
    odiv.style.width
    odiv.style.height
    odiv.style.backgroundColor
    【注】在css中带杠的属性,到js中都修改为小驼峰即可
获取内容
    odiv.innerHTML  获取标签里面的所有文本内容,带标签
    odiv.innerText  获取标签里面的纯文本内容
点和中括号区别
    能使用点的地方肯定能使用中括号,能使用中括号的地方不一定能使用点
    点后面只能跟属性名
    中括号里面可以写属性名字符串,也可以写变量
显示隐藏图片
this使用
切换背景色
表单内容控制

9、onload函数

onload事件是在加载完成后立即发生.(注意其中的l是小写).
  支持该事件的标签是:
  <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
  支持该事件的JavaScript对象是:
  image, layer, window.
  注意这里并没有document.
最常用的就是window.onload, 会等到整个页面及各种资源都加载完成之后再执行后面赋值的function行为.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,757评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,478评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,540评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,593评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,903评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,329评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,659评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,383评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,055评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,337评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,864评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,227评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,820评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,999评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,750评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,365评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,260评论 2 258

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,088评论 1 45
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 8,602评论 0 3
  • 娘亲在,她不太喜欢我挑的那些个音乐的! 开电视!要不,她就跟个孩子一样钻牛角尖!对娘跟对孩子一样,也得适当的转移她...
    纵情嬉戏天地间阅读 567评论 1 0
  • (一) 我有一个朋友。她长得很正常。就是不会让你一眼惊艳,但也不丑。 在这个00后对着97的女生吼“你这个97年的...
    不见苌楚阅读 538评论 3 2
  • 看,阳光明媚 驱走了昨天的雾霾 蓝天,白云 构出一副美丽的图画 万物瞬息渐变 人生何尝不是 一念天堂,一念地狱 想...
    自书自画阅读 335评论 0 5