Scribd
Upload
3 views

J Query

Web development

Uploaded by

jayaparida25
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

J Query

Web development

Uploaded by

jayaparida25
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

jQuery – JavaScript Library

Jim Fawcett
CSE686 – Internet Programming
Spring 2019
jQuery is a JavaScript Library
• Why use JavaScript?
– Build responsive User Interfaces
• Don’t need to query server for UI actions
• Menus, input validation, navigation
– Move processing from server to browser
• Servers are busy, browsers idle
– Use AJAX for partial updates
• Render some small part of screen instead of a full page
Why use jQuery?
• Strong cross-browser support
– Chrome, FireFox, Edge, IE, Safari, Opera
– Includes legacy browsers
• CSS selector syntax
– Easy to understand and use
• Extensible
– Your custom functionality
– Plugins, e.g., calendars, grids, …
Basics
• $(selector) is a factory method that creates
jQuery objects matching selector
• $(document).ready(function() {
$(“p”).click(function() {
$(this).hide();
});
});
CSS style Selectors
• p element name
• #id identifier
• .class classname
• p.class element with class
• pa anchor that is descendant of p
• p>a anchor that is direct child of p
XPath Selectors
• /html/body//div all divs anywhere in body
• A[@href] anchor with an href attrib.
• div[ol] div with an ordered list
• //a[@ref=“nofollow”]
any anchor with a specific
value for the ref attribute
Filters
• p:first first paragraph
• li:last last list item
• a:nth(3) fourth link
• a:eq(3) fourth link
• p:even every other paragraph
• a:gt(3) every link after 4th
• a:contains(‘click’) links containing word click
Chaining
• jQuery methods can be chained:
– $(“a.contains(‘home’)).parent().addClass(“emph”);
Changing Styles
• .ccs(‘property’,’value’)
– $(‘p’).css(‘color’,’maroon’);
• .css({‘pr1’:’val1’, ‘pr2’:’val2’, … })
Changing Markup
• $(‘<b>CSE686</b>’)
– Creates a new text node
• $(‘<b>CSE686</b>’).insertAfter(‘div.chapter p’);
– Creates element and inserts after paragraph in div
with chapter
Summary
• jQuery Supports
– Selecting and modifying DOM elements
– Adding and removing DOM elements
– Adding, editing, and removing styles from a
selected set of elements
– Adding event handlers
– AJAX: asynchronous JavaScript and XML
• Communicate with server without page refresh
Selection - W3Schools.com
• Select DOM elements by:
– DOM element, e.g., p, li, div
– Element id name
– Element attribute, e.g., href
– Attribute value, e.g., href=“some.htm”
– CSS class
– Contained text
– Properties, e.g., hidden, animated
Events and Animation Effects
Events Effects
• change • animate
• click • dequeue
• dblclick • fadeIn
• error • fadeOut
• hover • hide
• keypress • slideDown
• load • slideUp
• mouseover • toggle
• … • …
Markup and Styles
HTML Methods CSS Methods
• after() • addClass()
• append() • xss()
• attr() • hasClass()
• before() • height()
• hasClass() • position()
• html() • removeClass()
• insertAfter() • scrollLeft()
• remove() • scrollTop()
• text() • width()
• …
An Example
<script>
$(document).ready(function () {

/* add event handler to selected h2 */

$("h2").click(function(event) {
alert("got alert on heading click");
});
});
</script>
Resources
• www.w3Schools.com/jQuery
• http://jquery.com/
• Included with Asp.Net MVC
– See Script folder

You might also like