What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...Edureka!
( ** Full Stack Masters Training: https://www.edureka.co/masters-program/full-stack-developer-training ** )
This PPT on jQuery will help you understand the basics of jQuery and you will also be able to create your own program using jQuery by the end of this PPT.
Follow us to never miss an update in the future.
Instagram: https://www.instagram.com/edureka_learning/
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. This tutorial covers all the important jQuery methods to create visual effects.
What is JavaScript?
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
A JavaScript function is a block of code designed to perform a particular task.
Why Functions?
You can reuse code: Define the code once, and use it many times. You can use the same code many times with different arguments, to produce different results.
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...Edureka!
( ** Full Stack Masters Training: https://www.edureka.co/masters-program/full-stack-developer-training ** )
This PPT on jQuery will help you understand the basics of jQuery and you will also be able to create your own program using jQuery by the end of this PPT.
Follow us to never miss an update in the future.
Instagram: https://www.instagram.com/edureka_learning/
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. This tutorial covers all the important jQuery methods to create visual effects.
What is JavaScript?
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
A JavaScript function is a block of code designed to perform a particular task.
Why Functions?
You can reuse code: Define the code once, and use it many times. You can use the same code many times with different arguments, to produce different results.
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.
Leap motion is a computer hardware sensor device that supports hand and finger motions as input, analogous to a mouse, but requires no hand contact or touching.
Project Seminar on Leapmotion TechnologyAbhijit Dey
This slideshow contains details about the technology packed in the Leapmotion Controller, a gesture tracking device, which can detect your hand gestures and finger movements to navigate and use different desktop or laptop apps on Windows and Mac.
We have touched as many as topics of JQuery. We have targeted almost all sections of Jquery except Ajax events and response.
Below topics are covered in this presentation:
1. Selectors
2. Events
3. Effects
4. Traversing
5. noConflict()
Kotlin is a statically typed programming language for the JVM, Android and the browser.
More and more in the Android community start using Kotlin, we’ll see why and how you can do it too.
In this intro-level session on utilizing jQuery with SharePoint, the focus will be to empower users on how to satisfy some of the common UI changes clients request by writing clean and unobtrusive Javascript with the help of the jQuery library. We'll begin by diving into the different ways that jQuery can be hooked up to SharePoint. We'll talk about CDN versus local copies of the library, as well as linking jQuery via masterpages, custom actions, content editor web parts, and more.
We'll then spend time discussing css selectors, and some of the common patterns and jQuery methods you'll want to familiarize yourself with when targeting page-level elements. After that, the remainder of the presenation will be focused on walking through real-life scenarios of altering the UI with jQuery, such as adding interaction and animation to content query webparts, changing the behavior of links inside a page, and more. The code utilized in the presentation will be made available online after the Conference is completed.
Revenge of the 80s: Cut/Copy/Paste, Undo/Redo, and More Big Hits (CocoaConf C...Chris Adamson
When the first 128K Macs landed in 1984, it was the first time many of us could undo a mistake with just a keystroke, or exchange data between documents or applications with cut/copy/paste and the system clipboard. Fast forward 30 years and we all use this stuff… but do you know how to actually impement it? Especially on iOS, these everyday features are surprisingly absent from many developers' toolchests. In this session, we'll flashback to the era of Reagan, Rubik's Cubes, and Return of the Jedi, to see these hot hits of the early 80's are represented in modern-day Cocoa.
Mobile applications Development - Lecture 12
Javascript
jQuery (Zepto)
useful microframeworks
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
2. WHAT IS JQUERY?
jQuery is a fast, small, and feature-rich JavaScript library. It
makes things like HTML document traversal and manipulation, event
handling, animation, and Ajax much simpler with an easy-to-use API
that works across a multitude of browsers. With a combination of
versatility and extensibility, jQuery has changed the way that millions of
people write JavaScript.
2
3. WHY IS JQUERY AWESOME?
What jQuery does well:
1.
2.
3.
4.
5.
Simplified AJAX
DOM Manipulation
Event Management
Animations
Normalizes Browser Differences
Why It Is Successful:
1.
2.
3.
4.
5.
Well Designed
Easy to extend with plugins
Great Documentation
Large jQuery Community
Cross-browser
3
7. SAMPLE JQUERY
Our DOM
Include jQuery
The „ready event‟ – Binds a function to
be executed whenever the DOM is
ready
Select the „toggleContent‟ DOM
element and bind a click event
handler to it.
Select the „content‟ DOM element and
set the text to „Hello World!‟
Prevent the default behavior of the
anchor tag by returning false
7
8. DOLLAR FUNCTION $();
• JavaScript identifiers can start with $
• The jQuery framework automatically assigns „$‟ to the „jQuery‟
function
$ === jQuery true
$(selector) is same as jQuery(selector)
• Can use utility function to unassign $
$.noConflict();
$ === jQuery;
false
• Can reassign jQuery to another variable
$j = $.noConflict();
$j === jQuery;
true
$j === $;
false
8
$ === jQuery;
false
9. DOCUMENT READY EVENT
• $(document).ready(fn);
• The bound function will be called the instant the
DOM is ready to be read and manipulated.
• As many as you want on the page.
• Executed in the order they were added.
• There is a shortcut: $(fn);
9
10. SELECTORS
CSS3 Selectors
jQuery
Selects…
$(„#myId‟)
By ID
$(„div‟)
By Element Type
$(„.myClass‟)
By Class
$(„div, span, p.myClass, #myid‟)
Multiple
$(„*‟)
All
$(„.myClass‟, this), $(„p.myClass‟)
By Context (better performance)
$(„#main div‟)
Descendents (all levels)
$(„#main > div‟)
Children (first level)
$(„label + input‟)
The immediate element after
$(„#prev ~ div‟)
The first element after
$(„div[id]‟)
All elements that have the specified attribute
$(„input[type=text]‟)
By Attribute value
10
11. FILTERS
$(„div:empty‟), $(„:empty‟), $(„div:not(:empty)‟)
jQuery
Filters…
:first, :last, :nth(n)
First, Last, Nth Element
:odd, :even
Odd, Even Elements
:visible, :hidden
Visible, Hidden Elements
:enabled, :disabled
Enabled, Disabled Elements
:contains(“text”)
Contains specified text
:empty
Elements w/ no children (or text)
:first-child, :last-child, :nthchild(n)
Child Element
:lt(n), :gt(n)
Elements w/ index below or after
:not(selector)
Does not match selector
:MyCustomFilter
Custom Filters (Implement your own!)
Custom Filter Used
11
12. CHAINING
• Most jQuery methods return another jQuery object (usually the same
collection), which means you can chain method calls together with a
fluent like syntax
• Some methods that stop a chain, these methods return a value from the
jQuery object
.css(name), .text(), .html(), .val(), .height(), .width(), .is(„:visible‟)
• Some methods will return a different jQuery collection, you can revert
to the previous collection by calling .end();
12
13. ATTRIBUTES & CLASSES
• Getters & Setters for attr, html, text, val
• Getter (returns String – breaks chain)
var text = $(„#myDiv‟).text();
• Setter (returns jQuery)
$(„#myDiv‟).text(„Hello World!‟);
• text() escapes html()
• val() used with inputs
• attr() can take JSON
• Add, Remove for Attributes & Classes
• .removeAttr(„someAttr‟);
• .addClass(„someClass‟);
• .removeClass(„someClass‟);
• .toggleClass(„someClass‟);
13
15. EVENTS
.bind(type, data, fn)
• Binds a handler to an event on all matched elements
.one(type, data, fn)
• Binds a handler to be executed only once for each matched element
.trigger(event, data)
• Trigger an event to occur on all matched elements
.unbind(type, fn)
• Removes event handlers from all matched elements
.live(type, fn)
• Binds a handler to an event on all currently matched and future matched elements.
.die(type, fn)
• Removes a bound live event.
.hover(fnOver, fnOut)
• Interaction helper that will handle mouseover and mouseout
.toggle(fn1, fn2, fn3, fnN, …)
• Interaction helper that will toggle among two or more function calls every other click.
15
19. PLUG-INS
• Extremely Simple – Promotes code reuse and DRY principle
$.fn.MyPlugin = function(params) {};
• Return a jQuery object to prevent from “breaking the chain”
• Unless you are returning a specific value
• Best Practice is to wrap the plug-in declaration within an anonymous
JavaScript function in order to prevent collisions with the use of $
19
20. UTILITY FUNCTIONS
• Array and Object Operations
$.each(object, callback) – Callback function will run for each item in the object. The each method
is meant to be an immutable iterator and returns the original array.
$.map(array, callback) – Callback function will run for each item in the array. The map method
can be used as an iterator, but is designed to be used for manipulation of the supplied array
and returns a new array.
$.merge(first, second) – Merges the second array into the first array.
$.unique(array) – Removes duplicate elements (only works on arrays of DOM elements).
$.extend(object) – Add functions into the jQuery namespace.
$.extend(deep, target, object1, objectN) – Merge values from objects 1 to N into target object.
Deep is an optional boolean that if true, tells jQuery to do a deep copy.
$.grep(array, callback, invert) – Iterates through array, and returns a new array with values from
the original array that satisfy the criteria specified in the callback.
$.inArray(value, array) – Gets the index of the value in the array (-1 if not found).
• String Operations
$.trim(str) – Removes whitespace from the given string.
• Test Operations
$.isArray(obj) – Determines if the object is an array.
$.isFunction(obj) – Determines if the object is a function.
20
21. JQUERY DATA
• Can store data on one or more jQuery elements
• .data(name, value)
• value is an object
• Retrieves data from the first element in the jQuery object
• .data(name)
21
22. RESOURCES
• jQuery Main
•
http://jquery.com
•
http://docs.jquery.com/Downloading_jQuery
• jQuery API Documentation
•
http://api.jquery.com
•
http://docs.jquery.com
• jQuery UI
•
http://jqueryui.com
•
http://jqueryui.com/themeroller/
• jQuery Blog
•
http://blog.jquery.com/
• Around The Web
•
•
http://www.nettuts.com
•
•
http://stackoverflow.com
http://www.smashingmagazine.com
Tools
•
Visual Studio JavaScript Intellisense Support (KB958502)
•
http://getfirebug.com/ (Firebug Firefox Plug-in)
•
http://jsbin.com/ (JS Bin - Collaborative JavaScript Debugging)
22
23. THANK YOU
Even a correct decision is wrong when it was taken too
late.
any Queries?
23