Basic JavaScript Learning -- 02 attribute operations, javascript -- 02

Basic JavaScript Learning -- 02 attribute operations, javascript -- 02
Demos: https://github.com/jiangheyan/JavaScriptBase

 

I. Train of Thought 1. simulate mobile phone chat ideas: a. Static Page html + css, including the basic style after sending dual-sending text messages successfully. B. Get the Avatar, input box, send button, chat content display interface, and other objects to be operated. C. Click the send button to get the content and Avatar information of the input box. splice the content of the input box with the existing content in a string, and determine the position where the content is displayed based on the Avatar information (belongs. D. If the entered content is blank, the "Enter content" alarm box is displayed. Otherwise, the information displayed on the chat content is replaced with the Information spliced by c. E. Click the Avatar image to obtain the existing profile information (data-belongs) and determine the Avatar. Using [one]). II. Key Points of attribute operation: 1. Get the attribute directly with (obj. attribute name), note that the attribute name cannot appear (-), and changes in the hump method, such as (Odiv. font-size error! -- "Odiv. fontSize) 2. The class is not a property (width, src, style), nor a keyword (var), but a reserved word, so the Object. class = XX error, -- "Object. className 3. Do not judge all relative paths, such as img/1.jpg. absolute paths are acceptable, such http://www.baidu.com 4. Do not judge the color and innerHTML values, because each browser parses them differently. 5. Operate js: oInput on the button. type = 'checkbox' IE8 and below do not support this js !! Dynamic attribute modification. Solution: After you click it, hide the input type = 'button 'and display the checkbox. 6. object. style. float = 'left' this js method is not compatible with all browsers, so Method 1: object. style. styleFloat = 'left' + object.style.css Float = 'left' Method 2: Use the className method to add attributes. 7. js allows All(.) Is replaced with ([]), and the value after (.) cannot be modified ( Must be non-Variable), Such as var thisVal = oAttr. value; ob. style. thisVal = XX error (this method is equivalent to adding the new thisVal attribute to the element), -- "ob. style [oAttr. value] = XX. 8. When css style is used for multi-person collaboration,. helenContant # id {......} However, it is determined that no id conflict exists. Directly write it as # id{......} You can. 9. Transparency filter: alpha (opacity: 80); (compatible with IE) opacity: 0.8; 10. Differences between word-wrap and word-break: <Note: Generally, active line breaks are supported in Chinese, you need to set the West text word> (1) word-wrap: break-word; when the West text word is too long, consider line feed first. If the line feed is too long, force the sentence to be broken in this line. (2) word-break: break-all; when the Spanish word is too long, the sentence is forcibly broken. (3) Considering the readability of foreign languages, use word-wrap: break-word. To save space, use word-break: break-all to forcibly cut sentences without any concerns; 11. white-space: nowrap; the blank content in the processing element is displayed only in one row (without line breaks ). Overflow: hidden; the excess part is hidden. Text-overflow: ellipsis; excessive ellipsis (...) is displayed.

1 // all must be written in 2 p {3 overflow: hidden; 4 text-overflow: ellipsis; 5 white-space: nowrap; 6} 7 8. unilineText {/* sets the text to a single line. If the length is exceeded, use a ellipsis instead of */9 width: 300px; 10 overflow: hidden; 11 text-overflow: ellipsis; 12-o-text-overflow: ellipsis; 13-webkit-text-overflow: ellipsis; 14-moz-text-overflow: ellipsis; 15 white-space: nowrap; /* The text in the specified paragraph does not wrap */16} 17 18. multiLineText {/* sets the text to multiple rows. If the length is exceeded, use a ellipsis instead of */19 width: 200px; 20 word-break: break-all; 21 display:-webkit-box; 22-webkit-line-clamp: 3;/* limit the number of lines of text displayed in a block element */23-webkit-box-orient: vertical; 24 overflow: hidden; 25} 26

 

12, Scroll barAs the content increases, it is always displayed at the bottom: document. getElementById ("id of the layer where the scroll bar is located "). scrollTop = document. getElementById ("id of the layer where the scroll bar is located "). scrollHeight; 2. Condition judgment points: 1. Create conditions when condition judgment is required but no proper judgment statement is available. Method 1: flag (1/0 or true/false. For example, when you click an image to switch the image, use the if condition to judge, but there is no proper sentence. In this case, flag = true/false; Method 2: Use data-* In H5 to determine. Method 3: Judge by adding and reducing class classes. Recommended! Iii. Other key points: 1, Form submissionButton input, button, and. First, input (submit) and button are preferred, considering the versatility of the browser, but considering the expressiveness (the value and display text in the button can be different. Second, if you do not need to directly submit the form (action), but select asynchronous or other methods for submission, select the tag. This prevents line-height in (1) ff and opera from affecting input ['click']. The button does not work. (2) The submit button has some compatibility issues in IE6, so it is not easy to unify. (3) tag a is easier to implement when buttons have some interactive effects, the hover effect is acceptable (Some browsers only support the css effect of the hover of the tag (IE6 does not support buttons and other hovers). Note: The a tag form will not be automatically submitted and the function must be written: 1 function tosubmit () {2 var myform = document. getElementByIdx_x ("myform"); 3 myform. submit (); 4} finally, in the case of non-form submission: button is a button, a is a jump, but in some aspects, a is compatible, supports the hover style, and supports line-height. 2. js execution and sequence 2.1 functions are defined in two ways: the defined type and the assignment type a defined type function fn (){......} B value assignment var fn = function (){......}; Difference: a defines a function, that is, the function declaration method. When JavaScript code is loaded Preprocessing(Read the function from the beginning to the end, including various operations in the function. Therefore, you do not have to declare the function before calling it. However, it may Performance impact!!!) The B-assignment function is similar to the definition of a variable. It only assigns a value and does not perform any internal operations of the function. So compared with the definition function Good performanceBut strictly follow Define and use. Fn1 (); var Fn2 = function () {function Fn1 () {alert ("Hello wild! "); Alert (" Hello World! ");} Xiangyuanlu} Fn2 (); 2.2 is JavaScript multi-threaded or single-threaded? Strictly speaking, JavaScript does not have the concept of multithreading, and all programs are executed in a single thread in sequence. However, for example, delayed execution and ajax asynchronous loading seem to be "multithreading", but they are actually "Callback", similar to "interrupt and Response" in the operating system, such as ajax asynchronous loading, when the code is executed to the ajax part, the code is interrupted and executed. When the ajax request data is returned, then execute ajax in the "Callback" (if any code is being executed is interrupted by other code being executed), and then execute the remaining code.