PYTHON第五十六天笔记11.13

自记录笔记：

js-DOM：导航查找无法通过某一标签一次全部找出它所有的兄弟标签。

innerText 和 innerHtml赋值操作都相同，先把标签都清掉，再赋值，而取值则不相同。innerText取纯文本，innerHtml取带该文本的标签。

在三个标签中有value属性：　　即(input、textarea、select)文本框。

DHTML的简化方式对有些属性不适应，如class，单独操作。

　　element.setattribute('class','gaga')

　　element.class='gaga'

节点操作5：

标签.cloneNode(true)　　//true参数，即将标签下面的所有子标签复制下来，不然只对本标签进行复制操作。

button放在form表单里的效果相当于input中的type="submit"，有绑定事件(提交事件)的效果。

<form>

</form>

如果用纯按钮功能，可以使用<input name="" type="button"...>。

课堂笔记：

一、知识概览：

python:

1 变量 i=10
2 数据类型
3 运算符
4 流程控制
顺序
分支
循环
5 函数
6 面向对象

JS ：

ECMA
Bom
Dom

浏览器能够解释的：html css js

JS:

变量： var 关键字声明 var i=0;
var i;
i=10;
;作为分隔符，不加分号，默认以换行符作为分割语句

JS的数据类型：
number 整型浮点型 NAN
string
boolen true false
undefined : 1、变量只声明(var i;) 未赋值(i=12) 2函数没有return 默认返回undefined
object：arr [111,22,333] {"name":"yuan"}

运算符：

计算运算符： ++i --i
比较运算符： ===
逻辑运算符： && || ！

流程控制语句：
分支：

1、if

if(表达式){
pass
}
2、if else：

if(表达式){
pass
}
else{
pass
}

3、
if(表达式){
pass
}
else if (表达式){
pass
}
else{
pass
}

4、switch(值)｛

case 1:执行代码;break;
case 2:执行代码;break;
case 3:执行代码;break;
case 4:执行代码;break;
default:执行代码;

｝

循环语句：

条件循环 for

// 方式1：

for(初始表达式;条件表达式;自增或自减)
{
执行语句
……
}

for (var i=100;i>0;i--){

pass
}

// 形式2（遍历循环）：

for( 变量 in 数组或对象)
{
执行语句
……
}

条件循环 while

while (条件){
语句1；
...
}

函数：
python:

def 函数名(参数):
函数体
函数体

js：
// 调用：函数名(实参，..)
function 函数名(形参){
arguments对象：一个存放所有实参的数组
函数体
return ....
}

函数名(实参，..)

// 匿名函数
(function (形参){
arguments对象：一个存放所有实参的数组
函数体
return ....
})(实参)

JS对象：
字符串对象

数组对象
日期对象
Math
==========================================BOM======================

BOM：browser object model

1 window对象

2 定时器

==========================================DOM========================

DOM: 文档对象模型

DOM:对象

节点： document element

节点就是标签对象

JS的DOM:

1、查找标签：

（1）直接查找

1 document.getElementById("id值"); // 返回值一定是标签对象

2 document.getElementsByClass("c1"); // [标签对象,标签对象,...]

3 document.getElementsByTagName("标签名")

（2）导航查找（依据某个标签定位其它标签）

element.parentElement // 父节点标签元素

element.children // 所有子标签

element.firstElementChild // 第一个子标签元素

element.lastElementChild // 最后一个子标签元素

element.nextElementtSibling // 下一个兄弟标签元素

element.previousElementSibling // 上一个兄弟标签元素

2 标签操作

文本操作：
// 取值操作
// console.log(ele_p.innerText); // hello
// console.log(ele_p.innerHTML); // <a href="">hello</a>

// 赋值操作
// ele_p.innerText="google";

// ele_p.innerText="<a>google</a>"
ele_p.innerHTML="<a href=''>google</a>"

<div class="c1"></div>
属性操作：

原生JS方式：
element.setAttribute(name,value)
element.getAttribute(属性名)

DHTML的简化方式(有些属性不适应)：
element.属性名
element.属性名="值"

class操作：
<p class="c1 c2">yuan</p>

className
element.classList.add()
element.classList.remove()

css样式操作：
element.style.css属性=值

value值：
element.value
input textarea select

节点操作:

1、创建节点： document.createElement(标签名称)

2、添加节点：父节点.appendChild(子节点);

3、删除节点：父节点.removeChild(子节点);

4、替换节点：父节点.replaceChild(新节点，替换节点)

5、拷贝节点： element.cloneNode(true)

3 事件绑定;

1 标签对象.on事件=function(){}

for (var i=0;i<eles.length;i++){
eles[i].onclick=function(){}
}
二、查找标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

var ele_c1=document.getElementsByClassName("c1")[0];
ele_c1.getElementsByClassName("item")

// var eles=document.getElementsByClassName("item")
</script>

</body>
</html>

三、节点操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>

.outer{
width: 400px;
height: 300px;
background-color: lightgray;
/*overflow: scroll;*/

}
</style>
</head>
<body>

</div>

<button>add_img</button>
<button class="deleter">delete</button>
<button class="replace">replace</button>

// 添加节点：父节点.appendChild(子节点);
ele_outer.appendChild(ele_img)

};

// 删除节点事件
var ele_del=document.getElementsByClassName("deleter")[0];

ele_del.onclick=function () {

// 父节点.removeChild(子节点);

ele_outer.removeChild(ele_h3)

};

var ele_replace=document.getElementsByClassName("replace")[0];

// 替换节点父节点.replaceChild(新节点，替换节点)
ele_replace.onclick=function () {
// 创建节点
var ele_img=document.createElement("img"); // <img>
ele_img.src="egon2.jpg";

// 替换节点：
ele_outer.replaceChild(ele_img,ele_h3);
var ele_copy=ele_outer .cloneNode(true);
console.log(ele_copy)
};

</script>
</body>
</html>

四、魔态框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

.shade{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
opacity: 0.5;
}
.model{
position: fixed;
top: 100px;
left: 300px;
width: 500px;
height: 300px;
background-color: white;
/*margin-top: -150px;*/
/*margin-left: -250px;*/
}

.hide{
display: none;
}
</style>
</head>
<body>

</p>
</form>
</div>

// 显示遮罩层
ele_show.onclick=function () {

// ele_shade.classList.remove("hide");
// ele_model.classList.remove("hide");

var eles=document.getElementsByClassName("item");
for(var i=0;i<eles.length;i++){
eles[i].classList.remove("hide")
}

};

// 隐藏遮罩层
ele_cancel.onclick=function () {
ele_shade.classList.add("hide");
ele_model.classList.add("hide");
}

</script>
</body>
</html>

五、demo(引入bootstrap，jquery[找个jquery cdn链接即可]；bootstrap源码下载解压后取其中dist)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="dist/js/bootstrap.js"></script>
</head>
<body>