Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Tuesday, October 6, 2020

JQuery Selectors




Today we will discuss the JQuery Selectors 

jQuery selectors are one of the most important parts of the jQuery library.


JQuery Selecters

jQuery selectors are used to find HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. The selectors based on css selecters .

  • All selectors in jQuery start with the dollar sign and parentheses: $().
  • In other terms you are adding the TAG Name ,TAG ID ,TAG,Class
    
Syntax:-

        $(selector expression, context)
            
        jQuery(selector expression, context)

Example:-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me to hide paragraphs</button>

</body>
</html>

How To Use The Selectors
S.No.SelectorDescription
1)Name:It selects all elements that match with the given element name.
2)#ID:It selects a single element that matches with the given id.
3).Class:It selects all elements that matches with the given class.
4)Universal(*)It selects all elements available in a DOM.
5)Multiple Elements x,y,zIt selects the combined results of all the specified selectors x,y and z.


Some Other JQuery Selectors
SelectorExampleDescription
*$("*")It is used to select all elements.
#id$("#firstname")It will select the element with id="firstname"
.class$(".primary")It will select all elements with class="primary"
class,.class$(".primary,.secondary")It will select all elements with the class "primary" or "secondary"
element$("p")It will select all p elements.
el1,el2,el3$("h1,div,p")It will select all h1, div, and p elements.
:first$("p:first")This will select the first p element
:last$("p:last")This will select he last p element
:even$("tr:even")This will select all even tr elements
:odd$("tr:odd")This will select all odd tr elements
:first-child$("p:first-child")It will select all p elements that are the first child of their parent
:first-of-type$("p:first-of-type")It will select all p elements that are the first p element of their parent
:last-child$("p:last-child")It will select all p elements that are the last child of their parent
:last-of-type$("p:last-of-type")It will select all p elements that are the last p element of their parent
:nth-child(n)$("p:nth-child(2)")This will select all p elements that are the 2nd child of their parent
:nth-last-child(n)$("p:nth-last-child(2)")This will select all p elements that are the 2nd child of their parent, counting from the last child
:nth-of-type(n)$("p:nth-of-type(2)")It will select all p elements that are the 2nd p element of their parent
:nth-last-of-type(n)$("p:nth-last-of-type(2)")This will select all p elements that are the 2nd p element of their parent, counting from the last child
:only-child$("p:only-child")It will select all p elements that are the only child of their parent
:only-of-type$("p:only-of-type")It will select all p elements that are the only child, of its type, of their parent
parent > child$("div > p")It will select all p elements that are a direct child of a div element
parent descendant$("div p")It will select all p elements that are descendants of a div element
element + next$("div + p")It selects the p element that are next to each div elements
element ~ siblings$("div ~ p")It selects all p elements that are siblings of a div element
:eq(index)$("ul li:eq(3)")It will select the fourth element in a list (index starts at 0)
:gt(no)$("ul li:gt(3)")Select the list elements with an index greater than 3
:lt(no)$("ul li:lt(3)")Select the list elements with an index less than 3
:not(selector)$("input:not(:empty)")Select all input elements that are not empty
:header$(":header")Select all header elements h1, h2 ...
:animated$(":animated")Select all animated elements
:focus$(":focus")Select the element that currently has focus
:contains(text)$(":contains('Hello')")Select all elements which contains the text "Hello"
:has(selector)$("div:has(p)")Select all div elements that have a p element
:empty$(":empty")Select all elements that are empty
:parent$(":parent")Select all elements that are a parent of another element
:hidden$("p:hidden")Select all hidden p elements
:visible$("table:visible")Select all visible tables
:root$(":root")It will select the document's root element
:lang(language)$("p:lang(de)")Select all p elements with a lang attribute value starting with "de"
[attribute]$("[href]")Select all elements with a href attribute
[attribute=value]$("[href='default.htm']")Select all elements with a href attribute value equal to "default.htm"
[attribute!=value]$("[href!='default.htm']")It will select all elements with a href attribute value not equal to "default.htm"
[attribute$=value]$("[href$='.jpg']")It will select all elements with a href attribute value ending with ".jpg"
[attribute|=value]$("[title|='Tomorrow']")Select all elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
[attribute^=value]$("[title^='Tom']")Select all elements with a title attribute value starting with "Tom"
[attribute~=value]$("[title~='hello']")Select all elements with a title attribute value containing the specific word "hello"
[attribute*=value]$("[title*='hello']")Select all elements with a title attribute value containing the word "hello"
:input$(":input")It will select all input elements
:text$(":text")It will select all input elements with type="text"
:password$(":password")It will select all input elements with type="password"
:radio$(":radio")It will select all input elements with type="radio"
:checkbox$(":checkbox")Itwill select all input elements with type="checkbox"
:submit$(":submit")It will select all input elements with type="submit"
:reset$(":reset")It will select all input elements with type="reset"
:button$(":button")It will select all input elements with type="button"
:image$(":image")It will select all input elements with type="image"
:file$(":file")It will select all input elements with type="file"
:enabled$(":enabled")Select all enabled input elements
:disabled$(":disabled")It will select all disabled input elements
:selected$(":selected")It will select all selected input elements
:checked$(":checked")It will select all checked input elements
 
