day 46 Summary

GOOD

BOM (Browser Object Model) refers to the browser object model that enables JavaScript capable browser to "talk."

Window object is one of the top target client JavaScript, because the window object is the common ancestor of most of the other objects, when calling window object's methods and properties, you can omit a reference to the window object. For example: window.document.write () can be abbreviated as: document.write ()

window object

All browsers support the window object. It represents the browser window

If the document contains a frame (frame or iframe tag), the browser will create a window object HEML document and create an additional window object for each frame

No public standard applies to the window object, but all browsers support the object

All JavaScript global object properties, functions and variables are automatically members of the window object

Global variables are properties of the window object. Global object is a window object's methods

Common methods of window

window.innerHeight  //浏览器窗口的内部高度
window.innerWidth   //浏览器窗口的内部宽度
window.open()       //打开新的窗口
window.close()      //关闭当前窗口

window child objects

navigator object (to know)

Browser object, the object can be determined by the browser used by the user, including information related to the browser

navigator.appName   //web浏览器全称
navigator.appVersion    //Web浏览器厂商和版本详细字符串
navigator.userAgent     //客户端绝大部分信息
navigator.platform      //浏览器运行所在的操作系统

screen objects (understand)

Screen objects, is not commonly used

Attributes:

screen.availWidth   //可用的屏幕宽度
screen.availHeight  //可用的屏幕高度

history object (to know)

window.history object contains the browser's history

Browsing history object contains a user's current page browsing history, but we can not see a specific address can be a simple one page forward or backward

history.forward()   //前进一页
history.back()      //后退一页

The location object

Address (URL) window.location object is used to get the current page and redirect the browser to a new page

Common properties and methods

location.href   //获取URL
location.href="URL"     //跳转到指定页面
location.reload()       //重新加载页面

Pop-up box

You can create three message boxes in JavaScript: alert box to confirm the prompt box box

Alert box
alert box used to ensure that users can get certain information
when the warning box appears, users need to click the OK button in order to proceed

alert("你看到了吗?");

A confirmation box
check box for the user to verify or accept certain information
when the confirmation box appears, users need to click the button to proceed or cancel the operation
if the user clicks to confirm, then the return value is true if the user clicks Cancel then the return value false

confirm("你确认吗?");

Prompt box
prompt box often appears to prompt the user to enter a value into the top page
when a user needs to enter a value after the prompt box appears, and then click OK or Cancel button to bring order to continue to manipulate
If the user clicks to confirm the value of the return value if the input the user clicks cancel the return value is null

prompt("请在下方输入","你的答案");

Timing-related

By JavaScript, we can then execute code at regular intervals, and not immediately after the function is called. We call Timed Events

setTimeout()

var t = setTimeout("JS语句",毫秒);

setTimeout () method returns a value. In the above statement, the value is stored in a variable named in t. If you wish to cancel this setTimeout (), you can use this variable name to specify it.

The first parameter setTimeout () is a string containing a JavaScript statement. This statement may be as "alert ( '5 seconds!')", Or a call to a function, such as alertMsg () ".

The second parameter indicates a parameter from the implementation of how many milliseconds from the current (1000 ms is equal to one).

clearTimeout()

clearTimerout(setTimeout_variable);

for example

var timer = setTimeout(function(){alert(2232);},3000);  //在3秒后执行一次函数
clearTimeout(timer);    //取消setTimeout设置

setInterval()

It may be a specified interval (in milliseconds) to the calling function or calculation expression.

setInterval () method will continue to call the function, until the clearInterval () is called, or the window is closed. A setInterval () ID is used as a parameter value returns the clearInterval () method.

setInterval("JS语句",时间按间隔)

return value

Can be passed to a window.clearInterval () so as to cancel the value of the code is executed periodically

clearInterval()

The method may cancel the timeout set by the setInterval ()

The clearInterval parameter () method must be made when setInterval () Returns the value of ID

clearInterval(setinterval返回的ID值)

for example

var timer = setInterval(function(){console.log(123);},3000) //每隔3秒就执行一次相应的函数
clearInterval(timer);   //取消setInterval设置

JUDGMENT

DOM (Document Object Model) refers to the document object model, through which you can access all the elements of the HTML document.

It is a set of document content and abstract conceptualization method
when the page is loaded, the browser will create a page of a document object model (the Document Object Model)
HTML the DOM model is constructed as an object number

HTML DOM tree

DOM standard specifies that each component of an HTML document is a node (node):

• Document node (document object): On behalf of the entire document
• Element node (element object): represents an element (tag)
• Node text (text object): Representative elements (tags) in the text
• Node attribute (attribute objects): represents an attribute element (tag) have properties
• Comments are comment nodes (comment Object)　

JavaScript can create dynamic HTML through DOM:

• JavaScript can change all the HTML elements on the page
• JavaScript can change the properties of all HTML pages
• JavaScript can change all CSS styles page
• JavaScript can react to all events page

