智能社JavaScript 笔记1：基础入门篇（1）

最新推荐文章于 2018-12-24 10:50:08 发布
最新推荐文章于 2018-12-24 10:50:08 发布
阅读量329 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yejing0609/article/details/81154277
版权
这篇博客介绍了JavaScript的基础知识，包括它的网页特效原理，如何创建第一个鼠标提示框特效，初识函数的定义和调用，以及如何使用getElementById方法来获取元素。同时，讲解了if判断语句的应用，并提供了练习题供读者实践。
摘要由CSDN通过智能技术生成

JavaScript是什么

网页特效原理
淘宝、新浪、百度
JavaScript就是修改样式
编写JS的流程
布局： HTML + CSS
属性： 确定要修改哪些属性
事件： 确定用户做哪些操作（产品设计）
编写JS：在事件中，用JS来修改页面元素的样式

第一个JS特效——鼠标提示框

分析效果实现原理
样式： Div的display
事件： onmouseover、onmouseout
特效基础
事件驱动：onmouseover
元素属性操作：obj.style.[…]
特效实现原理概括：响应用户操作，对页面元素（标签）进行某种修改

document.getElementById： 为了兼容性，必须要先通过ID获取元素后再使用

初识函数

制作更复杂的效果（DIV的颜色、大小都变化）
直接在事件内写代码会更乱
- 引入function()、函数的基本形式
- 把JS从标签里放入到函数里，类似css里的class
- 变量的使用——别名
定义和调用
- 函数定义： 只是告诉系统有这个函数，不会实际执行
- 函数调用： 真正执行函数的代码

getElementById

第一个JS兼容性问题
在EF下直接使用ID存在问题
- 引入document.getElementById()
- document.getElementById在任何浏览器下均可使用
网页换肤
- 土豆网“开灯、关灯”效果
- 任何标签都可以加ID，包括link
- 任何标签的任何属性，也都可以修改
- HTML里怎么写，JS里就怎么写（只有一个例外：className）

if 判断

点击按钮显示/隐藏Div（弹出菜单）
- 特效实现过程及原理分析
- if的基本形式
扩展
- 为a链接添加JS
<a href="javascript:;"></a>（不会发生页面跳转）
- className的使用

if(条件) {
    语句1
} else {
    语句2
}

练习

练习1：
鼠标移入到input上的时候，让div1显示
鼠标移出input上的时候，让div1隐藏

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style>
        #div1 {
            width:
