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()
实例：
莅临指导
多选
模态对话框
左侧菜单
返回顶部
CSS,JavaScript知识点的更多相关文章
- html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- HTML+Css+JavaScript知识点汇总
HTML 部分 HTML基础知识 1. HTML简介 HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息.它是从S ...
- html/css/javascript知识点集锦；完全小白开搞web编程
知识点集锦 1.在html模板的代码中会有下面一类: {% block title %} Blog entries {% endblock %}这里的 block 和 endblock 是神马? {% ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- HTML&&CSS基础知识点整理
HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]
今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
随机推荐
- 并发编程futuretask
package com.mrbird.api.demoThread.thread1; /** * @Description * @Date: 2019/3/29 */ import java.util ...
- JS的变量的值怎么传递给PHP的变量？
get: <script> name="xxx"; window.location='xxx.php? name='+name; post: <script> ...
- Python学习（四十二）—— Djago-model进阶
一.QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. Entry.objects.all()[:5] # (LIMI ...
- bower 基础认识
bower 跟 npm 很像 都是管理包的工具 只是 bower 偏向前端 npm 前后都能管理 npm init 后是 生产 package.json 下载的包在node_modules文件下 ...
- UOJ#440. 【NOIP2018】填数游戏 动态规划
原文链接www.cnblogs.com/zhouzhendong/p/UOJ440.html 前言 菜鸡选手到省选了才做联赛题. 题解 首先我们分析一下性质: 1. 假如一个格子是 0,那么它的右上角 ...
- 关于二进制枚举-计蒜客-得到整数X
某君有 n个互不相同的正整数,现在他要从这 n 个正整数之中无重复地选取任意个数,并仅通过加法凑出整数 X.求某君有多少种不同的方案来凑出整数 X. 输入格式 第一行,输入两个整数 n,X(1≤n≤2 ...
- [转]PHP实现页面静态化的超简单方法
为什么要页面静态化? 1.动态文件执行过程:语法分析-编译-运行 2.静态文件,不需要编译,减少了服务器脚本运行的时间,降低了服务器的响应时间,直接运行,响应速度快:如果页面中一些内容不经常改动,动态 ...
- ARTS Challenge- Week 1 (2019.03.25~2019.03.31)
1.Algorithm - at least one leetcode problem per week(Medium+) 986. Interval List Intersections https ...
- C++ 三大特性：封装、继承、多态性
要讲 封装.继承.多态就必须从面向对象说起 开发一个软件是为了解决某些问题,这些问题所涉及的业务范围称为该软件的问题域.面向对象的编程语言将客观事物看作具有属性和行为(或服务)的对象,通过抽象找出同 ...
- tmux使用中出现的问题和解决方式
常用操作: tmux ls 看当前都有哪些sessiontmux new -s my1 创建窗口,名为my1ctrl+B,D 退出窗口 (这个就是同时按ctrl和B,然后松开后再按D键)tmux at ...