<html> <head> <title>jQuery filter example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery filter example</h1> <script type="text/javascript"> $(document).ready(function(){ $("#filterSelector").click(function () { $('div').css('background-color', 'white'); $("div").filter("#div1").css('background-color', 'blue'); }); $("#filterFunction").click(function () { $('div').css('background-color', 'white'); $('div').filter(function(index) { if(index==2 || index==3){ //0 index based return true; } }).css('background-color', 'blue'); }); $("#filterFunction2").click(function () { $('div').css('background-color', 'white'); $('div').filter(function(index) { return $("b", this).length == 1; }).css('background-color', 'blue'); }); }); </script> </head><body> <div id="div1"> <b>This is div 1 with 'b' tag</b> </div> <div id="div2"> This is div 2 </div> <div id="div3"> <b>This is div 3 with 'b' tag</b> </div> <div id="div4"> This is div 4 </div> <br/> <br/> <br/> <input type='button' value='filter(selector)' id='filterSelector'> <input type='button' value='filter(index)' id='filterFunction'> <input type='button' value='filter(index)+b' id='filterFunction2'> </body> </html>
------------------
<section id="lists"> <ul class="itemlist"> <li>Item 0</li> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> </ul> <input type="button" id="list" value="Even Listed Items" /> </section>And, now we will add the following lines of jQuery inside the document event function of the index.html file:
$('#list').click(function () { $('ul.itemlist li:even').toggleClass('even'); }); Next, we will add in the following styles to the styles.css file:
#lists { width:400px; border: 2px solid #C63; padding:5px; margin-top:20px; } .even { background: #CFC; } Be sure to save the files, then open the index.html file in your browser, and then click on the Even Listed Items button. You will see that the even listed items are now rendered with a light green background; click again, and the background reverts to none. The example list is displayed below in Figures A and B as displayed in Chrome 17.0.9 in:
Figure A
Figure B
jQuery has many other selectors that can be utilized in varying ways, for example, to automatically style tables with every other row assigned a different styling, such as background style.
Add this jQuery code into the document event handler within the <script> area of index.html:
$('table.odd_row tr:odd').addClass('odd_row'); With this styling added into the styles.css:
tr.odd_row { background: #CDCDCD; } Add the following snippet to the index.html file, which will produce the table below with eight rows:
<section id="tables"> <table class="odd_row"> <tbody> <tr> <th>Row 0</th> <th>Column</th> <th>Column</th> </tr> <tr> <td>Row 1</td> <td>Column</td> <td>Column</td> </tr> . . </tbody> </table> </section> If you are following along with the coding of the demonstrations, be sure to save your index.html, and styles.css files, then refresh your browser to view. The results of this table view are displayed in Chrome 17.0.9 in Figure C:
Figure C
Change an object’s content text
Maybe you have an alert message that needs to be updated, and the change is applied in multiple locations across your website. With jQuery you only have to make the text entry once, and it gets applied automatically to the matched set of elements with the .text(textString) function. The .text() function can be used in both XML and HTML documents.In the index.html file, add in this line of jQuery code just below the previous line we added and inside the document ready function:
$(".test").text("Alert: This is the new text content!"); Save the file, then refresh the page in your browser, and you will see that the content text for the article and section with the class=”test” were updated with the new text: “Alert: This is the new text content!.” jQuery does all the work of applying the text update across all elements with the defined class. Imagine if this was an update for 100+ objects — the effect is the same and immediate across the site.
The resulting document as displayed in Chrome 17.0.9 is shown in Figure D:
Figure D
In the next installments of the jQuery series, we will review changing the appearances of objects with the show and hide functions, and finally, we will create an accordion effect for an FAQ document using the power of jQuery.
| :first | Selects the first matched element of the selector’s returned set |
| :last | Selects the last and single instance of the element matching the selector’s returned set |
| :even | Selects the even elements with a zero-based index within the matched set |
| :odd | Selects the odd elements with zero-based indexing within the matched set |
| :eq(index) | Select the element that is equal to the given index n within the matched set |
| :gt(index) | Select all elements that are greater than the given zero-based index within the matched set |
| :lt(index) | Select all elements that are less than the given zero-based index within the matched set |
| :animated | Selects all elements that are currently being animated at the time the selector is run |
| :header | Selects all header elements (H1…H6) |
| :not | Select all elements that do not match the given selector |
| :checkbox | Select all elements that match the type checkbox |
| :contains(text) | Select a string of text (case sensitive) |
| :disabled | Selects all elements that are disabled |
| :enabled | Selects all elements that are enabled |
| :file | Selects all elements of a certain file type |
No comments:
Post a Comment