JQuery uses CSS to display and hide DOM elements. jquerydom

JQuery uses CSS to display and hide DOM elements. jquerydom

Today, I attended a Code Review activity and read the Code written by a colleague. I feel satisfied with the current function implementation, but in the long run, both code reuse and maintenance are very poor. Let's first look at what the requirement is. You need to select different options in the drop-down box to display and hide a text box. My colleague wrote this:

Code 1

<select  name="select" onChange="disinput(this)">                <option value="1">1</option>                <option value="2">2</option>                </select><input type="text" id="text" name="text" style="" value="" />  <script type="text/javascript">    function disinput(obj){        if(obj.value==2){            document.getElementById("text").style.display="none";        }else{document.getElementById("text").style.display="";}    }</script>

This writing method should be a habit of all JS beginners. Just write a method to implement the function as needed. However, I think if there is a similar requirement on another page, should we rewrite this method again, on which day, if you want to select option 1, the XX content will be displayed in the text box. If option 2 is selected to display another content, do you want to repeat all the pages, is there a better way. At this time, you can use CSS, of course, external CSS. Here I wrote an example to put CSS in the page file. If the actual operation is definitely in the external CSS.

Code 2

Whether the Code in Code 2 is more concise, more importantly, it achieves Code reuse and future maintainability. We recommend that you use reuse and maintainability when writing code.




How does jquery or js determine whether a layer is displayed or hidden?
In jquery, if you want to find a visible element, use: visible.
For example, $ ("tr: visible ")
You can use
$ ("Tr: not (': visible ')").

Use
$ ("Finder" ).css ("display ")

How does jQuery obtain the height of hidden elements? Or an event can be triggered when the dom element visibility changes.
$ ('# Pason> div') with the '>' symbol, select the direct subnode.
All div elements are selected without the '>' symbol.
So the first method is to first change the background color of all div elements under the div element whose id is pason to red, in the second sentence, the background color of the direct sub-node with id # pason is changed to red, and its direct sub-nodes are baidu and google, without changing the sina color.
The second method is to change the direct sub-node with id pason to green, that is, to change baidu and google to green, then execute the first sentence $ ('# pason div'hangzhou.css ("background", "red"); // when 1;, it turns the color of all the divs into red, so sina also changed, and finally all changed to red.