初识JS的魅力（4）

最新推荐文章于 2024-07-18 10:24:18 发布
最新推荐文章于 2024-07-18 10:24:18 发布
阅读量324 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fkq_2016/article/details/62037933
版权

1. style与className

  • 元素.style.属性 = xxx 无论如何都是从行间取的样式。
  • className是控制物体的class；先修改style之后再修改className不会有效果——优先级的问题
  • 对于同一个标签，要不用style要不用class或者其他，不要混合使用。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .box {
            background: red;
        }
    </style>
    <script>
        function toRed() {
            var oDiv = document.getElementById('div1');
            // oDiv.style.background = 'red';
            //alert(oDiv.style.background);
            oDiv.className = 'box';
        }

        function toGreen() {
            var oDiv = document.getElementById('div1');
            oDiv.style.background = 'Green'; 
        }


    </script>
</head>
<body>
<input type="button" value="变红" onclick="toRed()"/>
<input type="button" value="变绿" onclick="toGreen()"/>
<div id="div1" ></div>
</body>
</html>

2. 提取行间事件

把onclick从行间拿出来。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>提取行间事件</title>
</head>
<body>
<input id = "btn1" type="button" value="按钮"/>
<script>
    var oBtn = document.getElementById('btn1');
    function abc(){
        alert('a');
    }
    oBtn.onclick = abc ;
</script>
</body>
</html>

3. 匿名函数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>提取行间事件</title>
</head>
<body>
<input id = "btn1" type="button" value="按钮"/>
<script>
    var oBtn = document.getElementById('btn1');

    oBtn.onclick =  function {
        alert('a');
    } ;
</script>
</body>
</html>

4. 提取事件2

把script提取到head里面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>提取行间事件</title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn1');

            oBtn.onclick = function () {
                alert('a');
            };
        };
    </script>
</head>
<body>
<input id="btn1" type="button" value="按钮"/>

</body>
</html>

5. 总结提取事件

  • 行为（JS）、样式(CSS)、结构(HTML)三者分离:别加行间样式，别加行间JS事件。

6. 循环

  • while
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>循环</title>
    <script>
        var i = 0;  //1.初始化

        while (i < 5) {     //2.条件
            alert(i);   // 3.语句

            //i = i + 1;     //4.自增
            i++;
        }
    </script>
</head>
<body>

</body>
</html>
  • for
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>循环</title>
    <script>
        for (var i = 0; i < 5; i++) {
            alert(i);
        }
    </script>
</head>
<body>

</body>
</html>

7. 获取一组元素——getElementsByTagName——数组的使用

使用循环前
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>提取行间事件</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid black;
            margin:10px;
        }
    </style>
    <script>
        window.onload = function () {
            var aDiv = document.getElementsByTagName('div');
            // alert(aDiv.length);
            //aDiv.style.background = 'red'; 一次只能对一个元素设置。
            aDiv[0].style.background = 'red'; //使用数组的下标，太过繁琐，所以要利用循环操作。
            aDiv[1].style.background = 'red';
            aDiv[2].style.background = 'red';
            aDiv[3].style.background = 'red';
        }
    </script>

</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
使用循环后
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>提取行间事件</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
    <script>
        window.onload = function () {
            var aDiv = document.getElementsByTagName('div');
            // alert(aDiv.length);
            //aDiv.style.background = 'red'; 一次只能对一个元素设置。
            for (var i = 0; i < aDiv.length; i++) {
                aDiv[i].style.background = 'red';
            }
        }
    </script>

</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

8. 全选、不选和反选

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function () {
            var oBtn1 = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');
            var oBtn3 = document.getElementById('btn3');
            var odiv1 = document.getElementById('div1');
            var aCh = odiv1.getElementsByTagName('input');
            oBtn1.onclick = function () {
                for (var i = 0; i < aCh.length; i++) {
                    aCh[i].checked = true;
                }
            }
            oBtn2.onclick = function () {
                for (var i = 0; i < aCh.length; i++) {
                    aCh[i].checked = false;
                }
            }
            oBtn3.onclick = function () {
                for (var i = 0; i < aCh.length; i++) {
                    if (aCh[i].checked == true) {
                        aCh[i].checked = false;
                    } else {
                        aCh[i].checked = true;
                    }
                }
            }
        }
    </script>
