- “SIZZLE” is another library from Jquery for DOM Element selections.
- Sizzle can be downloaded from:-
- The demo project structure,
- It has 3 type of API , public , internal and external API.
- “Sizzle” object output for console.log(Sizzle) is below,
- In this Demo, “We will check some of the methods from public API. Here we have list pf fruits and flowers as LI elements. Then We will apply sizzle methods for the results”.
- The HTML markup and SIZZLE java script a s below sizzle-api-demo.html ,
<!DOCTYPE html>
<html>
<head>
<title>Jquery Sizzle Demo</title>
<script src="sizzle.js"></script>
</head>
<body>
<ul class="flower-fruit-container">
<li class="fruit">Mango</li>
<li class="fruit">Grapes</li>
<li class="flower">Rose</li>
<li class="fruit">Papaya</li>
<li class="flower">Tulip</li>
<li class="flower">Orchid</li>
<li class="flower">Lotus</li>
<li class="fruit">Kiwi</li>
</ul>
<script>
var fruitElements = Sizzle('.fruit'),
flowerElements = Sizzle('.flower');
console.log("Fruit Elements : ");
console.log(fruitElements);
console.log("Flower Elements : ");
console.log(flowerElements);
var sameFlag,
resultArray,
allElements = Sizzle('li')
console.log(allElements);
for (var liElement in allElements) {
sameFlag = Sizzle.matchesSelector(allElements[liElement], '.fruit')
console.log(allElements[liElement] + " matchesSelector returns : " + sameFlag);
}
resultArray = Sizzle.matches('.flower', allElements);
console.log("Matched Array : ")
console.log(resultArray);
</script>
</body>
</html>
- The methods tested are Sizzle.matches , Sizzle.matchesSelector, Sizzle .These methods take selectors and looks for matching DOM elements.
- In Browser (Mozilla) the list will be displayed as,