Next -JQuery Effects




at No comments:
Labels: , , , ,

Thursday, September 24, 2020

CSS Syntex And Selectors

 






    CSS Syntax 

                     A CSS rule-set consists of a selector and a declaration block:

                

  •  The selector points to the HTML element you want to style.
  •  The declaration block contains one or more declarations separated by semicolons.
  •  Each declaration includes a CSS property name and a value, separated by a colon.
  •  Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. 
      EXAMPLE:-
        
            p{
                color:red;
                text-align:center;
              }

    Example Explain-

  1.     P is a selector in CSS (it points to the HTML element you want to style: <p>).
  2.    Color is a property, and red is the property value.
  3.    Text-align is a property, and center is the property value.


     CSS SELECTORS

         CSS selectors are used to "find" (or select) the HTML elements you want to style.

       We can divide CSS selectors into five categories:
  1. Simple selectors(simple selector based on name, id, class)   
  2. Combinator selector (Combinator selector based on a specific relationship between them) .
  3. Pseudo-class selectors (Pseudo-class selector based on a certain state)  .
  4. Pseudo-element selectors (select and style a part of an element).
  5. Attribute selectors (select elements based on an attribute or attribute value)

    1. CSS Element Selector    

      The element selector selects HTML elements based on the element name.

      Example- 

        Here, all <p> elements on the page will be center-aligned, with a red text color:
          p{
                color:red;
                text-align:center;
              }
       
   2. CSS ID Selector - 
  • The id of an element is unique within a page, so the id selector is used to select one unique element!
  • To select an element with a specific id, write a hash (#) character, followed by the id of the element.
  •  The id selector use the id attribute of an HTML element to select a specific element 
       Example-
    he CSS rule below will be applied to the HTML element with id="shiva": 

      #shiva {
                color:red;
                text-align:center;
              }

   3. CSS Class Selector - 

  •  The class selector selects HTML elements with a specific class attribute.

  • To select elements with a specific class, write a period (.) character, followed by the class name.

         Example-
        In this example all HTML elements with class="shiva" will be red and 
         center-aligned: 
    
          . shiva {
                color:red;
                text-align:center;
              }
    HTML elements can also refer to more than one class.

    In this example the <p> element will be styled according to class="center" and 
    to class="large": 

    <p class="center large">This paragraph refers to two classes.</p>

    1  . center {
                color:red;
                text-align:center;
              }
    2 .large{
                color:red;
                text-align:center;
              }
    Note: A class name cannot start with a number!

  4. CSS Universal Selector - 

        The universal selector (*) selects all HTML elements on the page.

        <!DOCTYPE html>
        <html>
        <head>
        <style>
        * {
              text-align: center;
              color: blue;
            }
        </style>
        </head>
        <body>

        <h1>Hello world!</h1>

        <p>Every element on the page will be affected by the style.</p>
        <p id="shiva">Me too!</p>
        <p>And me!</p>

        </body>
        </html>

   5.  CSS Grouping Selector -   

  •  The grouping selector selects all the HTML elements with the same style definitions.
  •  Look at the following CSS code (the h1, h2, and p elements have the same   style definitions):
