From 838112967bfd668e905bdff413ac6c81eb7417fe Mon Sep 17 00:00:00 2001 From: Rayon Date: Sat, 16 Mar 2019 12:02:43 +0530 Subject: [PATCH] Added Attribute Selectors (#26789) Attribute selectors added with example. --- guide/english/jquery/jquery-selectors/index.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/guide/english/jquery/jquery-selectors/index.md b/guide/english/jquery/jquery-selectors/index.md index 3fce3a112b..f39d70b996 100644 --- a/guide/english/jquery/jquery-selectors/index.md +++ b/guide/english/jquery/jquery-selectors/index.md @@ -105,6 +105,21 @@ There are also selectors that act as filters - they will usually start with colo $("li:first").css("color", "green"); ``` + +### Attribute Selector +There are selectors that return elements which matches certain combinations of Attributes like _Attribute contains_, _Attribute ends with_, _Attribute starts with_ etc. Here's an example of an unordered list with some list items. The jQuery selector below the list selects the `
  • ` element in the list--the "One" list item as it has `data*` attribute as `"India"` as its value--and then uses the `.css` method to turn the text green. + +```html + +``` +```javascript +$("li[data-country='India']").css("color", "green"); +``` + **Note:** Don't forget that applying css in JavaScript is not a good practice. You should always give your styles in css files. Another filtering selector, `:contains(text)`, selects elements that have a certain text. Place the text you want to match in the parentheses. Here's an example with two paragraphs. The jQuery selector takes the word "Moto" and changes its color to yellow.