最低0.47元/天 解锁文章
Little_Blue_Eye
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
智能社JavaScript学习笔记——11 - DOM基础
namei33的博客
05-27 1285
DOM （Document Object Model, 文档对象模型）标签——CSS 元素——JS 节点——DOM元素属性操作方式： 1. oDiv.style.display = ‘block’; 2. oDiv.style[‘display’] = ‘block’; 3. DOM方式DOM方式操作元素属性： 1. 获取：getAttribute(名称)
智能社JavaScript 笔记1：基础入门篇（2）
开发学习者
07-22 204
函数传参 改变背景颜色 - 函数传参：参数就是占位符 什么时候用传参：函数里定不下来的东西 改变Div的任意样式 - 操纵属性的第二种方法 什么时候用：要修改的属性不固定 字符串和变量——区别和关系 - 将属性名作为参数传递 style与className - 元素.style.属性=xxx 是修改行间样式 - 之后再修改className不会有效果 第一种操作属性方法：o...
智能社JavaScript系列视频案例笔记
11-05
案例1. 按钮 代码： <body> <input type="button" value="按钮" /> </body> 案例2.鼠标移入显示移出隐藏 代码： <style> #div1 {width:200px; height:100px; background:#CCC; border:1px solid #999; display:none;} </style> </head> <body> <input type="checkbox" /> <div id="div1"> 为了您的信息安全。。。。 </div> </body>
一、初探Javascript魅力(1)_看智能社blue老师JS视频整理的笔记
cherry_vicent的专栏
12-24 3096
1、javascript是什么 根据用户的一些操作，然后来修改页面上的一些元素、属性等。 （1）HTML+CSS静态页面，JS给页面添加动的效果 （2）网页特效的原理 javascript就是修改样式 （3）编写JS的流程： 【1】布局：HTML+CSS 【2】属性：确定要修改哪些属性 【3】事件：确定用户做哪些操作 【4】编写JS：在事件中，用JS来修改页面元素的样式
智能社JavaScript学习笔记——JS运动基础
namei33的博客
06-09 2008
1. 运动基础让Div运动起来<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{width: 200px; height: 200px; background: red; position: absolute;
前端开发基础：HTML+CSS
04-06
本篇笔记主要介绍HTML与CSS的基础知识，帮助初学者快速入门。 #### HTML简介 - **定义**：HTML（HyperText Markup Language）即超文本标记语言，是一种用于创建网页的标准标记语言。 - **作用**：HTML用于构建网页...
java安卓仿微信聊天软件源码-tanchao:个人前端笔记
06-04
智能社 - 精通JavaScript开发 重新介绍 JavaScript（JS 教程） 麻省理工学院公开课：计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS函数式编程指南 JavaScript Promise迷你书（中文版） 腾讯...
java安卓仿微信聊天软件源码-web:网络
06-04
智能社 - 精通JavaScript开发 重新介绍 JavaScript（JS 教程） 麻省理工学院公开课：计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS函数式编程指南 JavaScript Promise迷你书（中文版） 腾讯...
java安卓仿微信聊天软件源码-book:书
06-04
智能社 - 精通JavaScript开发 重新介绍 JavaScript（JS 教程） 麻省理工学院公开课：计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS函数式编程指南 JavaScript Promise迷你书（中文版） 腾讯...
Selenium2 Python 自动化测试实战学习笔记
04-15
在本篇学习笔记中，我们将深入探讨"Selenium2 Python 自动化测试"这一主题，它是一种广泛应用于Web应用测试的技术，结合Python编程语言，能够实现高效、可维护的自动化测试用例。Selenium2（也被称为Selenium ...
全集 智能社原创新版javaScript视频
05-31
智能社blue发布的javaScript视频教程，讲解的都比较不错很适合新手与老手学习。言简意赅，脚本之家小编看了都很喜欢。相信对于想学习javascript绝对是个不错的视频，当然学习的时候推荐你手上有本javascript的书籍。结合起来学习。毕竟是视频不会像文字说的的这么详细。 经下载观看体积达到了11G左右，准备个大点的空间吧。由于文件比较大，放在百度网盘里面的。本地下载有ppt与特效哦。
智能社JS视频配套源码
10-29
智能社JS视频配套源码，完整版，都在里面
智能社JavaScript系列视频资料
01-20
智能社JavaScript系列视频资料PPT和源码文件！
智能社课件
11-09
angularJS直播视频课件
javaScript入门ppt
09-14
对于javaScript入门学习者来说这是一本较好的书籍，里面详细介绍了javaScript语法。大家可以下载下来看看，希望对大家有所帮助。
智能社JavaScript学习笔记——13/14 - DOM操作应用 - 高级
namei33的博客
06-03 1257
表格应用1. 获取tBodies、tHead、tFoot、rows、cells 注意： 一个表格可以有多个tbody （所以tBodies是复数，是一个数组），但是只能有一个thead，一个tfoot （tHead和tFoot不是数组，只是一个元素）。 表格.tBodies[0] == 表格.getElementsByTagName(“tbody”)[0] <!DOCTYPE html> <
智能社：Javascript之Vue.JS
aaf122122的博客
12-24 352
课程目录： 智能社：Javascript之vue.JS(一）  1. 认识Vue 2. vue和angular的区别？ 3. vue基本雏形 4. 认识vue里面几个常用的指令 5. bootstrap+vue的简易留言 6. 其他指令全面认识？ 7. computed的使用 8. 属性和事件 9. class和style 10. 模板 11. 过滤器 12. vue的交互 13. 使用vue制作...
智能社JS学习笔记（二）
mirror29的博客
05-23 737
JS基础——JS的组成        ECMAScript（ES） : 负责翻译，为js的核心，解释器。        DOM (Document Object Model 文档对象模型)：赋予js操作HTML的能力，document。        BOM (Browser Object Modal 浏览器对象模型)：赋予js操作浏览器的能力，window，不兼容不建议使用。——变量类型：num...
智能社javascript
weixin_33885253的博客
01-09 92
http://www.chuanke.com/?mod=student&act=study&courseid=91706 转载于:https://www.cnblogs.com/keyan1102/p/4212261.html
ExtJS4入门教程：关键特性与实战笔记
ExtJS，全称为Extensible ...这篇笔记不仅包含代码示例，还有对ExtJS 4.0新特性的深入解析，适合新手通过实践学习和理解ExtJS的基础知识。如果你是刚接触ExtJS或者想深入研究这个框架，这篇笔记会是个不错的起点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值