table of Contents
location object
The general address information of a page is:
eg:
https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525?fr=aladdin#2_1
http https transmission protocol
www.baidu.com domain name
?fr=aladdin query character
#2_1 hash (anchor location)
-Location object:
It stores information related to all the content of the web page address.
Attributes:
href : address information.
Jump page: location.href = "XXX";
<script>
window.onload = function() {
location.href = "https://www.baidu.com";
}
</script>
[Note] location.href needs to be called after the page is loaded.
search : The query string is generally used to transmit data and needs to be parsed.
- split (split string)
Return value: Array composed of divided strings: Su Shi|Xin Qiji|Li Shangyin = "[Su Shi, Xin Qiji, Li Shangyin]
Parse query character
1.""
2.?name=zhangsan&age=18
step:
1. Need to prepare a function for analysis, this function also needs a parameter.
Parameters: the string to be parsed
2. Start parsing
1. Judge if it is an empty string, return an empty object directly.
2. If it is not an empty string, parse the string and put the result into the object.
(1) Cut off the first character.
(2) The remaining characters are divided according to & to get an array.
(3) Traverse the array to get a string in the format "attribute name=attribute value".
(4) For each string, divide it according to = to get an array of attributes and attribute values.
(5) Assign the attribute name and attribute value to the object //obj[t[0]]=t[1];
(6) Return the object.
method:
assign(): Change the address in the browser's address bar and record it in the history.
[Note] Setting location.href will call the assign method.
replace() Replace the address in the browser's address bar.
reload() reload F5
reload(true) Force loading, caching is not applicable.
navigator：
- Get some information about the browser client.
history
-
history: save the history of the current window, which contains some properties and methods of operating history
-
[Note] Not the history record in the browser
1. Attributes
length: Returns the number of historical records.
<script>
window.onload = function() {
btn.onclick = function() {
// 跳转地址
location.href = "https://www.baidu.com";
// 浏览器历史记录，记录打开了多少
alert(history.length);
}
}
</script>
2. Method:
- back():
Syntax: history.back();
Function: Similar to the back button on the browser, go back to the previous history record.
- forward():
Syntax: history.forward();
Function: It is similar to the forward button on the browser, which advances to the next historical record.
- go(n):
Syntax: history.go(n); n represents an integer
Positive integer: means forward
0: refresh the current page
Negative integer: means back
Role: Jump to n records.
<script>
window.onload = function() {
btn.onclick = function() {
// 类似浏览器上面的前进键，前进到下一条历史记录中。
history.forward();
}
btn2.onclick = function() {
// 类似浏览器上面的后退键，回退到上一条历史记录中。
history.back();
}
but3.onclick = function() {
//浏览器打开历史记录的数
alert(history.length);
}
god.onclick = function() {
//直接跳转到历史记录的第几个页面
history.go(2);
}
}
</script>
The width and height of the browser roll
When the page width and height are relatively large, scroll bars will appear, and part of the content will be hidden as the page scrolls.
We call the height hidden above it
The hidden width on the left is called the rolled width.
Browser scrolling
The js code can be used to specify where the browser scrolls to.
The first way:
Format: window.scroll (abscissa, ordinate);
[Note] No need to write units, instant positioning.
window.onload = function() {
btn.onclick = function() {
// 横向移动400，纵向移动600
window.scroll(400, 600);
}
}
The second way:
eg:
window.scroll({ left:200, top:600, behavior:'smooth' });
behavior: You can determine the way of scrolling. The default is auto for instant positioning, and it can be set to smooth for smooth transition.
window.onload = function() {
btn.onclick = function() {
window.scroll({
left: 400,
top: 600,
// 平滑滚动页面
behavior: 'smooth'
})
}
}
Custom scroll speed
- This is a complete custom scroll speed case
body {
width: 3000px;
height: 2000px;
}
<script>
var timer = null; //先设置滚动距离为空
window.onload = function() {
btn.onclick = function() {
//设置一个点击时间，当点击“btn”这个按钮时，执行下面的代码
timer = setInterval(function() {
//设定滚动时间的 函数
document.documentElement.scrollTop -= 20; //每一次滚动的距离
if (document.documentElement.scrollTop <= 0) {
// 如果滚动的距离小于或者等于0的时候，停止滚动
clearInterval(timer); // 清除滚动距离
}
}, 50);
}
}
var str = 0; //定义一个本次滚动的距离
window.onscroll = function() {
if (str < document.documentElement.scrollTop) {
//当本次滚动距离小于上一次的滚动距离时，停止滚动
clearInterval(timer);
}
str = document.documentElement.scrollTop; //本次滚动的距离
}
</script>
<body>
<p>三十功名尘与土，八千里路云和月,三十功名尘与土，八千里路云和月三十功名尘与土，八千里路云和月</p>
<br>
<br>
<br>
<br>
<p>三十功名尘与土，八千里路云和月,三十功名尘与土，八千里路云和月三十功名尘与土，八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<!-- ........ 下面还有很多行代码 -->
<button id="btn">滚动</button>
</body>
JUDGMENT
dom:docment object model
The DOM is composed of nodes.
Nodes can be divided into three categories:
1. Element node html tag
2. The text in the text node label
3. The attributes of the attribute node label
Learning dom means learning to operate on nodes
Modify: Modify the content of the DOM node.
Traverse: Traverse the child nodes under the DOM node to facilitate the next operation.
Add: Add a child node under the DOM node.
Delete: delete the node from HTML. It is equivalent to deleting all the content and all child nodes it contains.
What DOM can do:
1. Find the object (element node)
2. Set the attribute value of the element node,
3. Dynamically delete and create nodes.
4. Event triggering in response
How to get the node
1.getElementById
Format: node.getElementById("ID")
Function: Starting from the node node, find the node by ID.
2.getElementsByTagName
Find node by tag name
Format: node.getElementsByTagName("tag name");
3.getElementsByClassName
Find nodes by class name
Format: node.getElementsByClassName("class name");
4.getElementsByName ()
Get the node through the name attribute value
Most commonly used in form elements.
--------------------------------------------------
Lower version of IE is not supported.
5.querySelector()
Format: node.querySelector (css selector)
return value:
If an element matching the selector is found, the first element is returned.
If not found, it returns null
6.querySelectorAll()
Format: node.querySelector (css selector)
return value:
If an element matching the selector is found, all are returned.
If not found, it returns null
nodelist pseudo-array normal array method is invalid for pseudo-array length [subscript]
[Note] Do not use getElementById when getting nodes nested.
<script>
window.onload = function() {
// 通过ID获取页面信息
var hh = document.getElementById("h3")
// 通过标签获取信息
var hh = document.getElementsByTagName("p")[0];
// 通过class类名获取标签信息
var hh = document.getElementsByClassName("pp")[0];
// 通过css3的类选择器获取信息，获取的是第一个p标签信息
var hh = document.querySelector(".ppp");
// 通过css3的类选择器获取信息，获取的是同一个类名全部p标签信息
var hh = document.querySelectorAll(".ppp");
var box = document.getElementsByClassName("p1")[0];
var p1 = box.getElementById(p1);
console.log(p1);
}
</script>
<body>
<div id="box">
<h1 id="h3">我是h1标签 </h1>
<div>
<p id="p1">我是p标签</p>
</div>
<p class="pp">我是p2标签</p>
<p class="ppp">我是p3标签</p>
<p class="ppp">我是p3标签</p>
<p class="ppp">我是p3标签</p>
</div>
</body>