上节作业问题：
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 透明度(0~1)
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不加分号也可以被解释，
但是因为JavaScript代码要把空白压缩，这时候分号就相当于断句的功能，不压缩掉空白就比较耗费资源
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 = "zijian"
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{
}
switch (name){
case '1':
age=123;
break;
case '2':
age=1
break
default:
age=777;
}
== 值相等
=== 值和类型都相等
&& and
|| or
函数：
普通函数
function 函数名(a,b,c){
}
函数名(1,2,3)
匿名函数 # 匿名函数通常用于作为定时器的参数
function (arg){
args=1;
}
自执行函数
(function (arg){
console.log(arg);
})(1)
JavaScript序列化
JSON.stringify([1,2,3]) 将对象转成字符串
JSON.parse('[1,2,3]') 将字符串转成数组等其他对象
转义：
/*
引子：当我们登陆过淘宝，第二天在打开还是登陆状态，
因为HTTP是短连接，他是通过cookie的机制实现的，
当我们登录时服务端生成一串随机的字符串，
将这些数据转义后保存在cookie中，我们的cookie如果被别人拿了，
别人的电脑上也可以登录我们的账号*/
JavaScript的eval
在Python里边eval用来计算字符串表达式的值，
exex用来执行for循环等等代码块
比如a=eval('3*3')
在JavaScript里边的eval有Python的exec以及eval方法两者的功能
JavaScript的作用域（极重要）
Java等其他语言，
作用域是用{}来区分的，以代码块作为作用域
Python
作用域是用函数来区分的
JavaScript
1.以函数作为作用域
2.函数的作用域存在于作用域链，
并且作用域是在被调用之前创建的，所以下面代码输出子健
<script>
s = "tony";
function f() {
function f2() {
var s = 'zijian';
console.log(s);
}
return f2;
}
result = f();
result();
</script>
JavaScript里边函数内的局部变量提前声明
这个特点是JavaScript特有的
function f(){
console.log(x)
}
程序直接报错
function f(){
console.log(x);
var x='zijian'
}
//undefined
原因是：解释器在解释的时候，生成作用链的同时会先把
函数里面的局部变量找到先声明一下，但是不会自动赋值
JavaScript面向对象
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
作业：
1、登录、注册，练习：position
2、后台管理页面
- 左侧菜单
- 右边表格，全选反向，模态框，返回顶部
3、商城页面
进行DOM操作找元素时注意的事：
要注意尽量使用id或者class去找元素，
直接去找<tbody>的时候不知道为啥不行，改成找id又可以了
注意length使用时的条件
JavaScript正则表达式
test - 判断字符串是否符合规定的正则，返回true或者false
rep = /\d+/; 匹配整数，包含匹配
rep.test("asdfoiklfasdf89asdfasdf")
# true
rep = /^\d+$/;
rep.test("asdfoiklfasdf89asdfasdf")
# false
exec - 获取匹配的数据,默认只能获取到第一个
rep = /\d+/;
str = "wangshen_67_houyafa_20"
rep.exec(str)
# ["67"]
分组匹配:相当于一级匹配和二级匹配，先进行一次匹配然后把结果再进行一次匹配
JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava(\w*)\b/;（加上括号是分组匹配）
# ["JavaScript", "Script"]
JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava\w*\b/g;
# ["JavaScript"]
# ["Java"]
# ["JavaBeans"]
# null
JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava(\w*)\b/g;
# ["JavaScript",'Script']
# ["Java", ""]
# ["JavaBeans", "Beans"]
# null
多行匹配：
默认就是多行匹配
^$
- 登录注册验证
默认事件先执行：
checkbox
自定义先执行
a
submit
...
<form>
<input type='type' />
<input type='password' />
<input type='submit' />
</form>
$(':submit').click(function(){
$(':text,:password').each(function(){
...
return false;
})
return false;
})
input,checbox
================================== 验证 ================================
JS： 验证
各种验证
$(':submit').click(function(){
$(':text,:password').each(function(){
...
return false;
})
return false;
})
后端：python实现
业务处理
...
JavaScript知识点概要
最新推荐文章于 2024-02-04 19:47:57 发布
906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
