Scribd
Upload
3 views

J Query

Web development

Uploaded by

jayaparida25
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

J Query

Web development

Uploaded by

jayaparida25
Copyright
© © All Rights Reserved
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