JQUERY

FILTER METHOD IN JQUERY


Description: Reduce the set of matched elements to those that match the selector or pass the function's test.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<a href="#" class="external">link</a>
<a href="#" class="external">link</a>
<a href="#"></a>
<a href="#" class="external">link</a>
<a href="#" class="external">link</a>
<a href="#"></a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
//alerts 4 left in the set
alert(jQuery('a').filter('.external').length + ' external links'); //alerts 4 external links
</script>
</body>
</html>







FIND METHOD IN JQUERY


Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>This page is for <em>find</em>method in
<em>jquery</em>example.</p>
<p>This page is for find <em>method</em> in jquery example.</p>
<p>This <em>page</em> is <em>for</em> find method in jquery example.</p>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
//alerts total italic words found inside of <p> elements
alert('The three paragraphs in all contain ' + jQuery('p').find('em').length + 'italic words');
</script>
</body>
</html>

OUTPUT

The three paragraphs in all contains 5 italic words





END METHOD IN JQUERY

Description: End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>text</p>
<p class="middle">Middle <span>text</span></p>
<p>text</p>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
alert(jQuery('p').filter('.middle').length); //alerts 1
alert(jQuery('p').filter('.middle').end().length); //alerts 3
alert(jQuery('p').filter('.middle').find('span').end().end().length); //alerts 3
</script>
</body>
</html>


.addClass() IN JQUERY

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<style type="text/css">
/*h1 { color:green; }*/
.cls { color:red; }
</style>
</head>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script>
$(document).ready(function(){
$("*").addClass("cls");
});
</script>
<body>
<form name="form1" method="post" action="">
<div>
     <div><h1>LOGIN FORM</h1></div>
        <div>Name : <input type="text" /></div>
    </div>
</form>
</body>
</html>

OUTPUT

LOGIN FORM

Name : <textbox>

No comments:

Post a Comment