jQuery

Image result for jquery


What is ?


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.

Including jQuery

Below are some of the most common ways to include jQuery.

Browser

Script tag


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

ref in -npm

Using jQuery


  •      At its core, jQuery is used to connect with HTML elements in the browser via the DOM.
  • The DOM is the method by which JavaScript (and jQuery) interact with the HTML in a browser. To view exactly what the DOM is, in your web browser, right click on the current web page select Inspect. This will open up Developer Tools. The HTML code you see here is the DOM.
  • Each HTML element is considered a node in the DOM - an object that JavaScript can touch. These objects are arranged in a tree structure, with <html> being closer to the root, and each nested element being a branch further along the tree. JavaScript can add, remove, and change any of these elements.
  • If you right click on the site again and click View Page Source, you will see the raw HTML output of the website. It’s easy at first to confuse the DOM with the HTML source, but they’re different - the page source is exactly what is written in the HTML file. It is static and will not change, and will not be affected by JavaScript. The DOM is dynamic, and can change.
  • The outermost layer of the DOM, the layer that wraps the entire <html> node, is the document object. To begin manipulating the page with jQuery, we need to ensure the document is “ready” first.

Comments

Post a Comment

Popular posts from this blog

CSS

Image
IT is a language that describes the style of an HTML document and describes how HTML elements should be displayed. When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS.CSS removed the style formatting from the HTML page! power of css                               A CSS rule-set consists of a selector and a declaration block                                                                     -ref in w3 school- There are the following three types of CSS: Inline CSS.(using in html elements) Internal CSS.(using in html head part) External CSS.(using in addisanal sheet)
Read more

Bootstrap

Image
BOOTSTRAP   Bootsrap is framework of css.there are many frame to css.UIkit, Semantic UI, Bulma ,Tailwind etc. It is very easy to use.   If you’re not familiar with how a framework like Bootstrap works, a few code examples will help, so you can see how easy it is to build maintainable interfaces by editing nothing but HTML.   Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins   Bootstrap also gives you the ability to easily create responsive designs same bootstrap class are    forms :-.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light   buttons :-.btn   tables :-table   navigation:-nav   image:-.img-thumbnail,.rounded-circle
Read more

Mongodb

Image
Basic commands on mongo shell  Show all available databases:  show dbs;  Select a particular database to access, e.g. mydb. This will create mydb if it does not already exist:   use mydb;  Show all collections in the database (be sure to select one first, see above):  show collections;  Show all functions that can be used with the database:  db.my db.help();  To check your currently selected database,use the command db  > db  mydb db.dropDatabase() command is us ed to drop a existing database.  db.dropDatabase() insert collection  We add tworecords to our collection test as: >db.test.insert({"key":"value1","key2":"Val2","key3":"val3"})  WriteResult({ "nInserted" : 1 }) > db.test.insert({"key":"value2","key2":"Val21","key3":"val31"})  WriteResult({ "nInserted" : 1 })  If we see them via find, they will look very
Read more