JavaScript基础学习目录
DOM操作学习目录
网站布局的一些的补充：
1、学习前端之后，自己能够修改的后端的页面即可
2、专业的前端配置
上节课复习：
CSS部分：
定位属性：
position 配合top left right bottom来进行定位
取值：
fixed：固定定位
例子：返回顶部按钮
releative：单独使用毫无意义
必须配合absolute来使用
案例：特价热卖
背景属性：
background-image ：背景属性 平铺整个屏幕
background-position-x ：只铺x轴背景
background-position-y ：只铺y轴背景
案例：抽屉点赞效果，节省流量 https://dig.chouti.com/
js的初级：
a. java和js没有任何关系
b. 基本的变量声明
python :a='hello'
js: var b='hello'
基本的数据类型：
数字、字符串、数组、对象、布尔
数组：
数组型：
javascript中的数组类似于我们Python中的列表
var arr=['frank','sunny','franksunny']
console.log(arr) //显示["frank", "sunny", "franksunny"]
console.log(arr[0]) //显示 frank
js的独有：
null和undefined
1.undefined 表示的是当声明的变量未初始化时，该变量的默认值是 undefined
2.null 表示的是值不存在
两者的区别在于：
undefined 是声明了变量但未对其赋予值
null 则用于表示尚未存在的空值
运算符：
== 和===
三大控制结构：
1.顺序执行
2.分支结构
if(条件){
console.log('aaa')
}else if{
}
3.循环
var info={'name':'frank','age':18}
for (var i in info){
console.log(info[i]);
} //显示: frank 18
上述循环，用于：数组、字典（json格式）的循环
for (var i=0;i<arr.length;i++){
console.log(i,arr[i])
}
上述循环，用于：数组循环
函数：
function test(){
console.log('aaa')
}
在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键，例如：
JSON字符串：
var s = '{"name":"frank","age":18}';
JSON字符串转换成JSON对象：
f=JSON.parse(s) //打印显示:Object {name: "frank", age: 18}
f['name'] //打印显示:"frank"
s1={name: "frank", age: 18} //打印显示：Object {name: "frank", age: 18}
JSON对象转换成JSON字符串：
JSON.stringify(s1) //打印显示："{"name":"frank","age":18}"
this的指向问题
javascript中的this有点类似于Python中的self
即哪个对象调用当前的方法或属性，那此时this就是哪个对象
1.this指向window
console.log(this);
var a = 10;
var b = 20;
function f1(){
var a = 100;
var b = 200;
console.log(this);
console.log(this.a);
console.log(this.b);
}
f1()
//打印显示：Window {external: Object, chrome: Object, document: document, a: 10, arr: Array[3]…} 10 20
DOM:
本质：就是对网页上的元素进行的一个操作
DOM对象–查找元素
1.直接查找
获取元素对象：
document.getElementByID('id') //根据ID获取一个标签
document.getElementByTagName('tag') //根据标签名获取标签集合
document.getElementByClassName('class') //根据class属性获取标签集合
2.间接查找
children 所有子标签
nextElementtSibling 下一个兄弟标签元素
DOM对象–属性操作
操作文本内容：
innerText:操作文本内容
innerHtml:操作网页内容
value:使用于input系列标签
操作类属性：
1.attributes: 获取标签的所有的属性
2.setAttribute('key','value')：设置属性
3.getAttribute('key')：回去属性值
4.removeAttribute('key') :删除属性
操作类：
操作整块类：颗粒度
1.classList():获取所有类
2.classList.add('one'):添加类
3.classList.remove('one'):删除指定类
操作单个css属性
obj.style.backgroundColor='red'
举例：左侧菜单显示
<head> <meta charset="UTF-8"> <title>Title</title> <style > .header{ width: 50px; height: 38px; line-height: 38px; background-color: blue; color: white; border: 1px solid red; } .hide{ display: none; } </style> </head> <body> <div class="header" onclick="changeMenu('i1')" id="i1">标签一</div> <div class="info "> <div class="content">内容一</div> <div class="content">内容一</div> <div class="content">内容一</div> </div> <div class="header" onclick="changeMenu('i2')" id="i2">标签二</div> <div class="info hide"> <div class="content">内容二</div> <div class="content">内容二</div> <div class="content">内容二</div> </div> <div class="header" onclick="changeMenu('i3')" id="i3">标签三</div> <div class="info hide"> <div class="content">内容三</div> <div class="content">内容三</div> <div class="content">内容三</div> </div> <script> function changeMenu(nid){ //1.点击header的时候。触发一个click时间，获取元素 var i1 = document.getElementById(nid); // console.log(i1) var info=document.getElementsByClassName('info'); for (var i=0;i<info.length;i++){ info[i].classList.add('hide'); } var hideinfo = i1.nextElementSibling; // console.log(hideinfo) hideinfo.classList.remove('hide'); } </script> </body>
今日内容：
1.js的高级部分
函数：
普通写法：
function test(a,b){
console.log(a+b)
}
test(3,5)
匿名写法：
var sum=function(a,b){
console.log(a,b)
}
sum(a,b)
立即执行函数：
(function(){console.log('aaa')})()
this的指向：
1.指向windows
2.指向元素节点对象
举例：this的功能运用
<body>
<script>
var name='frank'
function run() {
console.log(this.name + ' is running....')
}
run()
var i1={'name':'sunny','age':12};
i1.walk=run;
i1.walk()
</script>
</body>
Console运行结果： frank is running... sunny is running....
举例：表格隔行换色
<body>
<table border="1px">
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script>
var trs=document.getElementsByTagName('tr');
console.log(trs);
// onmouseover:鼠标放上去发生的事件
// onmouseout:鼠标离开时发生的事件
for (var i=0;i<trs.length;i++){
trs[i].onmouseover=function () {
this.style.backgroundColor='red';
};
trs[i].onmouseout=function () {
this.style.backgroundColor='white';
}
}
</script>
</body>
b.词法分析
分析过程：
functiont(){
console.log(age); //function
var age=99;
console.log(age); //99
function age(){}
console.log(age); //99
}
AO{
age=99,
}
t();
当函数调用的前一瞬间，先形成一个激活对象，叫Active Object, AO，并会分析一下3个方面的东西：
1：函数参数，如有，则将此参数付给AO上，AO.name，并且值为undefined，如果没有，则不做任何操作
2：函数局部变量，如AO上有，则不做任何操作，如没有，则将此变量AO，AO.age 并且值为undefined
AO{age=function}
3:函数声明，如AO上有，则会将AO上的对象覆盖，如没有，则不做任何操作
函数内部无论是使用参数，还是使用局部变量，都在AO上找
null表示无值，而undefined表示一个未声明的变量，或已声明的但没有赋值的变量，或一个兵不存在的对象属性
DOM剩余部分
a.事件
onmouseout:鼠标离开
onmouseover：鼠标悬停
onfocus：获取聚焦
onblur:失去聚焦
onclick：点击事件
举例：文本框获取聚焦或失去聚焦
<body>
<input type="text" id="i1" value="请输入用户名">
<script>
var s=document.getElementById('i1');
s.onfocus=function () {
if(this.value){
this.value='';
}
};
s.onblur=function () {
if(this.value==''){
this.value='请输入用户名'
};
}
</script>
</body>
总结事件：
a.onclick
DOM 0 绑定方式：
<div id ='i1' onclick='test();'>123</div>
弊端：
1.会影响页面渲染
2.比较繁琐，页面多的时候麻烦
b.DOM1的绑定方式：
obj.onclick=function(){
console.log('aaa')
}
弊端：只能绑定一个事件
写一个行为，样式，结构相分离的页面
举例obj.onclick：
<body>
<div id="i1">hello word</div>
<script>
function test() {
var i1=document.getElementById('i1');
console.log(i1.innerText); //获取文本内容
}
var i1=document.getElementById('i1');
i1.onclick=function () {
console.log('i1.innerText');
}
</script>
</body>
c.addEventListener
绑定俩个相同的事件
DOM:
window.alert(msg);
window.confirm(msg);
window.open(URL, 位置);
window.close();
举例：
window.alert('fuck');
window.confirm('确认要删除吗？');
window.open('./02.html', '_blank');
// 02.html如下代码：
<input type='button' onclick='window.close()' />
window.location.href='https://www.baidu.com'
js类库的对比：
prototype；
对ajax的支持不错
dojo:
对API离线存储，图像
bootstrap:
1.支持移动端
2.界面比较干净整洁
3.css类和js的插件成熟
setInerval()
在载入后，每隔指定的时间就执行一次回调函数
timer = setInterval(“函数()” , 毫秒数);
clearInterval()
取消setInterval()的设置
clearInterval(timer)
NAVIGATOR对象
navigator是指浏览器对象，该对象提供了当前正在使用的浏览器的信息。navigator对象中的属性是只读的
navigator对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用，也可用window.navigator引用它
navigator.appCodeName //浏览器代码名的字符串表示
navigator.appName //官方浏览器名的字符串表示
navigator.appVersion //浏览器版本信息的字符串表示
window.location.hostname
navigator.cookieEnabled //如果启用cookie返回true，否则返回false
jquery
宗旨：
write less do more
介绍：
本质是js的类库--->python的模块
python:
import red
re.find_all()
js:
script 引入
$()
网站：
官网：http://jquery.com/
版本：
1.x(推荐)
2.x
3.x
api:
http://jquery.cuishifeng.cn/
引入:
<script src="jquery-1.12.4.js"></script>
1.写在body之后加载
2.不建议写详细的版本号
Jquery的引入
<body>
<div id="i1">aaa</div>
</body>
<script src="jquery.js"></script>
jquery与Dom的转换
jquery--->DOM: $('#i1')[0] (dom对象)
DOM--->jquery: $(i1) (jquery对象)
举例：
i1=document.getElementById('i1')
$(i1).text()
选择器：css里面的选择器一样
1.id选择器
$('#i1')
2.标签选择器
$('a')
3.类选择器
$('.c1')
4.组合选择器
$('.c1,a,#i1')
5.层级选择器：
$('$i1 a') #子子孙孙
$('$i1 > a') #直接儿子
6.基本选择器：
$('li:first')
$('li:last')
$('li:eq(index)')
$('li:gt(index)')
$('li:lt(index)')
7.input系列
<input type='text'>
<input type='checkbox'>
<input type='password'>
$("input[type='test']")
案例：
$('input[type="checkbox"]').prop('check',true);
prop():
1.遍历所有的选中元素
2.对选中的元素进行操作
举例：
<body>
<div id="i1">
<a href=""></a>
<div class="c1">
<a href=""></a>
</div>
<div class="c2">
ccc
</div>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
<li>list item5</li>
</ul>
<script src="jquery.js"></script>
</div>
</body>
筛选器：
1.$('#i1').next #下一个第一个元素
2.$('#i1').nextAll #下一个所有的元素
3.$('#i1').nextUtil('.c1') #下一个元素直到.c1为止
1.$('#i1').prev() #下一个第一个元素
2.$('#i1').prevAll() #下一个所有的元素
3.$('#i1').prevUtil('.c1') #下一个元素直到.c1为止
$('#i1').siblings() #找出所有的兄弟姐妹
$('#i1').siblings('.c1') #找到兄弟姐妹是c1的
$('#i1').children()
$('#i1').children('.c1')
操作类：
1.整块类
addClass()--->classList.add('hide')
removeClass()--->classList.remove('hide')
2.操作单个属性
css('display','none')
css({'display':'none','fontSize':'23px'})
3.操作文本
$('#i1').text()
$('#i1').text('aaa')
$('#i1').html()
$('#i1').html('<a href=''></a>')
$('#i1').val()
$('#i1').val('aaa')
操作属性：
$('#i1').attr();
$('#i1').attr('n');
$('#i1').attr('n','v')
$('#i1').removeAttr('n')
文档操作：
append()
appendTo()
clone()
empty():清空内容
remove():清空元素以及内容
事件
页面加载完成之后，执行：
$(function(){
js代码
})
$(document).ready(function(){
js代码
})
Jquery的全选、反选、取消：
<body>
<input type="button" value="全选" onclick="selectAll();">
<input type="button" value="取消" onclick="cancelAll();">
<input type="button" value="反选" onclick="reverseAll();">
<table border="1px">
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox"></td>
</tr>
<script src="jquery.js"></script>
<script>
function selectAll() {
$('input[type="checkbox"]').prop('checked',true);
}
function cancelAll() {
$('input[type="checkbox"]').prop('checked',false);
}
function reverseAll() {
$('input[type="checkbox"]').each(function () {
var status=$(this).prop('checked')?false:true
$(this).prop('checked',status)
})
}
</script>
</table>
</body>