JS 和 a href

在href里面注意分号结尾, 引号闭合

<a href="javascript:;">空链接</a>

<a href="javascript:alert('a');">弹出</a>

一般不妨代码, 一般让它空着. 空着也可以用井号'#', 但不是很好.

className

<style>

#div1 {width:100px; height:100px; border:1px solid black;}

.box {background:red;}

</style>

<script>

function toRed()

{

    var oDiv=document.getElementById('div1');

    oDiv.className='box';             //不要写成class

}

</script>

</head>

<body>

<input type="button" value="变红" onclick="toRed()" />

<div id="div1">

1. getelementbyId 是和id 相连. 但没有和 class相连的方法.

getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。

要用JS  根据/创建 className索引样式 . 需要在getelement后再加一个二级属性'.className'.

加了之后本来指定id的标签 不单从'井号'索引针对id的样式, 也同时从'点号'索引针对class的样式.

2. getelement.className = 'box';  引起的变化:                            //上面的例子是oDiv 换一个说法而已一样的.

如果<div>标签里面已经有class=xxx 的属性, 那么事件动作引出函数的时候, class=xxx将会被修改成class=box

如果<div>没有class =xxx , 就会在执行script的时候顺带创建.

回想一下 如果<div> 没有指明的style = XXX,  那么getelement.style.backgroud 也会自动创建

getelement. + style/ class / type / href / value  等等, 想改想加都可以很方便随意了.就怕你不像改

这仅仅是 一种方法.

- 还有getelement ['value'] 这样中括号引号的方式, 和 . (点号) 的带出属性是一样的. 一般不是特殊情况不会使用[' '] 这种方式.

如果[''] 要引用的是某个变量 假设 a ='width', 那么['a'] 就变成 [' ' width ' '] 这样就不符合getelement ['属性'] 这样的概念了.

这时候的处理方法就可以是[a] 就不带引号了!

- 所有的 . 都可以用 [''] 代替

oDiv.className='box';            //下面的是等价的

oDiv['className'] ='box';

多层也可以, oDiv['style']['width'] = '40px'

- 什么时候 需要用['']? 函数传参 一般可以传到值上, 有时候要传到属性名称上代表属性, 这时候就要用到['']

JS嵌入的html运行顺序:

-执行事件动作, 执行指向的JS函数, 函数对指定id标签进行修改.

JS嵌入的html代码编写顺序:

-想好更改什么效果, 标注id/class 到指定效果标签,  使用 .或者# 创建{style}, 调用ID编写变更css的逻辑,  用事件函数触发.

JS 和 a href className JS编写顺序与运行顺序 字符串或变量嵌入中括号 代替 点号 代表属性的更多相关文章

  1. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

  2. js改变或添加className

    js改变或添加className <style type="text/css"> .newDiv { font-weight: bold; } </style&g ...

  3. 站长常用的200个js代码 站长常用js代码大全 站长常用js代码集合

    站长常用的200个js代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect: ...

  4. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  5. require.js模块化管理和加载js（按需加载）简单实例教学

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  6. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  7. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  8. 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...

  9. 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...

随机推荐

  1. video.js 应用于网站需要视频的

    http://www.cnblogs.com/lechenging/p/3858181.html

  2. 云服务器、vps、虚拟主机的区别

    云服务器 Elastic Compute Service, 简称ECS 好多人理解云服务器和VPS一样,更有甚者说以前的VPS现在的说法就是云服务器,其实不然,云服务器是一个计算,网络,存储的组合.简 ...

  3. wireshark 抓包

    Wireshark(前称Ethereal)是一个网络数据包分析软件.网络数据包分析软件的功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据.Wireshark使用WinPCAP作为接口,直接 ...

  4. c#Filestream类（文件流）

    0.创建文件流几种方法: File.Open("a.txt",FileMode.Create,FileAccess.ReadWrite); File.OpenWrite(" ...

  5. 【转载】log4j详解使用

    log4j详解 日志论    在应用程序中输出日志有有三个目的:(1)监视代码中变量的变化情况,把数据周期性地记录到文件中供其他应用进行统计分析工作. (2)跟踪代码运行进轨迹,作为日后审计的依据.  ...

  6. 基础js--调试js

    1,逻辑错误 常见错误: 是否由于拼写错误而导致申明了新的变量? 是否在条件判定上出现了疏漏? 方法:使用开发者工具调试代码 2,代码错误 常见错误: 是否拼写错误? 是否使用中文的符号? 扩展: 1 ...

  7. WPF在XAML中使用MultiBinding的两个例子

    使用MultiBinding的原则:数据源有一个以上: 1. 需求:在一个需要显示的内容中,不同的部分要进行的处理不一样,这时可以使用MultiBinding <TextBlock> &l ...

  8. 数据库分库分表（一）常见分布式主键ID生成策略

    主键生成策略 系统唯一ID是我们在设计一个系统的时候常常会遇见的问题,下面介绍一些常见的ID生成策略. Sequence ID UUID GUID COMB Snowflake 最开始的自增ID为了实 ...

  9. Python基础 - 总则

    学习Python的笔记,有基础语法,有注意点.仅此而已. 目录: ------------------------------------------- Python基础(1) - 初识Python ...

  10. ORCLE报错解决（ora-01747:无效的用户.表.列，表.列）

    原因: 这个问题出现是因为表中存在关键字造成.