JavaScript排他

2024-08-27

JavaScript按钮排他思想

要求: 有一系列按钮,要求每单击其中一个,该按钮改变样式(以背景颜色为例),其他按钮恢复保持默认样式. 实现思路: 获取所有按钮元素首先先把其他按钮的背景颜色去掉再单独设置自己的样式代码实现: 仅展示<body></body>标签内的内容 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <butt

Javascript 2016年12月19日整理 JS基础 Chapter1 JS是一门运行在浏览器客户端的脚本编程语言,前台语言组成部分 1. ECMAscript JS标准 2. DOM 通过JS操作网页元素 3. BOM 通过调用API操作浏览器特点:封装,继承,多态 1. 简单易用 2. 基于对象编程中万事万物皆对象. 相对的是:基于过程 3. 解释执行(JS属于解释执行的语言) 使用范围 1. 表单验证 2. 轮播特效 3. 游戏开发 JS书写位置非常自由行内式写法一般采取的

JavaScript入门(2)

一.JS输出内容--(document.write) document.write()可用于直接向HTML输出流写内容,即直接在网页中输出内容. 第一种:输出内容用" "括起来,直接输出双引号内的内容 <script type="text/javascript"> document.write("I Love JS!");//内容用" "括起来," "里的内容直接输出. </script&

再起航，我的学习笔记之JavaScript设计模式25(迭代器模式)

迭代器模式概念介绍迭代器模式(Iterator): 在不暴露对象内部结构的同时,可以顺序地访问聚合对象内部的元素. 迭代器程序中的循环是一种利器,循环语句也使我们程序开发更简洁高效,但是有时一遍又一遍的重复性循环却让代码显得循环不堪. 这个时候我们就可以用迭代器来简化我们的循环遍历操作,下面我们创建一个迭代器类. //迭代器 var Iterator=function(items,container){ //获取父容器,若container参数存在,并且可以获取该元素则获取,否则获取doc

前端笔记之JavaScript（八）关于元素&计算后的样式

一.获取元素方法(JS选择器) 1.1概述得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: document.getElementsByTagName(); 全线浏览器兼容的,得到元素的方法,就这两个: document.getElementById() 通过id得到元素 document.getElementsByTagName(); 通过标签名得到元素们还有更多的得到元素

JavaScript基础三

1.10 关于DOM的事件操作 1.10.1 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 1.10.2 事件 JS是以事件驱动为核心的一门语言. 事件的三要素事件的三要素:事件源.事件.事件驱动程序. 比

javascript 实现手风琴特效

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

用jQuery实现轮播图效果，js中的排他思想

---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多的是遍历,所以会用到for(); 通过循环可以排除掉其他(包括自己) c.遍历后可以单独改变自己的样式 <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <

【前端】javascript+jquery实现手风琴式的滚动banner或产品展示图

实现效果实现步骤 // 鼠标放入到li中该盒子变宽,其他盒子变窄,鼠标移开大盒子,恢复原样 // 实现步骤 // 1. 给li添加背景 // 2. 绑定onmouseover事件,鼠标放入到li中,该盒子变宽,其他盒子变窄 // 3. 移开盒子,恢复原样实现代码 <!DOCTYPE html> <html> <head> <title>手风琴式图片展示列表</title> <meta charset="utf-8"&

【前端】javascript实现带有子菜单和控件的轮播图slider

实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // 4. 鼠标放到ol的li上切换图片 // 5. 添加定时器 // 6. 左右切换图片(鼠标放上去隐藏,移开显示) 实现代码: <!DOCTYPE html> <html> <head> <title>轮播图</title> <meta cha

javascript小练手

1.做一个小图标在界面中通过按钮可以变大变小变色变圆 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>改变图片</title> <style> .box{//设置显示的盒子的属性 width:100px; height:100px; background-color: red; } bu

前端JavaScript之DOM使用案例

1.弹出框点击关闭 (这个例子关键自己创建标签以及属性,不是太好想啊,而且作用相对来数也不是太大) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100

前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

小例子: 京东购物车京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以实现效果. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <styl

web前端篇：JavaScript基础篇（易懂小白上手快）-2

目录一.内容回顾: ECMAScript基础语法 1.基本数据类型和引用数据类型 2.条件判断和循环 3.赋值运算符,逻辑运算符 4.字符串的常用方法 5.数组的常用方法 6.对象 7.函数 8.日期对象 9.Math数学对象 10.数值和字符串转换 11.let var 区别 12.看代码写结果二.详细内容: 1.BOM(浏览器对象模型) 2.DOM(文档对象模型) 2.7 removeChild() 删除节点 2.8 DOM中heigh,clientHeight,offsetHeight

javascript中菜单栏切换案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #list li { list-style-type: none; width: 80px; height: 30px; line-height: 30px; background-color: bei

JavaScript基础目录

一.JavaScript简介 1.JavaScript用途 2.JavaScript的诞生 3.JavaScript从丑小鸭到金凤凰 4.JavaScript非常好学 5.学习方法二.Hello World! 1.JavaScript 书写的位置 2.alter()语句 3.控制台 4.行文特性 5.注释三.字面量 1.数字的字面量 2.字符串四.变量 1.整体感知 2.变量必须先声明才能使用 3.变量的赋值 4.变量声明的提升 5不写var的情况 6.用逗号来隔开多个变量的定义 7.区分

JavaScript实现动态轮播图效果

功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 4.给箭头绑定单击事件,并且使图片可以无缝轮播 5.实现自动轮播(动画函数) 具体实现代码: 1.鼠标移入左右侧箭头显示,鼠标离开箭头隐藏 con.addEventListener('mouseenter', function() { arrow_l.style.display = 'block';

第十一章前端开发-JavaScript

第十一章前端开发-JavaScript 11.3.1 js引入方式行内样式 <p id="" class="" style="" onclick="console.log(2);">mjj</p> 内嵌式 <script type="text/javascript"> // js代码 </script> 外接式 <script type="

原生javascript实现二级延时菜单

一.实现原理: 使用定时器和排他思想完成二.代码: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{margin: 0;padding: 0} ul,li{list-style: none;} .main{ width: 400px; height: 50px; float: left; margin-top: 10p

原生javascript实现仿QQ延时菜单

一.实现原理定时器和排他思想二.代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{margin: 0;padding: 0} .main{ width: 100px; height: 300px; background: #eee; float: left; margin-top: 10px; } .box{wi