Find label

Direct Find

document.getElemenById      //根据ID获取一个标签
document.getElementsByClassName     //根据class属性获取
document.getElementsByTagName       //根据标签名获取标签集合

Note: DOM operations related to the JS code should be placed in that position document

Indirect Find

parentElement       //父节点标签元素
children        //所有子标签
firstElementChild   //第一个标签元素
lastElementChild    //最后一个子标签元素
nextElementSibling  //下一个兄弟标签
previousElementSivling  //上一个兄弟标签元素

Node operation

Creating nodes

grammar:

createElement (name tag)

var divEle = document.createElement("div");

Add Nodes

grammar:

somenode.appendChild(newnode);      //追加一个子节点(作为最后的子节点)
somenode.insetBefore(newnode,某个节点); //把增加的节点放到某个节点的前面

Example:

var imgEle = document.createElement("img");
imgEle.setAttribute("src","http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

Delete Node

grammar:

somenode.removeChild(要铲除的节点)        //获得要删除的元素

Replacement Node

grammar

somenode.replaceChild(newnode,某个节点);

Attribute nodes

Gets the value of the text node

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

Value of the text node

var divEle = document.getElementById("d1")
divEle.innerText = "1"
divEle.innerHTML = "<p>2</p>"

attribute operation

var divEle = document.getElementById("d1");
divEle.setAttribute("age",18);
divEle.getAttribute("age")
divEle.removeAttribute("age")
//  自带的属性还可以直接.属性来获取和设置
imgEle.src
imgEle.src = "..."

Gets the value of the operation

Syntax elementNode.value

It applies to

​ input

​ select

​ textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class action

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

Css specified operation

obj.style.backgroundColor = "red"

JS CSS property law operation:

1. For the CSS property not used directly in the horizontal line of the general style. Attribute name.

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2. CSS properties contained in the horizontal line, the first letter capitalized later horizontal line can be replaced

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

event

One of the new features of HTML 4.0 is the ability to make HTML browser event triggers the action (action), like starting a JavaScript when a user clicks on an HTML element. The following is a list of attributes that can be inserted into the HTML tags to define event actions.

Common events

onclick     //当用户点击某个对象时调用的事件句柄
ondblclick  //当用户双击某个对象时调用的事件句柄

onfocus     //元素获得焦点        //  练习  输入框
onblur      //元素失去焦点        //应用场景  用于表单验证  用户离开某个输入框时  代表已输入完  我们可以对他进行验证
onchange    //域的内容被改变       //应用场景  通常用于表单元素    当元素内容被改变时触发 (select联动)

onkeydown   //某个键盘按键被按下     应用场景    当用户在最后一个输入框按下回车按键时  表单提交
onkeypress  //某个按键被松开       
onkeyup     //某个按键被松开
onload      //一张页面或一幅图像完成加载
onmousedown //鼠标按钮被按下
onmousemove //鼠标被移动
onmouseout  //鼠标从某元素移开
onmouseover //鼠标移到某元素之上

onselect    //在文本框中的文本被选中时发生
onsubmit    //确认按钮被点击   使用的对象是form

Binding way

方法一:
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

Note: this is an argument that is the current element of the event starting
this function definition process for the parameter

方式二:
<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

jQuery

jQuery Introduction

1. jQuery is a lightweight, multi-browser compatible JavaScript library.
2. jQuery makes it easier for users to handle HTML Document, Events, achieve animation effects, easily interact with Ajax, JavaScript can greatly simplify programming. Its purpose is: "Write less, do more."

jQuery advantage

1. A lightweight JS framework. jQuery core js file only a few dozen kb, will not affect the page loading speed.
2. Rich DOM selectors, jQuery selection Used easy to use, for example, to find adjacent elements of a DOM object, JS could write several lines of code, and one line of code jQuery to get, then you want a table such as interlaced color, jQuery also get line of code.
3. Chain expression. jQuery's chaining multiple operations can be written in a single line of code, the more concise.
4. Events, styles, animation support. jQuery also simplifies the operation css js code readability and also stronger than js.
5. Ajax operations support. AJAX jQuery simplifies operation, only the rear end of a return communication JSON string format can be done in the front end.
6. Cross-browser compatible. jQuery basically compatible with the major browsers now, no longer compatible browser issues and headache.
7. Plug-in extension development. jQuery has a wealth of third-party plug-ins, such as: tree menu, date control, image transition plug-ins, pop-ups, etc. The basic component on the front page has a corresponding plug-in, and do it with jQuery plug-in effects stunning, and can be according to their need to rewrite and package plug-ins, simple and practical.

jQuery content

1. Selector
2. Filters
3. Style operations
4. Text manipulation
5. Property operations
6. Document processing
7. event
8. Animation
9. Plug
10. each、data、Ajax

Download Link: jQuery official website

Chinese Documentation: jQuery document the AP Chinese

​