CSS,JavaScript知识点
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 onclick='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 onclick='函数(123)'></div>
<script>
。。。。
</script>
定时器
setInterval('函数()', 4000)
其他:
alert()
console.log()
实例:
莅临指导
多选
模态对话框
左侧菜单
返回顶部
相关文章
- JavaScript code modules
- 第七节:语法总结(1)(自动属性、out参数、对象初始化器、var和dynamic等) 图片放大镜 JavaScript-基础 用javascript写原生ajax(笔记) 初遇 Asp.net MVC 数据库依赖缓存那些事儿 前端JS 与 后台C# 之间JSON序列化与反序列化(笔记)
- [ Javascript ] JavaScript中的定时器(Timer) 是怎样工作的!
- JavaScript - PC 端通过纯 js 播放音频文件(播放提示音)
- JavaScript:
- 【JavaScript】重温Javascript继承机制
- 【JavaScript】Javascript中的函数声明和函数表达式
- 16期-熬夜7天,我总结了JavaScript与ES的25个重要知识点!
- Javascript 笔记与总结(2-4)Javascript 内置对象
- javascript中的Base64.UTF8编码与解码详解
- JavaScript基础知识点串联——对象
- [js高手之路]javascript腾讯面试题学习封装一个简易的异步队列
- [记录] javascript 对象中使用setTimeout
- 简短Javascript代码实现滑动菜单效果
- JavaScript之面向对象学习八(继承)
- 总结20个面试常见的JavaScript知识点
- JavaScript 自制可以替换属性的模板引擎(Template)