JavaScript HTML DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
- js能够改变页面中所有的HTML元素,属性,css样式
- js能够对页面中所有事件做出响应
- 可以通过id,标签名,类名找到HTML元素
var a1 = document.getElementById("cyl");
//查找id为cyl的元素再查找其中所有的p元素
var a1 = document.getElementById("cyl");
var b = a1.getElementsByTagName("p");
var c1 = document.getElementsByClassName("a1");
改变HTML元素内容
<h1 id="cc">ccc</h1>
<script>
var element = document.getElementById("cc");
element.innerHTML = "cyl";
</script>
改变HTML元素属性
<body>
<img id="image" src="1.jpg">
<script>
document.getElementById("image").src="2.jpg";
</script>
</body>
使用事件
HTML DOM允许我们通过出发时间来执行代码
举个栗子:元素被点击,页面加载完成,输入框被修改,鼠标移出,鼠标移入
<h1 id="id1">我的标题</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>
JavaScript Cookie
What’s cookie ?
Cookie是一些数据,存储于电脑上的文本文件,当web服务器向浏览器发送web页面时,再连接关闭后,服务端不会记录用户的信息。
cookie的作用就是用于解决如何记录客户端的用户信息:
- 当用户访问web页面时,用户的姓名等信息可记录在cookie中
- 在用户下一次访问该页面时,可在cookie中读取用户访问记录
- cookie一键值对(名/值)形式存储
username = cyl
当浏览器从服务器上请求web页面时,属于该页面的cookie会被添加到该请求中。服务端通过这种方式来获取用户的信息。
在js中,读取cookie:
var x = document.cookie;
删除cookie,只需要设置expires参数为以前的时间即可,删除时不必指定cookie的值
jQuery
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
</script>
对比
//js
function myFunction()
{
var obj=document.getElementById("h1");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
function myFunction()
{
$("#h1").html("Hello jQuery");
}
οnlοad=myFunction;
```js
function myFunction()
{
$("#h1").html("Hello jQuery");
}