JavaScript

1、操作BOM对象

Window代表浏览器窗口

window.innerheight//窗口内高
window.innerwidth//窗口内宽
window.outerheight//窗口外高
window.outerwidth//窗口外宽

Navigator封装浏览器的信息

screen屏幕尺寸

screen.height//1080px
screen.width//1920px

location当前网页的URL信息

document(内容)

document代表当前的页面，HTML、DOM文档树

document.title//页面标题，可更改

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
</dl>
​
<script>
    var dl =document.getElementByid("app");
</script>

获取cookie,劫持cookie原理

document.cookie

history代表浏览器历史记录

history.back();//后退
history.forward();//前进

2、操作DOM对象

获取节点

var id1 = document.getElementById('p1');
var id2 = document.getElementsByClassName('p2');
var id3 = document.getElementsByName('p3');
//名称获取
var id4 = document.getElementsByTagName('a');
//属性名称获取  
var father = document.getElementById('father');
var children = father.children;
//通过父类获取
​
//利用类名、标签、名称获取的是集合

修改节点

操作文本

id1.innerText="123"
id1.innerHTML='<strong>123<strong>'//可加属性，可以解析HTML文本标签

操作CSS

id1.style.color = 'red';
id1.style.fontSize='20px';
//属性用字符串包裹

删除节点

从父节点中删除子节点

father.removeChild(id2[0]);
//移除节点

插入节点

追加

li.append(id1)//移动已存在的节点

创建一个新标签

var new1 = document.createElement('p')//创建一个p标签
new1.id = 'new1';
new1.innerText = '新创建';
//新建节点

插入

father.insertBefore(new1,id4[0]);
//new1插入到id4[0]之前（在父节点之下操作）  

替换节点

id4[0].replaceChildren(new1)
//new1替换id[0]

3、操作表单

获取

var usename = document.getElementById('usename');

绑定事件

<button type="submit" onclick="login()">登录</button>

利用md5加密

//提前导入md5的在线CDN
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
var inputPw = document.getElementById('inputPw');
var password = document.getElementById('password');
password.value = md5(inputPw.value);//加密

4、jQuery

jQuery库，含有大量的javaScript函数

使用公式

$(selection).action()

例:

<a href="#" id="id1"> 点击我 </a>
<script>
  $('#id1').click(function (){
    alert("点我干嘛！！！")
  })
</script>

网站：

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

动态显示鼠标位置:

<style>
    #mouse{
        width: 250px;
        height: 250px;
        background: gold;
    }
  </style>
鼠标位置<span id="station"></span>
<div id="mouse"></div>
<script>
  $(function (){
     $('#mouse').mousemove(function (e){
         $('#station').text("X:"+e.pageX+"Y:"+e.pageY);
     })
  });
</script>