Just jQuery The Core UI - Creating Objects
source link: https://www.i-programmer.info/programming/jquery/15973-just-jquery-the-core-ui-creating-objects.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
One of the big advantages of JQuery is that it is easy to use to create DOM objects and incorporate them into existing pages.
This is an extract from my book Just jQuery The Core UI.
Available as a Book:
buy from Amazon
- Understanding jQuery
- Basic jQuery CSS Selectors
Extract: The DOM - More Selectors
Extract: Basic Selectors - The JQuery Object
- Filters
- DOM Traversal Filters
- Modifying DOM Objects
Extract: Modifying The DOM - Creating Objects & Modifying The DOM Hierarchy ***NEW!!!
- Working With Data
- Forms
- Function Queues
- Animation
- jQuery UI
- jQuery UI Custom Control
- jQuery Plugins
- Testing With QUnit
- Epilog A Bonus Function
Also Available:
buy from Amazon
jQuery provides you with methods for working with the DOM in ways powerful enough to allow you to create complete pages or custom controls that extend what you can incorporate into an HTML page. You aren't just limited to changing what is already there, you can create it from scratch.
When you first start working with jQuery there is a tendency to focus on the selector. Writing a selector that picks out the exact elements in the page that you are looking for can be a challenge. However, you really shouldn't get too bogged down in the details. You can use jQuery to find elements and then modify them, but in many cases it is as useful, and probably more useful, to use jQuery to create elements for you.
For example, it is easy to write a function that will dynamically create a table, complete with data, if this is what is required. You can also use the same techniques to build custom controls using nothing but the basic DOM elements.
We have two tasks to examine. The first is how do you create a DOM object and the second is how do you modify the existing DOM by inserting, replacing and delete DOM objects?
Making DOM Objects
jQuery makes it trivial to create a DOM object, wrapped as a jQuery object.
All you have to do is use the global jQuery function.
For example, to create a div you simply use:
var divObj=$("<div>");
Notice that you do need to include the full tag including "<>".
The command:
$("div");
is a selector that returns a jQuery object containing an array of all of the div elements in the page.
The rule is that if you make the call $(string) then, if the string parses to valid HTML, the elements it contains are created as a DOM sub-tree - more of this later.
If the string isn't valid HTML, then jQuery attempts to interpret it as a selector and to return the corresponding elements as an array in a jQuery object.
This is very convenient, but notice that it is something that can create errors that are hard to find if you don't keep in mind the difference between:
$("p")
$("<p>")
You also need to notice that to create a single DOM object you don't need a closing tag to make the HTML valid. That is, you don't have to use:
var divObj=$("<div></div>");
It works, but the closing tag is unnecessary.
The final thing to notice is that the object that is created is a jQuery object containing an array of DOM element objects, even when only one DOM object has been created.
That is:
var divObj=$("<div>")[0];
is a DOM element object corresponding to a div and not a jQuery object.
When you are creating a single HTML element object the closing tag doesn't matter, but when you are working with multiple objects it becomes vital.
If you specify more than one HTML tag then how you specify the closing tag determines how the objects are nested.
If you just write one tag after another without specifying any closing tags then each object is created as a child of the one before. For example:
var divObj=$("<div><div><p>");
creates a single object which corresponds to the sub-tree:
<div> <div> <p> </p> </div> </div>
You can create other arrangements of sub-tree by explicitly including the closing tags. For example:
var divObj=$("<div></div><div></div><p></p>");
creates an array of three DOM objects.
For example:
divObj[0];
is an object corresponding to the first div and:
divObj[2];
corresponds to the final p.
The rule is that the valid HTML is parsed to create a single object for each element at the top level, with other objects nested within it as the markup dictates.
Recommend
-
104
Go Reflection: Creating Objects from Types — Part II (Composite Types)This is part 2 of a 2 part blog series on Creating Objects from Types in Golang. This part discusses creation of composite ty...
-
29
Creating Stylish Javascript Popup This project is to demonstrate how to crate stylish popup using Javscript, jQuery and React libraries. I will designed a popup that guarantee to compatible across any type and...
-
9
-
13
Live search on JSON Objects Data Using jQueryJSON is very popular data format to exchange data between cross programming languages application or platform. This tutorials help to live search on json data objects
-
5
Sometimes it's just fun to play around with the programming languages we know and see what we can create. I thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes "actio...
-
2
Page 1 of 3From the point of view of a JavaScript programmer, the User Interface (UI) is created by HTML tags in the web page. When HTML was first invented there was no intention for it to be the UI for a programming language and so a c...
-
3
Page 1 of 4jQuery has some interesting ways of doing things and one that you cannot afford to miss is the function queue. It is a really great idea and once you understand it you will wonder how you ever did without it. This i...
-
8
Page 1 of 4jQuery's animation functions are built on the use of the default function queue. They are easy to use, but can sometimes be confusing because of the way they mix different ways of showing and hiding elements. This...
-
4
How to Send FormData Objects with Ajax-requests in jQuery ?In this article, we will see how can we send formData objects with
-
0
Creating a Chessboard Pattern with Bootstrap & jQuery...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK