初探Javascript魅力(1)
转自:CSDN--http://blog.csdn.net/cherry_vicent/article/details/42120149
1、javascript是什么
根据用户的一些操作,然后来修改页面上的一些元素、属性等。
(1)HTML+CSS静态页面,JS给页面添加动的效果
(2)网页特效的原理
javascript就是修改样式
(3)编写JS的流程:
【1】布局:HTML+CSS
【2】属性:确定要修改哪些属性
【3】事件:确定用户做哪些操作
【4】编写JS:在事件中,用JS来修改页面元素的样式
补:事件:就是用户操作,如鼠标点击、移入、移出等
(4)id:在css中,id作为css里的一个选择符存在,而在JS里它有更加广泛的用途,
在JS中扮演标签(元素)名字的作用,如<div id="div1">......</div>,id在这个例子里扮演了div名字的作用,div1就是div的名字
(5)div1.style.display='block'
点 . ------> 的,一般来说是所属的关系,其实是属性
等号 = ------> 在数学里,x=5,表示x的值就是5,即等号就是相等的意思
在JS里,等号并不是相等的意思,等号指赋值,把什么变成什么,把=右边的值赋给左边
2、第一个JS兼容性问题:document.getElementById
(1)在FF和低版本的chrome下,是不能直接拿着id就用的,存在兼容问题
真正兼容的写法是document.getElementById('id名字'),在任何浏览器下均可用
如:document.getElementById('div1');
通过div1这个id把元素获取出来,然后再来用
注:记住,不能直接拿着id就用,而必须的通过getElementById(把元素获取出来)获取一下,然后才可以用
(2)网页换肤
(1) 任何标签都可以加ID,包括link
(2) 任何标签的任何属性,也都可以修改
(3) HTML里怎么写,JS里就怎么写,只有一个例外就是class,因为class在JS里是关键字(保留字),所以不能直接拿来用,要写成className
3、引入函数:因为直接在事件内写代码会很乱
(1)函数基本格式:
- function 函数名()
- {
- 代码
- }
JS里的函数和css里的class有点相似,像class它最大的一个功能就是你把这个样式写到class里边,然后只要需要这套样式的地方,直接把那个class拿过去用就
可以了,同样JS里的函数也一样.
(2)函数的定义和调用
- function show() //定义
- {
- alert('abc');
- }
- show(); //调用
函数定义:只是告诉系统有这个函数,不会实际执行
函数调用:真正执行函数里的代码
注:函数的定义和调用缺一不可,只有定义则没反应,只有调用则显示出错了
(3)引入变量的概念:考虑到重用
变量:就是给东西取了个别名
如var oDiv=document.getElementById('div1');给后面这大串取了个别名叫oDiv。看到oDiv就跟看到document.getElementById('div1')是一样的效果
注:(1) 如果你要操作一个元素,你必须先把它选择过来,比如现在要操作的是text这个元素,那么需要先给它加个id,比如id="txt1",然后function函数里用
getElementById把它给选择过来
(2) 要操作谁,就要获取谁
(3) 需要一个函数,这个函数是为按钮准备的,因为它点击需要一个函数
4、if判断:如点击按钮显示/隐藏div(弹出菜单)
(1)if判断基本格式:
- if(条件)
- {
- 语句1
- }
- else
- {
- 语句2
- }
翻译:如果条件成立就执行语句1,如果条件不成立就执行语句2
注:(1) if :如果
(2) 条件:在IS里是判断的意思,就是遇到不同的情况就做不同的操作,遇到不同的问题就做不同的处理
(2)单等和双等(=和==)
= 赋值(改变,变成)
== 判断(判断两边是否相等)
(3)为a链接添加JS
<!--<a href="javascript:alert('a');">链接</a> -->
<a href="javascript:;">链接</a>
一般a里不加JS代码,而是空的js原因:(1) 在a里加js代码不好 (2) 加空的js代码而不是加#,因为它不会像#那样一点就跳到页首。
初探Javascript魅力(1)的更多相关文章
- 【JavaScript从入门到精通】第四课初探JavaScript魅力-04
第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...
- 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03
第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...
- 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
- 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01
第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...
- 01 - 初探JavaScript魅力
网页特效原理 用JavaScript修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 鼠 ...
- 初探JavaScript魅力(二)
行为,样式,结构三者分离(javascript, css, html),不要在行间加行为,样式 样式优先级:*<标签<class<ID<行间 style与className,如 ...
- 初探JavaScript魅力(五)
JS简易日历 innerHTML <title>无标题文档</title> <script> var neirong=['一','二','三','四','五' ...
- 初探JavaScript魅力(四)
选项卡 <title>无标题文档</title> <style> #div1 .active{background:#FF0;} #div1 div{width:2 ...
- 初探JavaScript魅力(三)
复选框的全选.反选和不选 <title>无标题文档</title> <style> body{background:#666;} </style> &l ...
随机推荐
- 在不打开excel的情况下用python执行excel
import win32com.client import time path = r'absolute dir' #比如填文件的绝对路径,比如d:/file/stock.xlsx xl = win3 ...
- PHP简单导出Excel表格
<?php header('Content-Type: application/vnd.ms-excel'); header('Content-Disposition: attachment; ...
- 数据结构与算法简记--Trie树
Trie树 概念 多叉树,节点为字符串中的单个字符. Trie 树的本质,就是利用字符串之间的公共前缀,将重复的前缀合并在一起. 将多个字符串按字符拆分插入Trie树,用于字符串查找,关键词提示等 举 ...
- quick'n'dirty poc for CVE-2013-1763 SOCK_DIAG bug in kernel 3.3-3.8
/* * quick'n'dirty poc for CVE-2013-1763 SOCK_DIAG bug in kernel 3.3-3.8 * bug found by Spender * po ...
- 【目录】循序渐进学.Net Core Web Api开发系列
当前标签: 循序渐进学.Net Core Web Api开发系列 循序渐进学.Net Core Web Api开发系列[16]:应用安全续-加密与解密 NET未来之路 2019-03-13 15: ...
- 前端学习(二十一)初识h5(笔记)
html5 主要目标:语义化!可以被人或者机器更好的阅读! 支持各种媒体的嵌入!不兼容低版本!------------ html5新标签: 普通: <header clas ...
- git安装和使用方法url
1.如何在ubuntu下使用Github? https://blog.csdn.net/tina_ttl/article/details/51326684 https://segmentfault.c ...
- Fiddler,对数据进行抓包,拦截,修改等操作
转载....... 一.fiddler设置fiddler默认是只能抓取http网络格式的,所以我们要先设置下使fiddler可以获取到https网络格式 首先tools→options→https进去 ...
- Linux curl 命令模拟 POST/GET 请求
Linux curl 命令模拟 POST/GET 请求 本文链接:https://blog.csdn.net/sunboy_2050/article/details/82156402 curl 命 ...
- leetcood学习笔记-28-KMP*
题目: 第一次提交: class Solution: def strStr(self, haystack: str, needle: str) -> int: if not len(needle ...