一、输出语句

1、alert:弹出警示框（用的非常少，用户体验不好）
完整写法：window.alert（“执行语句”）；
window对象，窗口，一般情况可省略
alert(123);

2、console控制台输出（用户看不见）
一般用于测试用
console.log();控制台输出，普通输出语句
console.warn();控制台警示
console.error();错误提示

3、document.write()；文档打印输出，直接在文档中显示
document文档对象，不可省略

获取对象方法：
document.getElementById("demo");

二、变量

1、变量名必须以字母、下划线、美元符号$开头
2、变量名中不能有空格
3、多个变量声明：var num=1,num=2,num=3;

4、变量分为全局变量和局部变量

全局变量：
1、在最外层声明的变量
2、在函数体内部，但是没有声明var的也是全局变量
局部变量：
在函数体内部声明的变量

局部变量优先于全局变量。函数若不调用，可跳过执行。

三、事件

事件三要素：事件源、事件、事件处理程序
事件源：要触发的对象
事件：鼠标事件
事件处理程序：发生了什么
事件源.事件=function(){事件处理函数}

隐藏事件：
display:none;隐藏了不占位置
visibility:hidden;隐藏占位置
overflow:hidden;隐藏超出的部分

入口函数：window.onload=function(){
内部放js代码
}//页面加载完后执行js部分

百度换肤实例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>百度换肤效果</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         body{

             background: url("images/1.jpg") top center;

         }

         .box{

             height: 200px;

             background: rgba(255,255,255,.3);

             text-align: center;

             padding-top:50px;

         }

         .box img{

             cursor: pointer;

         }

     </style>

     <script>

         window.onload=function(){

             var pic1=document.getElementById("pic1");

             var pic2=document.getElementById("pic2");

             var pic3=document.getElementById("pic3");

             pic1.onclick=function(){

                 document.body.style.backgroundImage="url(images/1.jpg)";

             }

             pic2.onclick=function(){

                 document.body.style.backgroundImage="url(images/2.jpg)";

             }

             pic3.onclick=function(){

                 document.body.style.backgroundImage="url(images/3.jpg)";

             }

         }

     </script>

 </head>

 <body>

 <div class="box">

     <img src="data:images/1.jpg" alt="" width="150" id="pic1">

     <img src="data:images/2.jpg" alt="" width="150" id="pic2">

     <img src="data:images/3.jpg" alt="" width="150" id="pic3">

 </div>

 </body>

 </html>

运行效果：

第22天：js改变样式效果的更多相关文章

  1. js改变css样式

      CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...

  2. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  3. 【问题】js 改变鼠标样式，chrome浏览器不能立即更新，暂没有解决办法

    元素的css,cursor可以改变鼠标样式.也就是鼠标放到元素上去时,改变为相应状态. 通过JS改变cursor时,我发现chrome浏览器不能立即更新,需要动一下鼠标才行,试了几个其它浏览器都是立即 ...

  4. 用JS改变的元素CSS样式，css里display :none 隐藏 block 显示

    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...

  5. 用JS改变页面中b标签的样式啊 样式的等

    用JS改变页面中b标签的样式啊 样式的等    ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...

  6. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  8. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  9. javascript改变样式（cssFloat,styleFloat）

    昨天遇到一用js改变元素浮动的,当时直接写了 obj.style.float="left";结果没起作用:查了资料后才发现不能这样写,现在整理下几种样式写法 1,直接写css属性的 ...

随机推荐

  1. tcp滑动窗口与拥塞控制

    TCP协议作为一个可靠的面向流的传输协议,其可靠性和流量控制由滑动窗口协议保证,而拥塞控制则由控制窗口结合一系列的控制算法实现.一.滑动窗口协议     所谓滑动窗口协议,自己理解有两点:1. “窗口 ...

  2. 成都Uber优步司机奖励政策（3月30日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. 苏州Uber优步司机奖励政策（8月31日至9月6日）

    当周最新司机奖励(8月31日至9月6日) 滴滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http: ...

  4. Android性能测试 | 启动时间篇

    [转载]原文地址:http://www.51testing.com/html/93/n-3724593.html 背景介绍 Android用户也许会经常碰到以下的问题: 1)应用后台开着,手机很快没电 ...

  5. mysql索引 b+树

    1.B+树基本概念 B+树的语言定义比较复杂,简单的说是为磁盘存取设计的平衡二叉树 网上经典图,黄色p1 p2 p3代表指针,蓝色的代表磁盘,里面包含数据项,第一层17,35,p1就代表小于17的,p ...

  6. Qt-QML-C++交互实现文件IO系统

    QMl是没有自己的文件IO控制的,这里如果我们需要对文件进行读写操作,那么就需要去C++或者JS完成交互,交互方式有多种,由于我还没有掌握,这里就不介绍具体的交互方式了.这里就简单说明一下我的实现过程 ...

  7. 为什么测试人员必须掌握Linux？

    相信点进来的小伙伴不是对Linux感兴趣就是对测试感兴趣了,也希望本文可以帮助之前接触过Linux的小伙伴找到继续坚持学习下去的动力,之前没接触过Linux的小伙伴也能找到开始学习Linux的兴趣. ...

  8. Django自定义管理表单

    修改polls/admin.py: from django.contrib import admin from .models import Choice, Question class Choice ...

  9. 跟浩哥学自动化测试Selenium -- 浏览器的基本操作与元素定位(3)

    浏览器的基本操作与元素定位 通过上一章学习,我们已经学会了如何设置驱动路径,如何创建浏览器对象,如何打开一个网站,接下来我们要进行一些复杂的操作比如先打开百度首页,在打开博客园,网页后退,前进等等,甚 ...

  10. CMD Markdown basic & Math Cheatsheet

    CMD Markdown basic & Math Cheatsheet I am using CMD Markdown both at work and for study.You can ...