Difference between filter() and find() in JQuery :
Both filter() and find()methods are very similar, except the filter is applies to all the elements, while find searches child elements only.
1. filter() – search through all the elements.
2. find() – search through all the child elements only.
Both filter() and find()methods are very similar, except the filter is applies to all the elements, while find searches child elements only.
1. filter() – search through all the elements.
2. find() – search through all the child elements only.
<html>
<head>
<script
src="scripts/jquery-1.3.2.min.js"></script>
<style
type="text/css">
div
{
padding:
6px;
border:
1px
solid;
width:
40%;
}
</style>
<title>JQuery
find() vs filter() example</title>
<script
type="text/javascript">
$(document).ready(function
() {
$("#filterClick").click(function
() {
$('div').css('background',
'white');
$('div').filter('#Hardware').css('background',
'skyblue');
});
$("#findClick").click(function
() {
$('div').css('background',
'white');
$('div').find('#Hardware').css('background',
'skyblue');
});
});
</script>
</head>
<body
style="width:40%">
<div
id="Hardware">
Hardware
<div
id="Computer">Computer</div>
<div
id="Mobile">Mobile</div>
</div>
<div
id="Category">
Category
<div
id="Hardware">Hardware</div>
<div
id="Software">Software</div>
</div>
<br
/>
<br
/>
<br
/>
<input
type='button'
value='Filter
Hardware'
id='filterClick'>
<input
type='button'
value='Find
Hardware'
id='findClick'>
</body>
</html>
After run the application click on the filter hardware then display the output shown below.
Then click on the find hardware then display the following out put shown below screen.
$watch() Listeners In AngularJS :
<!doctype
html>
<html
ng-app="Demo"
ng-controller="AppController">
<head>
<meta
charset="utf-8"
/>
<title>
Unbinding
$watch() Listeners In AngularJS
</title>
</head>
<body>
<h1>
$watch()
Listeners In AngularJS
</h1>
<p>
<a
ng-click="incrementCount()">Click
it get count!</a>
»
{{
clickCount
}}
</p>
<p
ng-show="isShowingFeedback">
<em>Hey,now
that's how you click a link!!</a>
</p>
<!--
Load JQuery and AngularJS from the CDN. -->
<script
type="text/javascript"
src="//code.jquery.com/jquery-2.0.0.min.js">
</script>
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
<script
type="text/javascript">
//
Create an application module for our demo.
var
app = angular.module("Demo",
[]);
app.controller(
"AppController",
function
($scope) {
$scope.clickCount
= 0;
$scope.isShowingFeedback
= false;
var
unbindWatcher = $scope.$watch(
"clickCount",
function
(newClickCount) {
console.log("Watching
click count.");
if
(newClickCount >= 5) {
$scope.isShowingFeedback
= true;
unbindWatcher();
}
}
);
$scope.incrementCount
= function
() {
$scope.clickCount++;
};
}
);
</script>
</body>
</html>
The above code. In this demo, we're watching the number of clicks that a link receives. And, if that number gets above 5, we're going to show a message; however, once the message is shown, we remove the listener as it will no longer have any value.
As you can see, we're storing the function reference returned by the $watch() statement; then, once the $watch() fires a few times, we invoke that stored method, unbinding the $watch() listener.