here you can see the all the tags h1,h2,and p tag know have same css but there is no grouping 

    h1 {
      text-align: center;
      color: red;
    }

    h2 {
      text-align: center;
      color: red;
    }

    p {
      text-align: center;
      color: red;
    }

 here you can see the grouping all the tags and apply CSS

    It will be better to group the selectors, to minimize the code.

    To group selectors, separate each selector with a comma.


        <!DOCTYPE html>
        <html>
        <head>
        <style>
        h1, h2, p {
          text-align: center;
          color: red;
        }
        </style>
        </head>
        <body>

        <h1>Hello World!</h1>
        <h2>Smaller heading!</h2>
        <p>This is a paragraph.</p>

        </body>
        </html>

   

    CSS Combinators

        A CSS selector can contain more than one simple selector. Between the 
      simple selectors, we can include a combinator.

    There are four different combinators in CSS:
  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)
     First we describe the descendant selector 

    
   1. Descendant Selector- The descendant selector matches all elements that are                  descendants of a specified element.

     The following example selects all <p> elements inside <div> elements: 

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    div p {

      background-color: yellow;

    }

    </style>

    </head>

    <body>

    <div>

      <p>Paragraph 1 in the div.</p>

      <p>Paragraph 2 in the div.</p>

      <section><p>Paragraph 3 in the div.</p></section>

    </div>

    <p>Paragraph 4. Not in a div.</p>

    <p>Paragraph 5. Not in a div.</p>

    </body>

    </html>

    2. Child Selector- The child selector selects all elements that are the children of a                                    specified element.

The following example selects all <p> elements that are children of a <div>element:


    <!DOCTYPE html>

        <html>

        <head>

        <style>

            div > p {

          background-color: yellow;

            }

        </style>

        </head>

        <body>

        <div>

          <p>Paragraph 1 in the div.</p>

          <p>Paragraph 2 in the div.</p>

          <p>Paragraph 4 in the div.</p>

       </div>

           <p>Paragraph 5. Not in a div.</p>

            <p>Paragraph 6. Not in a div.</p>

        </body>

        </html>


      3. Adjacent Selector-The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and "adjacent" means"immediately following".

The following example selects all <p> elements that are placed immediately after<div>elements:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
        div + p {
          background-color: yellow;
        }
    </style>
    </head>
    <body>
    <div>
          <p>Paragraph 1 in the div.</p>
          <p>Paragraph 2 in the div.</p>
    </div>
        <p>Paragraph 3. Not in a div.</p>
        <p>Paragraph 4. Not in a div.</p>
    </body>
    </html>


    4. General Sibling Selector-
        The general sibling selector selects all elements that are siblings of a specified  element.
        The following example selects all <p> elements that are siblings of 
        <div> elements:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div ~ p {
      background-color: yellow;
    }
    </style>
    </head>
    <body>
    <p>Paragraph 1.</p>
    <div>
      <p>Paragraph 2.</p>
    </div>
    <p>Paragraph 3.</p>
    <code>Some code.</code>
    <p>Paragraph 4.</p>
    </body>
    </html>





at No comments:
Labels: ,
Subscribe to: Comments (Atom)

Jquery Hide,Show,Toggel Effects

  jQuery hide() Method   The jQuery  if you want to hide the any content or any think then use method   Syntax :           $(selector).hide(...

  • HTML Color
    Hello Guys ...... Every one mind have a question About HTML colors .Today I will Discuss you all the Question and Answer  What is Html Color...
  • JQuery Selectors
    Today we will discuss the JQuery Selectors  jQuery selectors are one of the most important parts of the jQuery library. JQuery Selecters jQu...
  • html tags
      hTML-Text-Tags hello guys, Today we will learn about the html text tags. you can watch here  my  previous blogs click here to get basic in...