Scribd Logo
Upload

Welcome to Scribd!

  • Jquery

    Uploaded by

    victor othugadi
    64 views9 pages
    JQuery is a free available, opensource JavaScript Library that simplifies HTML document tr aversing, event handling, animating, and Ajax interactions for rapid web development. It is used in creating highly responsive web pages.

    Original Description:

    Original Title

    jquery

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    JQuery is a free available, opensource JavaScript Library that simplifies HTML document tr aversing, event handling, animating, and Ajax interactions for rapid web development. It is used in creating highly responsive web pages.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    64 views9 pages

    Jquery

    Uploaded by

    victor othugadi
    JQuery is a free available, opensource JavaScript Library that simplifies HTML document tr aversing, event handling, animating, and Ajax interactions for rapid web development. It is used in creating highly responsive web pages.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    jQuery is a fast and concise JavaScript Library that simplifies HTML document tr aversing, event handling, animating, and

    Ajax interactions for rapid web development. JQuery download (http://jquery.com/) Examples of JQuery Websites : 1.Google also using JQ(www.google.com). 2.Entertainment Arts uses JQ(www.ea.com). 3.wordpress(wordpress.org) 4.twitter(http://twitter.com) what is JQuery 1.JQuery is a free available, opensource javascript library. 2.JQuery is used in creating highly responsive web pages. 3.works across all modern browsers. 4.abstracts away browser-specific features,allowing you to concentrate on design . 5.JQuery focuses on simplifying common scripting tasks (i).getting and manipulating page content.(DOM:document object model). (ii).working with modern browser event model(key task). (iii).adding sophisticated transition effects like fading,animation etc. 2.Javascript has become essential to current web page development, but.., Javasc ript is not a good language design 4.Javascript has become bloated (i).DOM navigation (ii).Browser differences 5.Writing Javascript code is tedious, time-consuming, and error-prone 6.jQuery makes writing Javascript much easier (i).DOM navigation (css-like syntax) (ii).Apply methods to sets of DOM elements (iii).Builder model (chain method calls) (iv).Extensible and there are tons of libraries (v).Handles most browser differences so you don t have to

    BASIC JQuery SELECTORS (similar to Cascading Style Sheets) SELECTOR PURPOSE Tag Name Finds All Elements That Are Named Tag Na me #identifier Finds All Elements with ID of identifier .classname Finds All Elements that have class attri bute with the value of classname tag.classname Gets elements of type tag that have a cl ass attribute with the value of a class name tag#id.classname Retrieves the tag element that has an ID of id and a class attribute with the value of class name * Finds all elements in the page JQuery Vs DOM(Java Script) <html> by using DOM : <head> Get All <p> tags document.getElem

    entsByTagName("p"); <title>Document</title> by using jQuery : <script type="text/javascript" src="jquery.js"> </script> id "list1" (DOM) : <script type="text/javascript"> entById("list1"); $("document").ready(function() { id "list1" (jQuery) : }); </script> s with class "a" (jQuery) : <style type="text/css"> $(ul.a); .a { color: Navy; } .b { color: Maroon; } </style> </head> <body> <ul id="list1"> <li class="a">item 1</li> <li class="a">item 2</li> <li class="b">item 3</li> <li class="b">item 4</li> </ul> <p class="a">This is paragraph 1</p> <p>This is paragraph 2</p> <p class="b">This is paragraph 3</p> <p>This is paragraph 4</p> </body> </html>

    Get All <p> tags $("p"); Get the tag with document.getElem Get the tag with $("#list1"); Get All <li> tag $("li.a"); or

    The hierarchy and combination selectors allow you to get a little more advanced in selecting page content you can select elements based on hierarchical relationships or on a series of co mmon criteria SELECTOR PURPOSE Selector, Selector.... Finds all .class1.class2 Finds all .class2 applied parent>child Finds all ldren of elements of type parent anscestor descendant Finds all ontained within elements of type anscestor prev + next Finds all a previous elements prev ~ siblings Finds all er prev and match siblings selector JQuery FILTERS Filters work with selectors to provide even more fine-grained control over how e lements are selected in the document like position or index.

    of the specified selectors elements with both .class1 and child elements that direct chi descendant elements that are c next elements that are next to sibling elements that come aft

    FILTER :first elector's returned set :last elector's returned set :even in the selector's returned set :odd n the selector's returned set :eq(n) oned at the given index :lt(n) n index :gt(n) ven index :header .) :animated being animated in same way :not(selector) given selector jQuery ATTRIBUTES

    PURPOSE Selects only the first instance of the s Selects only the first instance of the s Selects only the even-numbered elements Selects only the odd-numbered elements i Filters out elements that are not positi Includes elements that are past the give Includes elements that are before the gi Selects all header elements(h1,h2,h3 etc Selects all elements that are currently Includes elements that do not match the

    You can filter the results of a selector statement based on attribute content FILTER [attribute] hey have the specified attribute [attribute=value] hey have the specified attribute and it PURPOSE Includes elements in the result set if t Includes elements in the result set if t has

    the given value [attribute!=value] Includes elements in the result set only if they have the specified attribute and [attribute^=value] d attribute and it starts with the it doesn't have the given value Includes elements that have the specifie

    specified value [attribute$=value] Includes elements that have the specifie d attribute and it ends with the specified value [attribute*=value] Includes elements that have the specifie d attribute and it contains the specified [attrFilter1][attrFilterN] specified attribute filters value Includes elements that match all of the

    CONTENT AND VISIBILITY FILTERS You can examine the content of selected elements or their visibility property to determine whether they should be included

    or excluded from the final set CONTENT FILTER PURPOSE :contains(text) Filters ements that contains the text string :empty Filters pty elements :has(selector) Matches ne element that has the specified selector :parent Matches e. they contain atleast one other element,including text) VISIBILITY SELECTORS :visible sible elements :hidden dden elements CHILD FILTERS FILTER PURPOSE :nth-child(index) Matches elements at index, or even or od d imcrements, or who match an equation :nth-child(even) of the form Xn+M (for example, 2n or 3n +1) :nth-child(odd) :nth-child(equation) :first-child Matches elements who are the first child of their parent :last-child Matches elements who are the last child of their parent :only-child Matches elements who are the only child of their parent FORM FILTERS you can use form selectors to deal with Form elements They work like other selectors but start with a colon(:) like a regular filter SELECTOR :input on elements :text :password :radio :checkbox :submit :reset :button :image :file PURPOSE Finds all input,select,textarea,and butt Finds Finds Finds Finds Finds Finds Finds Finds all text elements all password elements all radio button elements all checkbox elements all submit elements all reset elements all button elements all image elements Finds all file upload elements PURPOSE Filters the selection to only include vi Filters the selection to only include hi

    the selection to only include el the selection to only include em elements that contains atleast o all elements that are parents(i.

    you can also perform additional filtering of form elements,such as whether items are checked,selected,or enabled SELECTOR PURPOSE

    :enabled ed :disabled led :checked ed(radio buttons and checkboxes) :selected ted TRAVERSING DOCUMENT INFORMATION

    Matches all form elements that are enabl Matches all form elements that are disab Matches all form elements that are check Matches all form elements that are selec

    You can traverse the information returned from a document easily FUNCTION/PROPERTY PURPOSE size().length The number of elements in the jQuery res ult set get() Returns an array of all matched DOM elem ents.Useful if you need to operate on the DOM elements themselves instead of usin g built-in jQuery functions get(index) specified index in the matched set find(expression) tch the specified expression each(fn) f every matched element Access a single matched DOM element at a Searches for descendant elements that ma Execute a function with in the context o

    MANIPULATING PAGE CONTENT MANIPULATING CONTENT : Overview Once you have used selectors and filters to retrieve web page content,you usuall y want to do something with it Some times you want to create new content to dynamically add into the page jQuery has functions for creating,copying,deleting,and moving content around,as well as wrapping page content in other content jQuery provides cross-browser support for working with css ,including positionin g and sizing information CREATING, SETTING and GETTING Content To create new HTML element,you simply pass a string containing new HTML to the $ () function: var mystr=$("<h1>this is a HTML element</h1>"); var mystr="<h1>this is a HTML element</h1>"; var newelement=$(mystr); In addition to this method,you can use the html() and text() methods to get and set content on

    FUNCTION html() tched element html(newcontent) lement text() tched element text(newtext) ements MANIPULATING ATTRIBUTES

    PURPOSE Returns the HTML content of the first ma Sets the HTML content of every matched e Returns the text content of the first ma Sets the text content for all matched el

    To inspect or change the value of attribute on elements, use jQuery's attr funct ions FUNCTION attr(name) lement.This method makes it easy to t matched element.If the element doesn't have an attribute with such a name,unde fined is returned attr(properties) ed elements using an object notation g large numbers of properties at once attr(key,value) matched elements attr(key,fn) on all matched elements.Instead of provided that computes the value of the removeAttr(name) matched elements INSERTING CONTENT jQuery provides several functions for inserting content in the document,both bef ore and after existing page elements FUNCTION append(content) atched element appendTo(selector) nother,specified set of elements prepend(content) matched element prependTo(selector) another,specified set of elements after(content) d elements PURPOSE Appends content to the inside of every m Appends all of the matched elements to a Prepends content to the inside of every Prepends all of the matched elements to Inserts content after each of the matche attribute Removes the named attribute from all the Sets a series of attributes on all match syntax.This is the best used for settin Sets a single property to a value on all Sets a single property a computed value, supplying a string value,a function is PURPOSE Accesses property on the first matched e retrieve a property value from the firs

    before(content) ed elements insertAfter(selector) r another,specified set of elements insertBefore(selector) re another,specified set of elements WRAPPING,REPLACING,REMOVING CONTENT

    Inserts content before each of the match Inserts all of the matched elements afte Inserts all of the matched elements befo

    jQuery can warp the existing content in the page,replace content,copy content, a nd remove it FUNCTION PURPOSE wrap(html) Wraps each matched element with the spec ified HTML content wrap(element) Wraps each matched element with the spec ified content wrapAll(html) Wraps all the elements in the matched se t with the specified HTML content wrapAll(element) Wraps all the elements in the matched se t into a single wrapper element wrapInner(html) Wraps the inner child contents of each m atched element (including text nodes) with an HTML structure wrapInner(element) Wraps the inner child contents of each m atched element (including text nodes) with an DOM structure replaceWith(content) Replaces all matched elements with the s pecified HTML or DOM elements replaceAll(selector) Replaces the elements matched by the spe cified selector with the matched elements empty() Removes all child nodes from the set mat ched elements remove() Removes all matched elements from the DO M clone() Clone matched DOM elements and selects t he clones WORKING WITH CSS INFORMATION jQuery's CSS functions provide easy,cross-browser access for setting properties and working with positioning and sizing information The css function allows you to retrieve and set CSS styles for a set matched ele ments FILTER css(name) erty for the first matched element css(properties) element Using an object-notation PURPOSE Returns the value for the named CSS prop Sets the CSS properties of every matched syntax: var cssObj={ 'background-color':'red' } $(this).css(cssObj);

    css(property,value) Sets a single style property to a value on all matched elements.If a number is provided,it is automatically converted into a pixel value,with the following exceptions: z-index,font-weight,opacity ,zoom,and line-height WORKING WITH CSS CLASSES jQuery provides a set of functions for working with CSS clases on page elements classes can be easily added,removed,toggled,and detected CSS FUNCTIONS PURPOSE addClass(class) Adds the specified class(es) to each of the set of matched elements hasClass(class) Determine whether any of the matched ele ments are assigned the given class removeClass(class) Remove a single class, multiple classes, or all classes from each element in the set of matched elements toggleClass(class) Add or remove one or more classes from e ach element in the set of matched elements, depending on either the class's presenc e or the value of the switch argument WORKING WITH CSS POSITIONING The CSS positioning functions for provide cross-browser support for figuring out the positions of elements CSS FUNCTIONS PURPOSE offset() Get the current coordinates of the first element in the set of matched elements, relative to the document offsetParent() Get the closest ancestor element that is positioned position() Get the current coordinates of the first element in the set of matched elements, relative to the offset parent scrollTop() Get the current vertical position of the scroll bar for the first element in the set of matched elements scrollLeft() Get the current horizontal position of t he scroll bar for the first element in the set of matched elements WORKING WITH CSS SIZING INFORMATION To retrieve cross-browser information for elements,use the jQuery size-related f unctions

    CSS FUNCTIONS PURPOSE height() Get the current computed height for the first element in the set of matched elements width() Get the current computed width for the f irst element in the set of matched elements innerHeight() Get the current computed height for the first element in the set of matched elements,including padding but not bord er innerWidth() irst element in the set of matched er outerWidth() irst element in the set of matched outerHeight() first element in the set of matched d optionally margin Get the current computed width for the f elements,including padding but not bord Get the current computed width for the f elements,including padding and border Get the current computed height for the elements, including padding, border, an

    You might also like