JS 和 a href className JS编写顺序与运行顺序 字符串或变量嵌入中括号 代替 点号

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的逻辑,  用事件函数触发.

时间: 2024-11-08 23:51:19

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

a标签href调用js方法的问题

<!--<a href="javascript:secondThreadReply(this,1)" onclick="javascript:secondThreadReply(this,1);">回复</a>--> function secondThreadReply(this,1){ alert(obj); } 通过href调用js方法,如果传递参数this,js里获取到的并不是a标签对象,而是[object window]对

js中location.href的用法

常用的location.href的几种形式: self.location.href; window.location.href; this.location.href; location.href; parent.location.href; top.location.href; 举例: a.html: <form id="form1" action=""> <div><strong>这是a.html页面<strong>

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

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错.后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的. 源码: /** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, * 显示到页面时完全按传入的顺

JS href执行JS事件

参考地址 https://blog.csdn.net/zhangshuang92/article/details/54407229/ href执行JS https://blog.csdn.net/bingguang1993/article/details/82747448 异常报错 JS代码如下: <a href = "javascript:js_method()">文本</a> //不推荐,但是实在是好用,具体原因在参考地址查看 <a href =&qu

02 js运行原理 、js开发工具介绍 、js程序入门、 js基本语法

因为js是由浏览器来解释执行的,因此这里有一个问题,不同的类型的浏览器可能对js的支持不一样. js的运行一般分为:本地运行和远程运行 Tomcat架在公网上,其他网络用户可以访问,利用花生壳可以把一个内网的ip映射为公网 花生壳相当于用自己的服务器帮你转了一下而已. 如何选择开js发工具 微软的vs   .net平台 Eclipse 我们先选择用记事本,到了对Javascript 有了一定的了解后,我们再使用高级开发工具Eclipse. ①更深刻的理解javascript技术,培养代码感. ②

javascript(js)基础 dom基础(js语法)未来会删除此博客

<script> //文档中第三个图像:document.images[2] //文档中名为'aa'的表单:document.form['aa'] //层只有唯一 的id:document.layers[id] //微软的层id:docment.all[id] //如果想找到id的left位置并把它赋值给变量bs,在其他浏览器中是这样操作的:document.layers[id].left; //统一标准的dom是这样的:bs=document.getElementByid(id).style

原生js重写《锋利的JS》之 轮播效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

[转]js模块化——AMD及require.js

由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Definition,即异步模块加载机制,完整描述了模块的定义,依赖关系,引用关系以及加载机制.而AMD规范的作者亲自实现了符合AMD规范的requireJS.本文将详细介绍AMD及requireJS AMD规范 AMD(Asynchronous Module Definition)翻译为异步模块定义.异步强调的是,

使用Underscore.js的template将Backbone.js的js代码和html代码分离

这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去,这似乎不是一件非常好的事情,因为将js代码和html代码融合到一起会增加代码的维护难度,而且这个过程中考虑到性能的因素,需要将HTML代码放到一个数组中,最后进行拼接,代码写起来比较麻烦.我看到他们的代码之后就在考虑是否有一种类似php模板引擎的东西可以将Collection传递进去然后渲染. 我