妙味远程课堂-JS热身运动-下

html由属性名和属性值组成

属性读操作:获取、找到

元素.属性名

属性写操作:添加、替换、修改

元素.属性名=新的值

元素.innerHtml//读取元素内的html内容

元素.innerHtml=新的值//修改或替换他里面的内容

案例1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>妙味1</title>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById(‘btn1‘);
            var oText=document.getElementById(‘text1‘);
            var oSelect=document.getElementById(‘select1‘)
           oBtn.onclick=function(){
       //alert(oText.value+‘在‘+oSelect.value);
       //oText.value=‘grey‘;
               oText.value=oSelect.value;
        }}
    </script>
</head>
<body>
<input id="text1" type="text">
<select id="select1">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="杭州">杭州</option>
</select>
<input id="btn1" type="button" value="按钮">
</body>
</html>

案例2

时间: 2024-08-05 02:50:05

妙味远程课堂-JS热身运动-下的相关文章

妙味云课堂之css:其它知识点汇总

一. 热区 map 热区.area 点击区域 shape="circle" 圆型,coords="圆心点X.圆心点Y,圆的半径" shape="rect" 矩形.coords="矩形左上角x,矩形左上角Y,矩形右下角X,矩形右下角Y" shape="poly" 多边形.coords="第一个点X.第一个点Y.第二个点X.第二个点Y..." <img src="bigptr

妙味课堂Jquery从入门到插件开发到模拟视频教程 Jquery实战开发 Jquery UI

<jQuery课程 初级到高级到模拟>├<第一课:jQuery初级>│  ├01 妙味云课堂-jQuery简介.mp4│  ├02 妙味云课堂-jQuery设计思想之选择元素.mp4│  ├03 妙味云课堂-jQuery设计思想之写法.mp4│  ├04 妙味云课堂-jQuery设计思想之原生关系和链式操作.mp4│  ├05 妙味云课堂-jQuery设计思想之取值和赋值.mp4│  ├06 妙味云课堂-jQuery方法之filter not has.mp4│  ├07 妙味云课堂

妙味课堂——HTML+CSS基础笔记

妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - PS工具: - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓(快捷键:空格) - 缩放(快捷键:Ctrl + 和 Ctrl -) - 标尺(快捷键:Ctrl R,主要是拖出参考线.矩形区域选择的时候,按住Ctrl,就能贴合参考线) - 自由变换(快捷键 Ctrl

妙味课堂——JavaScript基础课程笔记

集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热身课程 写JS的步骤 先实现布局 想出实现原理 了解JS语法 希望把某个元素移除的实现 display: none; 显示为无 visibility: hidden; 隐藏 width \ height 透明度 left \ top 拿与背景色相同的div盖住该元素 利用margin值 …… 获取元

妙味课堂基础篇0_3

1.日历 1 JAN 2 FER 3 MAR 4 APR 5 MAY 6 JUN 7 JUL 8 AUG 9 SEP 10 OCT 11 NOV 12 DEC 1月活动 快过年了,大家可以商量着去哪玩吧- <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <

妙味js预热课程(一)

2016年5月24日(妙味课堂js预热课程-2笔记)一.前言 1.window.onload(事件):是在页面加载完成以后来执行一个功能: 如 window.onload=function(){ alert(“a”) } 这是一个匿名函数,因为在function后面括号前面没有名字: 即在页面加载完成以后弹出一个警告框! 2.如何提取行间事件: 3.为什么一定要用到onload? 二.主要内容 1.收缩展开菜单——if判断 如果菜单已经是显示的,把菜单隐藏: 如果菜单已经是隐藏的,把菜单显示.

【学+原】CSS3的2D动画 ——仿NOMOS手表—— 妙味课堂

看CSS3妙味课堂中有一课是介绍如何做钟表界面,然后三根针都能随着时间转动,然后自己在那个简易的版本上做了一些进一部改进. 最关键的知识点应该是transform-origin这个样式,要选对旋转的中心点.分针秒针时针的旋转中心点应该是针的底部中间位置 这个实例还是让我第一次见到把<style>设置了id,然后写进js里去操作的,因为表面的各种小时,秒的刻度的制作,需要用循环来写,直接写css样式里是不现实的. 另外就是要把setInterval和transform:rotate结合起来使用,

【学】CSS3的3D动画 ——3D旋转(1)—— 妙味课堂

最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve-3d;是加在正反面的父级,使动画具有3d的效果:但是ie11并不支持preserve-3d perspective也要加在父级上,使动画具有透视效果: 要给父级也加上宽高,否则动画没有效果 <style> #box{ margin: 70px auto; width: 300px; height

妙味课堂的导航效果

首页 首页 前端开发教程 前端开发教程 妙味视频教程 妙味视频教程 周末班上课安排 周末班上课安排 结课标准 结课标准 联系妙味 联系妙味 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body,ul{margin: 0;padding: 0;} li{li