标签：elf 用户名 mit 面向对象 md5加密 strong 选中 new rem
JS java c# ....面向对象:JS有些区别
在JS这个需要大家换一下思维的方式!
原型:
var Student = {
name:‘zhansan‘,
age:3,
run:function(){
console.log(this.name+"run...");
}
};
var xiaoming = {
name:"xiaoming"
};
//原型对象
xiaoming._proto_ = student;
var Bird = {
fly:function(){
console.log(this.name+"fly...");
}
};
//小明的原型是student
xiaoming._proto_ = bird;
class继承
class关键字是ES6引入的
1.定义一个类，属性，方法
//定义一个学生的类
class Student{
constructor（name）{
this.name= name；
}
hello(){
alert(‘hello‘)
}
}
var xiaoming = new Student(‘xiaoming’);
var xiaohong = new student(‘xiaohong‘);
xiaoming.hello()
操作BOM对象(重点)
浏览器介绍
JS 和浏览器的关系?
JS诞生是为了能够让他在浏览器中运行~
BOM:浏览器对象模型
window (重要)
window 代表浏览器窗口
window.alert(1)
window.innerHeight
window.outHeight
Navigator(不建议使用)
Navigator，封装了浏览器的信息
大多数时候，我们不会使用Navigator对象，因为会被人修改~
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
screen.height
location(重要)
location 代表当前页面的URL信息
host:"www.baidu.com"
href:"http://www.baidu.com/"
protocol:"https:"
reload f reload()//刷新网页
//设置新的网址
location.assign(‘https：//.bing.com/’)
document(内容：DOM)
document 代表当前的页面，HTML DOM 文档树
doucument.title
"百度一下，你就知道"
doucument.title="张三"
”张三“
获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaEE</dd>
<dd>JavaSE</dd>
</dl>
<script>
var dl = document.getElementById(‘app‘)
</script>
获取cookie
document.cookie
劫持cookie 原理
<script src=”aa.js“></script>
<!--恶意人员，获取你的cookie 上传到他的服务器-->
服务器端可以设置cookie：httpOnly
history(不建议使用)
history代表浏览器的历史记录
history.back()//后退
history.forward（）//前进
操作DOM对象（重点）
核心
浏览器网页就是一个Dom树形结构！
要操作一个Dom节点，就必须先要使用这个Dom节点
获取dom节点
//对应css选择器
var h1 = document.getElementsByTagName(‘h1‘);
var p1 = document.getElementsById(‘p1‘);
var p2 = document.getElementsByClassName(‘p2‘);
var father = document.getElementsById(‘father‘);
var childrens = father.children[index];//获取父节点下的所有的子节点
//father.firstChild
//father.lastChild
这是原生代码，之后我们尽量使用都是JQery();
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById("id1");
</script>
操作文本
id1.innerText = ‘456’ 修改文本的值id1.innerHTML = ‘< strong >123< /strong > 可以解析HTML文本标签操作css
id1.style.color = ‘yellow’;//属性使用 字符串 包裹
id1.style.fontSize = ‘20px’;// - 转 驼峰命名问题
id1.style.padding = ‘’2em
删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
<div id = "father">
<h1>标签一</h1>
<p id = "p1">p1</p>
<p class = "p2">p2</P>
</div>
<script>
var self = document.getElementById(‘p1‘);
var father = p1.parntElement;
father.removeChild(self)
// 删除是一个动态的过程；
father.removeChild（father.children[0])
father.removeChild（father.children[1])
father.removeChild（father.children[2])
</script>
注意：删除多个节点的时候，children是时刻变化的，删除节点的时候一定要注意！
插入节点
我们获取了某个Dom节点，假设这个dom节点是空的，我们通过inner HTML 就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！，会产生覆盖
追加
<p id="js">JavaScript<p>
<div id="list">
<p id=‘se‘> JaveSE</p>
<p id=‘ee‘> JaveeE</p>
<p id=‘me‘> Javese</p>
</div>
<script>
var js = document.getElementById(‘js‘);
var list = document.getElementById(‘list‘);
list.appendChild(js);//追加到后面
</script>
创建一个新的标签，实现插入
var js = document.getElementById(‘js‘);//已经存在的节点
var list = document.getElementById(‘list‘);
//通过JS创建一个新的节点
var newp = document.createElement(‘p‘);//创建一个p标签
newp.id = ‘newP‘;
newP.innerText =‘Hello,zhangsan‘;
// 创建一个标签节点
var myScript = document.createElement(‘script‘);
myScript.setArrtribute(‘type‘,‘text/javascript‘);
//可以建立一个style标签
var myStyle = document.createElement(‘style‘);//创建一个空style标签
myStyle.setArrtribute(‘type‘,‘text/css‘);
myStyle.innerHTML = ‘body{backgrountd-color：chartreuse;}‘;//设置标签内容
document.getElementsByTagName(‘head‘)[0].appendChild(myStyle)
</script>
insertBefore
var ee = document.getElementById(‘ee‘);
var js = document.getElementById(‘js‘);
var list = document,getElementById(‘list‘);
//要包含的节点，insertBefore(newNode,targetNode)
list.inserBefore(js.ee);
操作表单（验证）
表单是什么 form DOM 树
表单的目的:提交信息
获取要提交的信息
<form action="post">
<p>
<span>
用户名:
</span>
<input type="text" id = "username">
</p>
<!-- 多选框的值,就是定义好的value -->
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="boy">女
</p>
</form>
<script>
var input_text = document.getElementById(‘username‘);
var boy_radio = document.getElementById(‘boy‘);
var girl_radio = document.getElementById(‘girl‘);
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value = ‘123‘
//对于单选框,多选框等固定的值,boy_radio.value 只能取到当前的值
boy_radio.checked;//查看返回的结果,是否为true,如果为true,则被选中
girl_radio.checked = true;//赋值
</script>
提交表单 . md5加密密码,表单美化
<!--
表单绑定提交事件
onsubmit = 绑定一个提交检测的函数,true false
将这个结果返回给表单,使用 onsubmit 接受;
onsubmit = "return aaa()"
-->
<form action="http://www.baidu,com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span><input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!-- 绑定事件 onclick 被点击 -->
<button type="submit">提交</button>
<script>
function aaa(){
alert(1);
var uname = document.getElementById(‘username‘);
var pwd = document.getElementById(‘input-password‘);
var md5pwd = document.getElementById(‘md5-password‘);
md5pwd.value = md5(pwd.value);
//可以检验判断表单内存,true就是通过提交,false ,阻止并发
return true;
}
</script>
标签：elf 用户名 mit 面向对象 md5加密 strong 选中 new rem
原文地址：https://www.cnblogs.com/wn-888/p/13055602.html
