You are reading the article How Does Contains() Selector Work In Jquery updated in October 2023 on the website Benhvienthammyvienaau.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 How Does Contains() Selector Work In Jquery
Real-Time Example: Let suppose we have lot of content and if there is situation we have to apply CSS styles for specific paragraph or header or footer text then we no need to check with the entire content, but we can check with one unique keyword from content and apply the contains() selector. Instead of checking all the content and apply the style we can just check with single string and apply the CSS styles.
JQuery contains() selector that can be applied with paragraph content, header content, footer content etc. to apply any required styles to the content.
Syntax:
Syntax Explanation:
Note: Make it work jQuery application we must import this script in html file
ExamplesGiven below are the examples:
Example #1Apply CSS Styles to the Paragraph content if it contains given word .
<script src= h1,h2{ text-align:center } h1 { color:blue; } h2 { color:maroon; } h3 { color:lightblue; text-decoration: underline; } $(document).ready(function(){ $(“p:contains(predefined)”).css(“background-color”, “navy”); $(“p:contains(predefined)”).css(“font-size”, “25px”); $(“p:contains(predefined)”).css(“color”,”white”); $(“p:contains(suppose)”).css(“background-color”, “blue”);//apply background color to paragraph if it contains suppose $(“p:contains(suppose)”).css(“color”,”white”); $(“p:contains(suppose)”).css(“font-size”, “25px”); });
Output:
Explanation:
As you can see in the above paragraphs, if the provided word found in the contains selector then CSS styles like background color, font-size and text color properties applied and rest of the paragraphs does not applied with any CSS styles.
Example #2Apply CSS Styles to the Paragraph content if it contains given word.
Code:
<script src= h1{ text-align:center; color:blue; } h3 { color: green; text-decoration: underline; } $(document).ready(function(){ $(“h2:contains(predefined)”).css(“border-style”, “solid”); $(“h2:contains(predefined)”).css(“border-color”, “maroon”); $(“h2:contains(predefined)”).css(“border-width”,”3px”); $(“h2:contains(predefined)”).css(“color”,”green”);//applytext color to the header if it contains predefined $(“h2:contains(specified)”).css(“border-style”, “solid”); $(“h2:contains(specified)”).css(“border-color”, “brown”); $(“h2:contains(specified)”).css(“border-width”,”4px”); $(“h2:contains(specified)”).css(“color”,”red”);//applytext color to the header if it contains specified $(“h2:contains(group)”).css(“border-style”, “solid”); $(“h2:contains(group)”).css(“border-color”, “navy”); $(“h2:contains(group)”).css(“border-width”,”5px”); $(“h2:contains(group)”).css(“color”,”orange”);//applytext color to the header if it contains group $(“h2:contains(hello)”).css(“border-style”, “solid”); $(“h2:contains(hello)”).css(“border-color”, “navy”); $(“h2:contains(hello)”).css(“border-width”,”5px”); $(“h2:contains(hello)”).css(“color”,”orange”); });
Output:
Example #3Apply CSS Styles to the Paragraph content if it contains given word.
Code:
<script src= h1{ text-align:center; color:brown; } $(document).ready(function(){ $(“button:contains(button)”).css(“color”,”white”);//apply text color to the button if it contains button keyword $(“button:contains(button)”).css(“background-color”,”red”);//apply background color to the button if it contains button keyword $(“button:contains(button)”).css(“font-weight”,”bold”);//apply fnt weight to the button if it contains button keyword });
Output:
ConclusionjQuery contains() selector first search for provided word or sentence and if there is any CSS styles to be applied then it is applied. If no word or sentence is not found it does not apply any CSS styles. jQuery contains() selector content is case sensitive.
Recommended Articles
This is a guide to jQuery contains. Here we discuss the introduction to jQuery contains with respective examples for better understanding. You may also have a look at the following articles to learn more –
You're reading How Does Contains() Selector Work In Jquery
Update the detailed information about How Does Contains() Selector Work In Jquery on the Benhvienthammyvienaau.com website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!