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. 论文笔记：CNN经典结构2（WideResNet，FractalNet，DenseNet，ResNeXt，DPN，SENet）

    前言 在论文笔记:CNN经典结构1中主要讲了2012-2015年的一些经典CNN结构.本文主要讲解2016-2017年的一些经典CNN结构. CIFAR和SVHN上,DenseNet-BC优于ResN ...

  2. Jupyter notebook用法

    参考官网文档:https://jupyter-notebook.readthedocs.io/en/stable/public_server.html 0.介绍jupyter notebook (此前 ...

  3. QuantLib 金融计算——收益率曲线之构建曲线（1）

    目录 QuantLib 金融计算--收益率曲线之构建曲线(1) YieldTermStructure DiscountCurve DiscountCurve 对象的构造 ZeroCurve ZeroC ...

  4. GoLand 调试 Go

    Goland 调试 Go 从百度得知 VS Code 不能很好的支持 Go 的调试真让人肝儿疼 -- 引言 准备 Win 10 Pro Go(Version 1.10) GoLand(2018.3) ...

  5. Django 登陆注册实现

    路由层 from django.conf.urls import url from django.contrib import admin from app01 import views urlpat ...

  6. [Xamarin] 透過 IsolatedStorageFile儲存資料（转帖）

    開發手機App通常都會遇到想要儲存資料的,舉個例來說,像是 (圖片來源:http://docs.xamarin.com/guides/android/application_fundamentals/ ...

  7. (转)MySQL自带的性能压力测试工具mysqlslap详解

    mysqlslap 是 Mysql 自带的压力测试工具,可以模拟出大量客户端同时操作数据库的情况,通过结果信息来了解数据库的性能状况 mysqlslap 的一个主要工作场景就是对数据库服务器做基准测试 ...

  8. javascript005_Object

    •我们目前为止大多数引用类型都是Object类型的实例,Object也是ECMAScript中使用最多的一种类型(就像java.lang.Object一样,Object类型是所有它的实例的基础). – ...

  9. mongodb启动失败：child process failed, exited with error number 100

    参考 http://www.dataguru.cn/thread-107361-1-1.html 里面的路径 根据自己的--dbpath的路径  和l--logpath路径去找

  10. 实现Date函数属性中的format方法

    js中没有Date.format方法的,所以在date属性中加format方法 //js格式化属性 Date.prototype.format = function (format) { var o ...