jQuery [attribute~=value] Selector
jQuery [attribute~=value] Selector Select all elements with a name attribute that contains the specific string.
Syntax:
$("[attribute~='string']")
Parameter:
- attribute: Specifies which attribute is used to find.
- string: Specifies the string value to find.
Example 1: In this example, we will select all the elements which have name attribute by using jQuery [attribute~=value] Selector.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < script > $(document).ready(function () { $("input[name~='GFG']").css("background-color", "LIGHTGREEN"); }); </ script > </ head > < body > < input name = "GFG" type = "text" value = "w3wiki" > < input name = "2" type = "text" value = "SITE1" > < input name = "3" type = "text" value = "SITE2" > < input name = "GFG" type = "text" value = "w3wiki" > < input name = "GFG" type = "text" value = "w3wiki" > < input name = "4" type = "text" value = "SITE4" > < input name = "GFG" type = "text" value = "w3wiki" > </ body > </ html > |
Output:
Example 2: In this example, we will change the color of all the elements which have name attribute with the help of click function.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < script > $(document).ready(function () { $("button").click(function () { $("input[name~='GFG']").css("color", "GREEN"); }); }); </ script > </ head > < body > < input name = "GFG" type = "text" value = "w3wiki" > < input name = "1" type = "text" value = "SITE1" > < input name = "GFG" type = "text" value = "w3wiki" > < input name = "2" type = "text" value = "SITE2" > < input name = "3" type = "text" value = "SITE3" > < input name = "GFG" type = "text" value = "w3wiki" > < input name = "4" type = "text" value = "SITE4" > < input name = "GFG" type = "text" value = "w3wiki" > < br >< br > < button >Change color</ button > </ body > </ html > |
Output:
Contact Us