The [attribute^=value] selector is used to select all elements with given attribute specified by attribute parameter that starts with the word specified by value parameter.
Syntax:
$("[attribute^='value']")
Parameters: This selector contains two parameter which are listed below:
- attribute: It is used to specify the attributes which need to select (any html element).
- value: It contains the string from which the value of every selected element’s value should start.
Return Value: It returns an array of all selected elements.
Example 1: This example uses [attribute^=value] selector to select those elements whose class name starts with top.
<!DOCTYPE html> < html > < head > < title > jQuery [attribute^=value] Selector </ title > < script src = </ script > </ head > < body > < h3 class = "top-heading" > Welcome to GeeksforGeeks </ h3 > < p class = "top-content" > A Computer Science portal for geeks.< br /> It contains well written, well thought and well explained< br /> computer science and programming articles </ p > < p class = "topcoder" > Competitive programming is not tough. </ p > < p class = "be-on-top" > Every one should learn Programming. </ p > <!-- Script to use attribute^=value selector --> < script > $(document).ready(function() { var select = $("[class^='top']") select.css({ background:"green" }) }); </ script > </ body > </ html > |
Output:
Example 2: This example uses [attribute^=value] selector to select those elements whose class name starts with top.
<!DOCTYPE html> < html > < head > < title > jQuery [attribute^=value] Selector </ title > < style > div{ width: 50px; height:50px; background-color: yellow; margin: 20px; } </ style > </ head > < body > <!-- All div selected whose class starts with top --> < div class = "top" > One </ div > < div class = "top-only" > Two </ div > < div class = "top second-class" > Three </ div > < div class = "first top" > Four </ div > < div class = "first top third" > Five </ div > < script src = </ script > <!-- Script to use [attribute^=value] selector --> < script > $(document).ready(function() { var select = $("[class^='top']"); select.css({ background: "green" }); }); </ script > </ body > </ html > |
Output:
leave a comment
0 Comments