1、css重用 <style> 如果整个页面的宽度 > 900px时： { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </style> <div class='c c1'></div> <div class='c c2'></div> 2、自适应 和 改变大小变形 左右滚动条的出现 宽度，百分比 页面最外层：像素的宽度 => 最外层设置绝对宽度 自适应：media 3、默认img标签，有一个1px的边框 img{ border: 0; } 4、作业中的数量输入框 上节内容回顾 1、块级和行内 2、form标签 <form action='http://sssss' methed='GET' enctype='multi'> <div>asdfasdf</div> <input type='text' name='q' /> <input type='text' name='b' /> # 上传文件 <input type='file' name='f' /> <input type='submit' /> </form> GET: http://sssss?q=用户输入的值 http://sssss?q=用户输入的值&b=用户输入的内容 POST： 请求头 请求内容 3、display: block;inline;inline-block 4、float： <div> <div style='float:left;'>f</div> <div style='clear:both;'></div> </div> 5、margin: 0 auto; 6、padding, ---> 自身发生变化 CSS补充 position: a. fiexd => 固定在页面的某个位置 b. relative + absolute <div style='position:relative;'> <div style='position:absolute;top:0;left:0;'></div> </div> opcity: 0.5 透明度 z-index: 层级顺序 overflow: hidden,auto hover background-image:url('image/4.gif'); # 默认，div大，图片重复访 background-repeat: repeat-y; background-position-x: background-position-y: 示例：输入框JavaScript 独立的语言，浏览器具有js解释器 JavaScript代码存在形式： - Head中 <script> //javascript代码 alert(123); </script> <script type="text/javascript"> //javascript代码 alert(123); </script> - 文件 <script src='js文件路径'> </script> PS: JS代码需要放置在 <body>标签内部的最下方 注释 当行注释 // 多行注释 /* */ 变量： python： name = 'alex' JavaScript: name = 'alex' # 全局变量 var name = 'eric' # 局部变量 写Js代码： - html文件中编写 - 临时，浏览器的终端 console 基本数据类型 数字 a = 18; 字符串 a = "alex" a.chartAt(索引位置) a.substring(起始位置，结束位置) a.lenght 获取当前字符串长度 ... 列表(数组) a = [11,22,33] 字典 a = {'k1':'v1','k2':'v2'} 布尔类型 小写 for循环 1. 循环时，循环的元素是索引 a = [11,22,33,44] for(var item in a){ console.log(item); } a = {'k1':'v1','k2':'v2'} for(var item in a){ console.log(item); } 2. for(var i=0;i<10;i=i+1){ } a = [11,22,33,44] for(var i=0;i<a.length;i=i+1){ } 不支持字典的循环 条件语句 if(条件){ }else if(条件){ }else if(条件){ }else{ } == 值相等 === 值和类型都相等 && and || or 函数： function 函数名(a,b,c){ } 函数名(1,2,3) Dom 1、找到标签 获取单个元素 document.getElementById('i1') 获取多个元素（列表）document.getElementsByTagName('div') 获取多个元素（列表）document.getElementsByClassName('c1') a. 直接找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 b. 间接 tag = document.getElementById('i1') parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素 2、操作标签 a. innerText 获取标签中的文本内容 标签.innerText 对标签内部文本进行重新复制 标签.innerText = "" b. className tag.className =》 直接整体做操作 tag.classList.add('样式名') 添加指定样式 tag.classList.remove('样式名') 删除指定样式 PS： <div οnclick='func();'>点我</div> <script> function func(){ } </script> c. checkbox 获取值 checkbox对象.checked 设置值 checkbox对象.checked = true
CSS补充： - position - background - hover - overflow - z-index - opacity 示例：输入框右边放置图标 JavaScript： 局部变量 var 基本数据类型： 数字 字符串 数组 字典 布尔值 For循环 条件语句 == != === !== || && 函数的定义： function func(){ ... }Dom 找标签 - 直接找 $('#id') $('.c1').siblings() - 简介找 操作： innerText checkbox: checked className classList 事件： <div οnclick='函数(123)'></div> <script> 。。。。 </script> 定时器 setInterval('函数()', 4000) 其他： alert() console.log() 实例： 莅临指导 多选 模态对话框 左侧菜单 返回顶部
转载于:https://www.cnblogs.com/Dev0ps/p/9886444.html
