Jquery: Powerful selector < two >

Today I followed the data to make an example, why do I feel that I do not look good in books? Well, I admit that I only know a little bit about CSS style, and I'm not going to learn it in depth, because ... The company has art!

This small example simply implements the hiding and displaying of elements, the addition and removal of the element class attribute, and the following HTML code:

<divclass="Subcategorybox"> <ul> <li><a href="#"> Canon </a><i> (30440) </i></li> <li><a href="#"> Sony </a><i> (30440) </i></li> <li><a href="#"> Samsung </a><i> (30440) </i></li> <li><a href="#"> Nikon </a><i> (30440) </i></li> <li><a href="#"> Panasonic </a><i> (30440) </i></li> <li><a href="#"> Casio </a><i> (30440) </i></li> <li><a href="#"> Fuji </a><i> (30440) </i></li> <li><a href="#"> Kodak </a><i> (30440) </i></li> <li><a href="#"> Pentax </a><i> (30440) </i></li> <li><a href="#"> Ricoh </a><i> (30440) </i></li> <li><a href="#"> Olympus </a><i> (30440) </i></li> <li><a href="#"> BenQ </a><i> (30440) </i></li> <li><a href="#"> Patriots </a><i> (30440) </i></li> <li><a href="#"> Other brand Cameras </a><i> (30440) </i></li> </ul> <br/> </div> <divclass="ShowMore"> <a href="#"><span> Show All Brands </span></a> </div>

HTML

The JS code is as follows:

<script type="Text/javascript">$ (function () {varItem = $ ('ul Li:gt (5): Not (: last)');//Select the elements in all brands that have an index greater than 5 and that do not contain the last item. Item.hide ();//Hide Elements            varBtntoogle = $ ('Div.showmore>a');//Select buttonBtntoogle.click (function () {if(item. is(": Visible"))//determines whether the selected element is hidden{item.hide (); $( This). Find ('span'). Text ("Show All Brands");//actually always do not understand the use of this, there is time to check the information$('ul Li'). Removeclass ("promoted");//Remove class style                    }                    Else{item.show (); $( This). Find ('span'). Text ("Show Lite Branding"); $('ul Li'). Filter (": Contains (' Samsung '),: Contains (' Sony '),: Contains (' Olympus ')"). AddClass ("promoted")                    }                    return false;//hyperlinks do not jump                }                )            }            ); </script>

JS

Click the button to hide the element as follows:

Click the button to display the element as follows:

In fact, today's harvest should have three points:

1, self-made once, memory more profound a bit.

2, understand what is the DOM, used to always use the document, but also know the word dom, but do not understand it, today checked a bit of information, professional explanation is: Document Object model, DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document, which can change the content and presentation of the document. My understanding of it is: similar to the HTML tags, one layer nested layer, and the outermost is the

3. The difference between find () and filter (). This is what I didn't know before, find () is looking for a matching element in a child element, and filter () filters the collection element itself.