1.JavaScript-BOM opening
1. What is the BOM?
DOM is a set of HTML tags operate API (Interface / methods / properties)
BOM is a browser operation API (Interface / methods / properties)
2.BOM common objects
window: representative of the browser window
Note: window is an object of the BOM, and is a top target (global)
Navigator: Information on behalf of the current browser by Navigator we can determine what the user's current browser
Location: Information on behalf of the browser address bar, by Location we can set or get the current address information
History: This means the browser history information, to refresh one-step / on / next step by History
Precautions: For privacy reasons, we can not get all the user's history can only get the current history
Screen: The screen on behalf of the user information
2.JavaScript-Navigator
// Navigator: Information on behalf of the current browser by Navigator we can determine what the user's current browser
console.log(window. navigator);
var agent = window.navigator.userAgent;
if (/chrome/i.test(agent)) {// agent contains a specified string in
alert ( "current is Google Browser")
}else if (/firefox/i.test(agent)) {
alert ( "currently Firefox")
}else if (/msie/i.test(agent)) {
alert ( "current is lower IE browser")
}else if ("ActiveXObject" in window) {
alert ( "current senior IE browser")
}
Very many ways, your own search
3.JavaScript-Location
<button id="btn1">获取</button>
<button id="btn2">设置</button>
<button id="btn3">刷新</button>
<Button id = "btn4"> force a refresh </ button>
<script>
// Location: Information on behalf of the browser address bar, by Location we can set or get the current address information
let oBtn1 = document.querySelector("#btn1");
let oBtn2 = document.querySelector("#btn2");
let oBtn3 = document.querySelector("#btn3");
let oBtn4 = document.querySelector("#btn4");
// Get the current address of the address bar
oBtn1.onclick = function () {
console.log(window.location.href);
};
// set the address of the current address bar
oBtn2.onclick = function () {
window.location.href = "http://www.it666.com";
};
// reload interface
oBtn3.onclick = function () {
window.location.reload (); reload method // default refresh will not necessarily flush the cache
}
oBtn3.onclick = function () {
window.location.reload (true); // force a refresh: reload method to write true. It will refresh the cache
}
4.JavaScript-History
History: This means the browser history information, to refresh one-step / on / next step by History
Precautions: Due to privacy considerations, we can not get all the user's history can only get the current history
1. Forward
Method a: window.history.forward ();
We can only go forward once after use
Method two: window.history.go (1);
You can forward multiple pages
2. Refresh
If the method is passed to go 0, on behalf of the refresh. window.history.go (0);
3. Back
Method a: window.history.back ();
Only once in the back after use
Method two: window.history.go (1);
You can go back multiple pages
5.JavaScript-offsetWidthHeight acquired width and height of the element
Gets the width and height of the element
Method a: getComputedStyle ()
important point:
() Obtained by high getComputedStyle width, not including padding (padding) and a border (border).
Width and height can be acquired in the line set may be acquired width and height of the CSS provided
Only support access, does not support setting
Only support IE9 and above browsers
// oDiv.style.width = "555px";
// oDiv.style.height = "555px"; // can acquire the width and height provided JS
var style = getComputedStyle (hissing);
// style.width = "666px";
// style.height = "666px"; // property is read-only does not support setting.
console.log(style.width, style.height);
Method two: obtaining by the width and height attributes currentStyle
important point:
CurrentStyle acquired by the width and height, not including padding (padding) and a border (border).
Width and height can be acquired in the line set may be acquired width and height of the CSS provided
Only support access, does not support setting
IE9 only supports the following browsers
// oDiv.style.width = "555px";
// oDiv.style.height = "555px";
style.width = "666px";
style.height = "666px";
var style = oDiv.currentStyle;
// console.log(style);
console.log(style.width);
console.log(style.height);
Method three: high throughput of wide style attribute
Acquired by the width and height of style, not including padding (padding) and a border (border).
Can be acquired width and height provided in the line, you can not obtain the width and height set CSS
Get support, support setting
Supports advanced low-level browser
oDiv.style.width = "555px";
oDiv.style.height = "555px";
console.log (oDiv.style.width, oDiv.style.height);
Method four: Get the width and height by offsetWidth / offsetHeight Properties
Obtained by offsetWidth / offsetHeight width and height, comprising a padding (padding) and a border (border).
Can be acquired width and height provided in the line, you can not obtain the width and height set CSS
Support access, does not support setting
Supports advanced low-level browser
oDiv.offsetWidth = "555px";
oDiv.offsetHeight = "555px";
console.log (oDiv.offsetWidth);
console.log (oDiv.offsetHeight);
to sum up:
1.getComputedStyle()、currentStyle、style
Get the width and height, not including padding (padding) and a border (border).
2.offsetWidth/offsetHeight
Get the width and height, comprising a padding (padding) and a border (border).
3..getComputedStyle()、currentStyle、offsetWidth/offsetHeight
Support access, does not support setting
4.style
Get support, support setting
5..getComputedStyle()、currentStyle、offsetWidth/offsetHeight
The line may be acquired, and the chain can also be obtained inline style
6.style
Only get inline style
6.JavaScript-offsetLeftTop get element position
offsetLeft and offsetTop role
Get element to offset a position between the first positioning ancestor
If there is no ancestor element is positioned, it is to get into the body of an offset position
7.JavaScript-offsetParent
1.offsetParent role
Get the elements of the first positioning ancestor
If there is no ancestor element is positioned, then get to is the body
8.JavaScript-client related properties
Width + margins within clientWidth =
clientHeight = height + padding
offsetWidth = frame width + padding +
offsetHeight = + height + padding borders
clientLeft = left border
clientTop = top border
offsetLeft / offsetTop: positioning a distance between the first shift position ancestor body ||
9.JavaScript-scroll-related properties
1. content does not exceed the range of elements
scrollWidth = element width + the margin width == clientWidth
scrollHeight = + padding element height height == clientHeight
2. When is beyond the range of elements
The margin width scrollWidth = element width exceeds the width ++
scrollHeight = + padding element height exceeds the height of the height +
3.scrollTop / scrollLeft
scrollTop: distance beyond the inner margins of the top element
scrollLeft: distance beyond the left margin of the inner element
JavaScript- three families
Three families: offset, client, scroll
23.JavaScript- anti-shake function
Question: In Baidu input box, enter a character will be sent once the request, it will have performance problems
Solution: given period determines whether the user input is not continuous. Using the given period
1. What is the function of image stabilization (debounce)?
Image stabilization function is a means for performing optimization of the high frequency js code
It allows the called function is invoked only once in a continuous high frequency during operation
2. The role of anti-shake function
Reduce the number of code execution, improve website performance
3. The anti-shake function scenarios
oninput / onmousemove / onscroll / onresize操作
4. Problems stabilization function:
Only called once, so do not see the process of change, we can only see the end result
Solution: Use the throttle function
<input type="text">
<script>
let oInput = document.querySelector("input");
let timerId = null;
oInput.oninput = function () {// monitor whether the content changed
let value = this.value
timerId && clearTimeout(timerId);
timerId = setTimeout(function () {
console.log (value, "a network request");
}, 1000);
// console.log (this.value, "network request");
}
</script>
4. The image stabilization function package
function debounce () {// just call debounce function, image stabilization function returns
let timerId = null;
return function () {
timerId && clearTimeout(timerId);
timerId = setTimeout(function () {
console.log (value, "a network request");
}, 1000);
}
}
oInput.oninput = debounce();
24.JavaScript- throttle function
1. What is the function of the throttle (throttle)?
Optimization of the throttle function is a means for performing a high frequency js code
Can reduce the number of function calls to perform high-frequency
2. Functions throttling effect
Reduce the number of code execution, improve website performance
3. The scenario function throttling
oninput / onmousemove / onscroll / onresize and other events
4. The difference image stabilization function and a throttle function
Throttling function is to reduce high frequency continuous operation function execution times (e.g. 10 times successive calls, may perform only 3 to 4 times)
So that when the image stabilization function is a continuous function of high frequency operation is performed only once (e.g. 10 successive calls performed only once)