Day15 Javascipt内容补充
JavaScript函数：
函数：
function 函数名(a,b,c){
执行代码
}
1，如何去找到标签
Dom直接选择器：
1，找到标签
#获取单个元素
document.getElementById('id')
整个html的id不可重复
#获取多个元素
document.getElementByTagName("div")
或者
document.getElementByClassName('class')
Dom间接选择器：
也就是说先找到一个标签，然后去找他的上级，下级，父级等标签
tag = document.getElementById('id')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
可以利用tag.方法来使用
2，操作标签
标签.innerText="" #对标签内的元素重新赋值
标签.className="" #改掉class的值
标签.classList.add="" #添加指定样式
标签.classList.remove="" #删除指定样式
实现菜单切换的小例子模型：
<div onclick='func()'>点我</div>
<script>
function func(){
}
</script>
函数分为了三种：
普通函数：
function func(arg){
}
匿名函数：
function(){
console.log(123);
}
自执行函数：
function func(){
}
func()
如果一个项目里边需要用到多个网站的js,可以针对不同的网站的js定义函数
function 张洋(){
function f1(){
}
}
function egon(){
function f1(){
}
}
JavaScript序列化以及转义： 序列化： JSON.stringify(li)：将一个列表转化成字符串 JSON.parse(s):将字符串转换成列表 转义：将URL的中文转移成字符串 客户端(cookie) ==> 服务器端（一般都是将cookie等信息转义后存到电脑上） decodeURI()：URI未转义的字符 encodeURIComponent():转义uri组件中的字符 escape()：对字符串进行转义 unescape():给转义字符串串解码 eval: python:val = eval(表达式) exec(执行代码) JavaScript： eval 时间操作： Date类 var d = new Date()
<input type='text' id='inp' value='123' class='c1'>
var ele_inp=document.getElementById('inp');
ele_inp.onclick=function(){
console.log(this.getAttribute('value')) ;
this.setAttribute("value",'666');
this.style.color='red'; //点击文字变红
this.style.border='red 1px solid' // 点击边框变红，有宽度
}
onchange事件：
当点击了以后发生了改变只执行的操作。
<body> <select name="pro" id="s1">
<option>请选择省份</option> <option value="111">河南省</option> <option value="222">河北省</option> <option value="333">东北省</option> </select> <script> var ele_select=document.getElementById("s1"); ele_select.onchange=function () { alert(1234)
console.log(ele_select.value) } </script>
节点操作：
<body>
<style>
.outer{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
<div class="outer">
<h1>hello</h1>
<a href="http://www.baidu.com">click</a>
</div>
<!--<hr>-->
<button class="add">ADD</button>
<script>
var ele_addBtn=document.getElementsByClassName("add")[0];
var ele_outer=document.getElementsByClassName("outer")[0];
ele_addBtn.onclick=function () {
//创建节点对象
//document.createElement("a") 创建一个空的a标签
var ele_a= document.createElement("a");
ele_a.innerHTML='click'; //文本赋值
ele_a.href="http://www.baidu.com";
//添加节点对象 父节点.appendChild(添加节点)
ele_outer.appendChild(ele_a);
}
</script>
</body>
