Scribd
Upload
9 views16 pages

jQuery Basics for JavaScript Development

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
9 views16 pages

jQuery Basics for JavaScript Development

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

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
• [Link] 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:
– $(“[Link](‘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(‘[Link] 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 - [Link]
• Select DOM elements by:
– DOM element, e.g., p, li, div
– Element id name
– Element attribute, e.g., href
– Attribute value, e.g., href=“[Link]”
– 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
• [Link]/jQuery
• [Link]
• Included with [Link] MVC
– See Script folder

Common questions

Powered by AI

The use of AJAX in jQuery enhances web application performance by allowing parts of a webpage to be updated asynchronously without needing to reload the entire page. This results in faster interaction and a more dynamic user experience, as the browser can communicate with the server to fetch or push data without interrupting user activity. Consequently, it reduces server load and improves page responsiveness, as only necessary data is transferred .

Filters in jQuery play a critical role in refining the selection of elements for DOM manipulation. They allow developers to narrow down search results after an initial selection using conditions like `:first`, `:last`, or `:gt()`. By applying filters, developers can target specific elements based on their order, content, or attributes, making it easier to perform precise operations, such as styling or data extraction, on the elements of interest .

jQuery simplifies creating interactive web elements by providing a simplified syntax for selecting DOM elements and applying effects or handling events. Unlike basic JavaScript, where direct DOM manipulation requires detailed and potentially complex scripting, jQuery uses concise methods, like `$(selector)` for easy element targeting, and offers chaining to apply multiple actions in a readable fashion. This reduces the amount of code developers need to write to achieve similar functionalities .

jQuery's chaining capability enhances code efficiency and readability by allowing multiple methods to be applied to the same set of selected elements in a single statement. By chaining methods, developers can avoid writing repetitive code blocks or storing intermediate results, which makes the code more concise and easier to follow. This reduces the complexity of scripts, aids in debugging, and maintains structured and clean codebases .

Chaining in jQuery can influence the architectural design of a web application's client-side script by promoting modularity, reducing redundancy, and enhancing the maintainability of the code. By encapsulating multiple statements into a single chain, developers can decrease the number of intermediary variables and streamline operations, which leads to cleaner and more organized scripts. This modular approach supports better scalability and easier code management as applications grow in complexity .

jQuery contributes to the development of extensible web applications through its built-in support for plugins and custom extensions. Developers can build reusable plugins that enhance existing jQuery functionalities, such as adding complex components like calendars and grids. This extensibility allows teams to create modular, maintainable codebases by sharing custom solutions and integrating additional features without altering the core library .

jQuery's CSS selector syntax improves the development of dynamic styles and layouts by enabling easy selection and manipulation of HTML elements. Developers can target elements by tags, IDs, classes, and attributes similar to CSS, using shorthand expressions that are easy to read and write. This allows for quick styling changes and layout adjustments directly within the script, facilitating dynamic and responsive design .

The `animate()` function in jQuery significantly impacts user interface design by enabling developers to create fluid, visually appealing transitions and animations with minimal code. This function allows for the gradual change of CSS properties, offering a wide range of customization in terms of duration, easing, and step-by-step execution. By facilitating complex visual effects easily, `animate()` enhances the user's experience, drawing attention to specific elements and improving overall navigation and engagement with the page .

jQuery enhances cross-browser compatibility by providing a consistent API that abstracts away the differences in how browsers implement JavaScript DOM manipulation. It includes support for legacy browsers and ensures that scripts work reliably across Chrome, Firefox, Edge, IE, Safari, and Opera. This allows developers to write their code once and have it function the same way across different browsers, without having to implement browser-specific handling .

Event handling in jQuery differs from traditional DOM event handling in JavaScript by abstracting the complexities associated with event binding, especially across different browsers. jQuery provides simple and consistent methods, such as `.click()` or `.hover()`, that manage cross-browser inconsistencies behind the scenes. Traditional JavaScript requires explicit event listener attachments and more effort to handle browser-specific event models, whereas jQuery standardizes the process, allowing developers to focus more on functionality .

You might also like