'p' vs '<p>'


#1

Hello all! I was working through the third lesson in jQuery and I noticed something that was really getting to me:

When do I use 'p' and when do I use "<'p'>" (inner quotes just for reference)

Specifically, my issue comes up when the command is to find something in a paragraph. In my mind, I think that the paragraph tag ("<'p'>") would be used, but it isn't, it's just 'p'.

For example, in 3.9, the object is to replace the contents of a paragraph with a string. Simple enough:

$(document).ready(function() {

$('p').html("jQuery magic in action!");

});


And done. The code works, but it bugs me that when I'm looking for a paragraph, I don't use the paragraph tag. Could someone please help a little? I would like a bit of clarification.

Thanks,
--Joe


#2

This is correct ^

("<p> something</p>") This is normally used when adding as element NOT changing the text in an element.. See this lesson


#3

Well, that does make sense, but maybe someone can offer up a little more detail. I'm still fairly confused.


#4

@super_j-03 I'll try :slight_smile:

$('p'): selector - says to the computer, “Hey, find me all of the <p> elements on the page”.
<p>: HTML element, says to the computer, “Hey, add this paragraph element into the page”, and you control where by using prepend(), append(), html(), etc., and by using an appropriate selector ($('p')).

Does this help? I'm not sure what level of detail you're looking for :slight_smile:


#5

Yes! Thank you! Five Internet points to you, sir!


#6

@super_j-03,

I think it is better, if one understands the concept.

It all start's with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of


<!DOCTYPE html>
  <html>
     <head>
          <title> </title>
     </head>
     <body>
       <!-- here you insert your HTML-code -->
     </body>
  </html>

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

            html
             |
       +-----+------+
       |            |
     head          body
       |
     title

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
and
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
and
methods ( giving you the functionality to manipulate the Elements )
https://developer.mozilla.org/en-US/docs/Web/API/Element
https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags


#7

@super_j-03,

If your Browser loads this HTML-document into memory

<!DOCTYPE html>
<html>
  <head>
     <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
     <title>I Know Kung Fu (er, CSS)</title>
  </head>
  <body>
     <div>
       <h3>What's CSS for?</h3>
       <p>CSS is for styling HTML pages!</p>
       <h3>Why use it?</h3>
       <p>It makes webpages look <span>really rad</span>.</p>
       <h3>What do I think of it?</h3>
       <p>It's awesome!</p>
     </div>
  </body>
</html>

the Browser does the load
by using the Document Object Model

               html
                 |
       + - - - - + - - +
       |               |
      head            body
       |               |
   + - - - +           +
   |       |           |
 link    title        div     
                       |
     +- - - +- - -+- - +-+- - +- - - +
     |      |     |      |    |      |
    h3      p     h3     p    h3     p
                         |
                        span

+++
In DOM talk...
body Element has no parent, but is parent to a div Element.
The div Element is a descendant of html Element

div Element is a child of body,
AND is parent to 6 children

Those children are sibling's to each-other,
and are direct descendant of the div Element.

The second paragraph Tag, being the 4th child of the div Tag
is parent to a span Element.

In your link Element you defined
that the Styling specific's are defined
in the file 'stylesheet.css'

The CSS facility of your Browser will read this file
and will expect a specific syntax

css-Selector  {
     **a property**
     **property-key**: **property-Value**;
     }

For instance, we want all p-Tag to have the color red

 p {
    color: red;
 }

We want all span-Tags to be 'yellow'

span {
   color: yellow;
}

#8

@super_j-03,

If you are working with Tag selectors
you must be able to
read the index.html-document
following the guide-lines of the
DOM Document Object Model.

                   html
                     |
           + - - - - + - - - - +
           |                   |
          head                body
           |                   |
       + - - - +        +- - - +- - - +
       |       |        |      |      |
     link    title      p     div     p
                    (intro)    |  (summary)
                               |
                       + - - - + - - - - +
                       |                 |
                       p                 ul
                  (synopsis)             |
                                         |
                                 + - - - + - - - - +
                                 |       |         |
                                 li      li        li
                                 |       |         |
                                 p       p         p



The p-Tags are located:
html > body > p (2)
html > body > div > p (1)
html > body > div > ul > li > p (3)
p as selector we have selected all 6 p-Tag's
body > p as selector we selected 2 p-Tags ==> Intro & Summary
div > p as selector we have selected 1 p-Tag ==> Synopsis
div p as selector we have selected 4 p-Tag's
li > p as selector we have selected 3 p-Tags under the ul-Tag


#9

@super_j-03,

If you use a $()
you are using the jQuery-Selector.

If you use the jQuery-Selector
$('p')
jQuery will select all available p-Tags which are present in your HTML document
jQuery will create a jQuery-object
containing all those HTML p-Tag Elements. including their DOM-position.

jQuery gives you whole bunch of Methods
with which you can manipulate this jQuery-object
and therewith you are manipulating the Document Object Model
and thus the display of your HTML-document.

If you use the jQuery-Selector like
$('<p>')
jQuery will create an HTML-paragraph like <p></p>
you can even add so-called attributes like
$('<p style="font-size:16px;" />')
which would create an HTML-paragraph-Element <p style="font-size:16px;"></p>
$('<p style="font-size:16px;" />').text("Test-text")
which would be <p style="font-size:16px;">Test-text</p>

I m p o r t a n t !!!

Upontill now we have created a HTML-Element,
but the HTML-Element is NOT yet part of the DOM
and thus NOT yet avaiable in your current active HTML-document.

You will have to insert this new HTML-Element into your actual DOM
using one of the jQuery Methods
https://api.jquery.com/category/manipulation/dom-insertion-inside/

google search
== the Book ==
jquery [your question] site:developer.mozilla.org
CSS [your question] site:developer.mozilla.org
javascript [your question] site:developer.mozilla.org
[your question] site:jquery.com
[your question] site:getbootstrap.com

== discussions / opinions ==
jquery [your question] site:stackoverflow.com
CSS [your question] site:stackoverflow.com
javascript [your question] site:stackoverflow.com

== guidance ==
www.crockford.com
[your question] site:crockford.com
- - http://javascript.crockford.com/code.html << Javascript coding convention
- - http://javascript.crockford.com/survey.html

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
http://www.w3schools.com/jquery/trysel.asp
++ bootstrap
http://getbootstrap.com/getting-started/
http://getbootstrap.com/2.3.2/components.html
We now have .col-xs (phones), .col-sm (tablets), .col-md (desktops), and .col-lg (large desktops).


#10

@leonhard.wettengmx.n

Wow! now that's detailed! Thank you so much!