</head>
<body>
<input id="btn1" type="button" value="全选"/><br>
<input id="btn2" type="button" value="不选"/><br>
<input id="btn3" type="button" value="反选"/><br>

<div id="div1">
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
</div>
</body>
</html>
ab_dg_dp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初识JavaScript.md
09-02
对JavaScript的简单认识
初识Javascript小结
10-23
本文是一个学习javascript的新手总结的一些关于javascript的方法，有需要的小伙伴可以参考下。
JS 的魅力
luhuajcdd的专栏
02-14 445
http://js1k.com/2012-love/demo/1015
第一篇博客笔记
weixin_30399055的博客
03-15 79
一、初探JavaScript魅力 基本知识： JavaScript是什么 网页特效原理 　　-JavaScript就是修改样式 编写JS流程 　　- 布局：HTML + CSS 　　- 属性：确定修改哪些属性 　　- 事件：确定用户做哪些操作（产品设计） 　　- 编写js：在事件中，用js来修改页面元素样式 （小注：html + css 是静态页面，html + css + j...
初识JS的魅力（1）
fukaiqiang
03-07 323
这篇文章主要介绍了JS的简介和实现原理，以及JS开发中函数的运用，如何初步解决兼容性问题，还介绍了事件的运用，对于初学JS的伙伴来说，读完这篇文章可以对JS有一个基础的认识，对后面运用JS开发非常有益。
JavaScript魅力总结(1-5)
EmotionComputer
04-16 184
初探JavaScript魅力1 获取CSS样式的名称： className classList <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> 无标题文档 ...
初探js魅力 (鼠标提示框、换肤、函数、重用、函数传参、.和[]、 全选不选和反选、选项卡)
weixin_40512519的博客
09-02 224
第一个JS特效：鼠标提示框 鼠标移入到input时，让div1显示。鼠标移出input时，div1隐藏。 &lt;style&gt; #div1{ width: 200px; height: 100px; background-color: #cccccc; border: 1px solid #999; ...
初识JavaScript，体验JS的美好
txq231254的博客
03-30 1480
前言 此次打卡的是一种新的语言，名为 JavaScript，简称 js，是-种运行在客户端的脚本语言， 脚本语言意思是不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行。是不是感到一些好奇呢？现在就带着好奇来感受这个新语言的魅力吧！ 一、JavaScript的组成 ECMAScript DOM BOM 1、Javascript语法 页面文档对象模型 浏览器对象模型 ECMAScript : ECMAScrip...
前端开发 JavaScript第一章 初识JS
10-21
诗仙女炸鱼塘--js
初识JavaScript（源代码）
05-31
初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识JavaScript（源代码）初识...
初识javascript的一点点见解
08-10
接触javascript的时间说起来，长不长，短不短，其实真正开始学习它的时候应该是在去年大四11月份的时候，反正写网上的一些简单的特效，基本都是用jquery写得比较多，以致于对原生的js了解也是一知半解
JavaScript魅力总结(6-10)
EmotionComputer
04-19 311
6. BOM应用 打开和关闭标签页 <body> <input onclick="window.close();" type="button" value="close"/> <input onclick="window.open();" type="button" value="close"/> </body> ...
初探JavaScript魅力-笔记
eluanshi12的博客
10-24 256
初探JavaScript魅力-01初探JavaScript魅力-01JavaScript是一门用于给网页添加功能、交互的脚本语言。<html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> #div1{ width:200px; height: 100p
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 769
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 411
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 328
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
最新发布
weixin_44565776的博客
07-18 103
只要掌握了这些react技能，基本就可以熟练使用react了
ios CCUIAlertActivityView.m
编程语言技巧经验分享
07-17 483
// // CCUIAlertActivityView.m // CCFC // // #import "CCUIAlertActivityView.h" #import "CCNSNumber.h" #import "CCU
初识Python：从IDLE到简单编程
"初识Python公开课" 本课程主要涵盖了Python程序设计的基础知识，旨在帮助初学者了解并掌握Python语言。课程内容主要包括以下几个方面： 1. Python语言简介：Python是一种多用途的编程语言，支持跨平台，适用于Web...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值