Scribd
Upload
70 views

Two Ways of Starting A Jquery

Jquery allows for selecting and manipulating page elements. There are two main ways to declare Jquery - ready shorthand and document ready function. Selection is done using syntax like $(“selector”). Common selectors include ID, element, and class selectors. More advanced selectors allow targeting elements based on attributes, descendants, siblings. Jquery filters can then be applied to selections to filter elements based on properties like even/odd, first/last, or using negation with :not.

Uploaded by

gani
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
70 views

Two Ways of Starting A Jquery

Jquery allows for selecting and manipulating page elements. There are two main ways to declare Jquery - ready shorthand and document ready function. Selection is done using syntax like $(“selector”). Common selectors include ID, element, and class selectors. More advanced selectors allow targeting elements based on attributes, descendants, siblings. Jquery filters can then be applied to selections to filter elements based on properties like even/odd, first/last, or using negation with :not.

Uploaded by

gani
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Jquery notes

Jquery declaration

Two ways of starting a jquery

1. $(document).ready(function() {
// your programming goes here
}); // end ready
2. $(function() {
// your programming goes here
}); // end ready

Selecting the page elements

Basic syntax: $(‘syntax’)

Types of selectors

1. ID selector
<p id="message">Special message</p>
to select the element
var messagePara = $('#message');
2. Element selector
var linksList = $('a')
selects all the <a> tag in the page and save it in a variable.
3. Class selector
$('.submenu')
4. Advanced selectors
a. Descendant selector
To target a tag inside another tag
$('#navBar a')
Here suppose a class navBar that has list of links this selects all those links
b. Adjacent sibling
Suppose a div tag followed by a heading h2 tag
$(‘h2 + div’)
Note: i guess this is useful when we don’t give any id or class name to the selector.
c. Attribute selector
Lets you select an element based on whether the element has a particular element.
[attribute]
$(‘a[href]’) selects <a> tags with link

[attribute=”value”]
$(‘input[type=”text”]’) selects element that have a particular attribute value, here this is
useful to select textbox

[attribute^=”value”]
$(‘a[href^=”https://”]’) selects element with attributes starting with https://

[attribute$=”value”]
$(‘a[href$=”.pdf”]’) selects element with attribute ending with .pdf

[attribute*=”value”]
$(‘a[href*=”missingmanual”]’) selects elements matching with missingmanual.com

Jquery Filters

Provides a way to filter the selections

1. :even and :odd selects alternate elements in a group


2. :first and :last selects first element in a group
$(‘p:first’); selects the first paragraph on the webpage
$(‘p:last’); select the last paragraph on the webpage
3. :not to find elements that don’t match a particular selector type
$(‘a:not([href^=https://”])’); selects <a> tag not starting with https
4.

You might also like