jQuery [attribute*=value] Selector
jQuery (“[attribute*=value]”) Selector is used to select all elements with attribute specified by attribute parameter that contains the word specified by the value parameter.
Syntax:
$("[attribute*='value']")
Parameters: This selector has two parameters.
- attribute: attribute specifies the attributes that need to find.
- value: value is the string that is matched with the value of every element having the specified attribute.
Example 1: In this example, we are using jQuery [attribute*=value] Selector.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title >Document</ title > </ head > < body > < input type = "text" name = "name" placeholder = "Name" /> < br /> <!--This input element contains name attribute which have name string in it--> < input type = "text" name = "fathers_name" placeholder = "Father's Name" /> < br /> <!--This input element contains name attribute which have name string in it--> < input type = "text" name = "address" placeholder = "Address" /> < br /> < input type = "email" name = "email" placeholder = "Your Email" /> < br /> < input type = "password" name = "password" placeholder = "Your Password" /> < br /> < input type = "button" value = "Register" /> </ body > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < script > $(document).ready(function () { $("input[name*='name']").css({ background: "green" }); }); </ script > </ html > |
Output:
Example 2: Here is another example of jQuery [attribute*=value] Selector.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0">. < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title >Document</ title > < style > div { width: 50px; height: 50px; background-color: yellow; margin: 20px; } </ style > </ head > < body > <!--All these will be selected because target attribute contains first as value--> < div target = "first" > First div </ div > < div target = "first" > First div </ div > < div target = "first" > First div </ div > < div target = "second first" > Second Div </ div > <!-- this will be selected as target attribute contains first as value--> < div target = "second" > Second Div </ div > < button id = "CC" >Change Color</ button > </ body > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < script > // change color. $("#CC").click(function () { $("div[target*='first']").css({ background: "green" }); }); </ script > </ html > |
Output:
Contact Us