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. CentOS下安装Docker

    简介:本篇文章介绍如何在CentOS系统下面安装docker系统. 官方文档:https://docs.docker.com/install/linux/docker-ce/centos/ Docke ...

  2. C#-WebForm-★★★JQuery知识——基础知识、选择器、事件★★★

    JQuery 与 JS 之间的转换 将JQuery转换为JS —— get(0) 例如:alert( $("#d1").get(0).offsetwidth ); 将JS 转换为J ...

  3. rdlc报表函数

    字符串函数 使用串联运算符和      Visual Basic 常量可将多个字段组合在一起.以下表达式返回两个字段,它们分别位于同一文本框的不同行中: 复制代码 =Fields!FirstName. ...

  4. 最近用.NET实现DHT爬虫，全.NET实现

    最近用.NET实现DHT爬虫,全.NET实现,大家可以加我QQ交流下  309159808

  5. HDU – 1050 Moving Tables

    http://acm.hdu.edu.cn/showproblem.php?pid=1050 当时这道题被放在了贪心专题,我又刚刚做了今年暑假不AC所以一开始就在想这肯定是个变过型的复杂贪心,但是后来 ...

  6. 基于Allwinner的Audio子系统分析(Android-5.1)

    前言 一直想总结下Audio子系统的博客,但是各种原因(主要还是自己懒>_<),一直拖到现在才开始重新整理,期间看过H8(Android-4.4),T3(Android-4.4),A64( ...

  7. 牛顿迭代法（Newton's method）

    关键词:牛顿法.牛顿迭代法.牛顿切线法.牛顿-拉弗森方法 参考:牛顿迭代法-百度百科.牛顿切线法-百度文库数学学院.牛顿切线法数值分析.非线性方程(组)的数值解法.Latex入门 https://bl ...

  8. docker仓库harbor镜像列表获取命令

    2019-03-14 搭建好docker仓库harbor之后,在服务器上获取harbor的所有镜像列表命令 curl -u "harbor账号:密码" -X GET -H &quo ...

  9. (转)mysql双机热备的实现

    mysql双机热备的实现 原文:http://www.zjian.me/web/php/mysql%E5%8F%8C%E6%9C%BA%E7%83%AD%E5%A4%87%E7%9A%84%E5%AE ...

  10. express后端和fetch前端的json数据传递

    在使用express做后端,前端使用fetch API来请求后端时,一般都是用 JSON 数据进行通信的. 下面是一个简单的例子: 前端: if (up) { var passwordAgain = ...