Python之路day13 web 前端（JavaScript，DOM操作）
参考链接：http://www.cnblogs.com/wupeiqi/articles/5433893.html
day13
1. CSS示例
2. JavaScript
3. DOM操作
上节内容回顾：
1. HTML标签
html/head/body/
input
div,span
a
p
br
span
table > tr行 th表头列 td表头列
h
form> action method enctype=;;;
select option
input系列：
text
password
email
button
submit
radio name属性相同
checkbox
reset
textarea
2.CSS
a. 存在形式
- <div style='k1=v1;k2=v2;'>
- <style></style>
- <link ...>
b. 选择器
<style>
.c1{
}
#i1{
}
div{
}
.c1,#i2{
}
.c1 .c2{
}
.c1 > .c2{
}
.c1:hover{
}
input[type='text']{
}
</style>
c. 样式
**** 田海龙 ****
color:
background-color:
font-size:
background-img:
background-position:
position:
fixed - 永远固定在浏览器窗口的某个位置
absolute - 固定在浏览器窗口的某个位置
relative - 单独无用
relative
absolute
padding: 内边距
margin: 外边距
top ...:
border: 1px shixu yanse
height: 100%
width:
display:
none 隐藏
block 块
inline 内联
inlie-block 内联+块级
float:
left
right
<div style='background-color:red;'>
<div style='float:left;'>adf</div>
<div style='float:right;'>adf</div>
<div style='clear:both'></div>
</div>
text-align:
line-height:
cursor
z-index:
opacity:
今日内容
一、后台管理示例
二、JavaScript
1. 存在形式
2. 位置
<body>
...;.
</body>
3.
a = 123;
var a = 123;
4. // /* */
5. 声明函数
// 普通函数
function func(arg){
alert(123);
}
func("alex")
// 普通函数，自执行函数
(function(arg){
alert(123);
})("alex")
(function(arg){})("alex")
// 匿名函数,当做参数传递
function(){
alert(123);
}
// 匿名函数的应用
function func(arg){
arg()
}
func(function(){alert(123)})
6. 基本数据类型
undefined // 为定义 var age;
function func(a1,a2){
alert(a1);
alert(a2);
}
func(1)
null // 空值
数字
var age = 123.123;
var v = typeof age; # number
alert(v);
isNaN
parseInt()
parseFloat(num)
字符串
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
数组
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
字典
info = {name: 'alex',age: 18};
7. 序列化
JSON.stringify
JSON.parse
8. 转义
9. eval
10. 时间
var da = new Date();
11. 条件&循环&异常处理
12. 面向对象
// 面向对象
function Foo(name,age){
this.Name = name;
this.Age = age;
}
obj = new Foo('alex',18);
obj.Name
function Foo(name,age){
this.Name = name;
this.Age = age;
}
// 利用原型实现方法重用
Foo.prototype.show = function(){
alert(this.Name);
}
obj1 = new Foo('alex',18);
obj1.show()
obj2 = new Foo('alex',18);
obj2.show()
三、利用HTML文档+JavaScript+DOM实现操作HTML数据
1. 查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
2. 间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
3. HTML标签样式操作
var tag = document.getElementById('i1');
tag.classList.add('c1') //给标签添加样式
tag.classList.remove('c1') //给标签移除样式
<div class='c1 c2'></div>
tag.className "c1 c2"
tag.classList ['c1','c2']
4. 文本操作
innerText 只获取文本
innerHTML 获取文本以及标签
innerText = "文本"
innerHTML = "HTML格式解析"
input:
document.getElementById('username').value
document.getElementById('username').value = "asdf"
PS:
<input type="text" id="key" value="请输入关键字" onfocus="keyFocus();" onblur="keyBlur();" />
onfocus: 获取焦点
onblur： 失去焦点
5. 属性操作
<div id='i1'></div>
<input id='ck' type="checkbox" />
自定义属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
内置属性：
obj.id
checkbox
- obj.checked true或false
6. 创建标签
对象方式 ***
7. js提交表单
document.getElementById('f1').submit();
8. 常用操作
console.log(..)
alert(..)
confirm(...)
var v = confirm('是否要删除？');
console.log(v);
location.href 获取当前URL
location.href = "http://www.oldboyedu.com" 重定向
location.reload() 刷新
setInterval
clearInterval
setTimeout
clearTimeout
var obj1= setInterval(function () {
console.log('1');
clearInterval(obj1);
},1000);
var obj2= setInterval(function () {
console.log('2');
clearInterval(obj2);
},1000)
9. 事件
1. 绑定事件
<div id='i1' onkeydown='func(this,event,123);'> 点我 </div>
function func(a,b,c){
// a -> 当前被点击的标签对象 document.getElementById('i1')
// b -> 当前事件相关的信息
// c = 123
}
2. 绑定事件 ***************
<div id='i1'> 点我 </div>
<script>
document.getElementById('i1).onclick = function(event){
// event -> 当前事件相关的信息
// this -> 当前被点击的标签对象
}
document.getElementById('i1).onclick = function(event){
// event -> 当前事件相关的信息
// this -> 当前被点击的标签对象
}
</script>
一个事件只能被绑定一次
3. 绑定事件
document.getElementById('i1').addEventListener('click',function(){
console.log(111);
},true)
document.getElementById('i1').addEventListener('click',function(){
console.log(222);
},true)
PS: addEventListener第三个参数
默认：
事件冒泡
捕获式
欠：
1. 点赞 +1 动画
2. JavaScript高级知识 - 词法分析
作业：
后台管理+所有示例
1. 后台管理布局
2. 左侧菜单
3. 莫泰对话框
4. 表格全选反选取消
5. 添加标签
6. 欢迎今天李磊上课
7. 5s之后 删除内容 移除
8. 时间流逝
9. 搜索框
<form action='https://www.sogou.com/web'>
<input type='text' name='query' />
<div>提交</div>
</form>
参考博客：
http://www.cnblogs.com/wupeiqi/articles/5643298.html
http://www.cnblogs.com/wupeiqi/articles/5602773.html
Python之路day13 web 前端（JavaScript，DOM操作）的更多相关文章
- Python之路day12 web 前端（HTML+ css）
HTML文档 文档树: Doctype Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 有和无的区别 BackCompat:标准兼容模式未开启(或叫怪异模式[Quirk ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- web前端+javascript+h5电子书籍和实战分享
有很多前端伙伴们学习前端很多了,但是如何能成为优秀的程序员呢,前端必学的知识点相信学习前端的伙伴们心里都非常清楚.主要的三要素包括HTML.CSS和JavaScript.那么学好JavaScript是 ...
- python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
随机推荐
- windows计划任务定时运行synctoy的坑
每次设置好synctoy之后,需要让synctoy运行一次,windows的计划任务才能成功执行,如果变更了synctoy的设置,而没有让synctoy成功执行过,windows计划任务将执行失败,坑 ...
- JAVA中的反射机制 （转）
反射,当时经常听他们说,自己也看过一些资料,也可能在设计模式中使用过,但是感觉对它没有一个较深入的了解,这次重新学习了一下,感觉还行吧! 一,先看一下反射的概念: 主要是指程序可以访问,检测和修改它本 ...
- 2-AMD
诞生背景1.随着前端逻辑越来越多,项目越来越大,开发大型项目就必须分模块开发2.一切都那么完美,在NodeJs实现后,当人们开始热情的打算把这种实现也用于浏览器时,却发现并不适合.NodeJS应用加载 ...
- 46. Permutations (全排列)
Given a collection of distinct numbers, return all possible permutations. For example,[1,2,3] have t ...
- deeplenrnig学习笔记——什么是特征
特征是机器学习系统的原材料,对最终模型的影响是毋庸置疑的.如果数据被很好的表达成了特征,通常线性模型就能达到满意的精度. 一.特征的表示粒度: 学习算法在一个什么粒度上的特征表示,才有能发挥作用 ...
- 【Python】__slots__ 、@property、多重继承、定制类、枚举类、元类
__slots__ @property 多重继承 定制类 枚举类 元类 [使用__slots__] 1.动态语言的一个特点就是允许给实例绑定任意的方法和变量,而静态语言(例如Java)必须事先将属性方 ...
- Web安全学习笔记之Nmap命令参考指南
最近研究Nmap,命令太多,详细还是需要参考官方文档(可选中文) 本文转载 在网络技术中,端口(Port)包括逻辑端口和物理端口两种类型.物理端口指的是物理存在的端口,如ADSL Modem.集线器. ...
- 20145329吉东云 《Java程序设计》 第一周学习总结
一.JAVA平台概述 1.Java诞生于1995年5月23日,java体系架构分为JavaSE.JavaME.JavaEE三大平台,本章重点介绍了JavaSE.JavaSE分为四个主要部分:JVM.J ...
- 20144303 《Java程序设计》第二次实验实验报告
20144303 <Java程序设计>第二次实验实验报告 北京电子科技学院(besti)实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握U ...
- java并发容器之 SynchronousQueue [转]
SynchronousQueue 这个队列实现了 BlockingQueue接口 该队列的特点 1.容量为0,无论何时 size方法总是返回0 2. put操作阻塞,jquery插件库 直到另外一个 ...