HTML DOM Jquery
HTML
Basics
file protocol has three forward slashes:
file:///
Use to mean quotes. It makes the content more structural than double quotes '"' as not in all language that the double quotes is used for quoting.
Use to quote a block of text. The default browser behavior is to indent the text block.
对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
ul
li
are block itemshow to use custom marker for bullet points?
list-style-image: url(image/backpack.gif)
basic HTML5 structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
URL Query String:
http://server/path/program?search=ruby&results=10
some browser has max length limit: http://stackoverflow.com/a/812962/166286
URL Encoding
everything not ASCII will be encoded
Eg,
%920
is space
Charater entity:
>, <, &, ©, or use d (use number instead of names)
JavaScript provides functions
encodeURIComponent
anddecodeURIComponent
to add these codes to strings and remove them again
img
Jpeg:lossy information format
Png: lossless format
Gif: up t 256 colors. Only one color can be set to transparent.
always provide alternative
<img src="x“ alt="this should be the picture content
<img>
is a inline element. So if you have multiple images, they will be put side by side by default.you can use css to always add a background image to any element:
background-image: url(images/background.gif);
background-repeat: no-repeat;
background-position: top left;
table
table cel has no margin property. Use border-spacing from table to specify the entire table.
use rowspan to span cell across rows. The spanned row therefore doesn't need to have the td cells.
DON'T use table to layout stuff! Think about my gift page, do I need to use table to layout? I think it's fine for table as they are tabular data. (p607)
table in html tells your data is in the relationships of tabular data items. In general, table is not used for presentation.
table in css gives you a way to display block-level elements. If you just want to use a table-like presentation, then use css table.
table cannot be loaded faster, the whole thing has to be loaded for browser to determine layout. It cannot be easily cached either.
You can also use
dl
to display key/value pair, like table
table html:
table
caption
thead
tr
th
th
tbody
tr
td
td
tfoot
tr
td
td
table css:
div.tableRow { display: table-row; }
div.tableRow p { display: cell; }
css table, when you use it, make sure you add the following to the cell div, otherwise the cell content is aligned to middle or bottom! (p520) vertical-align: top;
<lable>
use label and property 'for' with id: <label for="id of the lable points to">text</label>
form
radio has same name
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
select, name, option, value (select can have a
multiple
boolean attribute)<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
use 'required' boolean property to make sure the field is not empty when submitting.
How to style file input? Wrap it under label and hide it
<label class="custom-file-upload"> <input type="file"/> Custom Upload </label>
how to access elements of a form?
<form name="myForm"> <input type="text" name="foo" id="foo" />
document.getElementById('foo'); // preferred document.getElementById("myform").elements["foo"]; document.myForm.foo; // note it might return foo property of the form instead of foo element. // http://stackoverflow.com/questions/2435525/best-practice-access-form-elements-by-html-id-or-name-attribute
<abbr>
use it instead of <acronym>
, abbreviation is not a word (DOM is acronym).
<p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p>
<video>
tag:
they are boolean attributes such as 'controls'
video = container (mp4/webm/ogg/flash) + video(encoded with H.264/VP8) + audio(encoded with AAC/Vorbis)
<video controls autoplay width="515" height="234" poster="image that displays when video is not playing"> <source src="sd/dsfsd.mp4"> <source src="sd/dsfsd.webm" type='video/ogg; codecs="theora, vorbis"'> <!-- NOTE use single quote to wrap double quotes --> <object>this should be the fallback flash player</object> <p>the text is displayed if your video is NOT supported</p> </video>
DOM
Concept/Thinking
progressive enhancement: make your core content first, don't add important content using JavaScript (search engine can't search)
graceful degration
don't use '#'?
DOM
you can use element.src = 'ss' to replace element.setAttribute('src', 'ss'), but it's old method and not DOM. Stick with DOM API!
don't use psuedo-protocal like this:
<a href="#" onclick="javascript:window.open();">example</a>
don't use document.write()
use element.innerHTML wisely, as it's replacing the whole value inside the element. (no fine-grain control,
DOM CORE
pic.getAttribute("src")
document.getElementsByTagName("body").firstChild
HTML-DOM
pic.src
document.body
event
eventName = "JavaScript Statement1; statement2;"
'this' means the invoking element.
return false to prevent default behavior.
don't use inline javascript to add event:
<a onlick="javascript code">
don't use 'onclick', it's the same as inline, and the event becomes a property, which can be overritten.
use 'addEventListener' or 'attachevent', better yet, use JQuery.
$('#id').on("click", function(event){alert($(this).text()); }); // JQeury element.addEvent(type, fn); // MooTools
input
input
(keyevents) andchange
(user has commmited, like blur)get input content:
$().val()
trigger change event on input/textarea/select:
$( ".target" ).change()
or$( ".target" ).trigger('change')
checkbox:
how to check if it's checked:
$('#checkbox').prop('checked')
$('#checkbox').is(':checked')
select
$('#checkbox').filter(':checked')
$('#input[type="checkbox"]:checked')
$('#input[type="checkbox"]:not(:checked)')
how to check: (it doesn't trigger event by default, use change() to trigger change event)
$('.myCheckbox').prop('checked', true)
how to disable:
if disable $('input[type="checkbox"]:not(:checked)').attr 'disabled', true else $('input[type="checkbox"]:not(:checked)').removeAttr 'disabled'
getElementsByTagName can also work on the element:
var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
childNodes
var p = document.getElementById("testText"); // it's a p element
// p.nodeValue is null, the text is its first child's value
var text = p.childNodes[0].nodeValue;
firstChild is the same as childNodes[0]
nodeValue: text of the node if textNode.
nodeType:
element node (1)
attribute node (2)
text node (3)
className: set/get class for the html element.
createElement: create
createTextNode: create text for
appendChild
<p>This is <em>my<em> content</p> || text node(This is) + element node(em) + text node(content) | text node(my)
insertBefore
targetElement.parentNode.insertBefore(newElement, targetElement)
why do we need parent node? Think about the function is telling the parent node to insert an element inside it.
insertAfter (custom function)
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
lastChild:
don't assume the node is always an elment node. For example, some browser might add a 'line break' text node:
<blockquote> sdfsdfdfsf <br> 2nd line <br> this is <abbr title="abbriation">abbr</abbr> </blockquote>
last child for blockquote is the line break.
in this case, to get the last element (not the node), use this: element.getElementsByTagName("")[element.getElementsByTagName("").length-1]
css related:
'-' is reserved keyword, so 'background-color' is illegal. Use cameralCase: backgroundColor.
use element.style only works if the style is directly set in html.
scroll
element.scrollTop: the scrollbar offset to top, >=0.
$(document).scrollTop()
$(e).offset()
the {top, left} to documentscroll to do something: pen
compare scrollTop to the object's offset
JQuery
can use css style to select elements:
$('tag')
$('.element-class')
$('#element-id')
$('tag[attr]') // all tag element with 'attr' attribute
$('tag[attr*=value]') // see doc
$('tag:first-child') // pseudo elements
$('tag:contains('test')') // select all tag elements with text 'test'
$('div nav a') // select all a elements in nav div.
constructor:
$() is a constructor to create a JQuery() object.
$('').eq(0), get 0 index and constrcut a new jQuery object
`$('tr').eq(0) === $($('tr')[0])`
with context: jQuery( selector [, context ] )
.toggleClass('')
$(callback); is a shortcut for $(document).ready(callback).
What is end()
?
end()
?Use .end() to pop up stack: end the most recent filtering operation in the current chain and return the set of matched elements to its previous state.
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle();
});
});
By using end(), the first find() is undone, so we can start search with the next find() at our #faq element, instead of the dd children. Within the click handler, the function passed to the click() method, we use $(this).next() to find the next sibling starting from the current dt.
What's 'this'?
It's a context depending on caller.
function addClickHandlers() {
$("a.remote", this).click(function() {
$("#target").load(this.href, addClickHandlers);
});
}
$(document).ready(addClickHandlers);
Note the $("a.remote", this) query, this is passed as a context: For the document ready event, this refers to the document, and it therefore searches the entire document for anchors with class remote. When addClickHandlers is used as a callback for load(), this refers to a different element: In the example, the element with id target. This prevents that the click event is applied again and again to the same links, causing a crash eventually.
DOM:
use val() to get value from
<input> or <textarea>
http://api.jquery.com/val/test() and html()
event:
use on()
e.target vs e.currentTarget:
if you have 'click tr', then clicking on td will trigger that event too with e.target being td and currentTarget being tr
get html5 data- attributes
use attr()
. the data()
will convert to lowercase and to camelCase. Use data() to store dynamically generated data
XPath
[] examples:
$("a[name]").css("background", "#eee" ); // add a background color to all anchor elements with a name attribute.
$("#orderedlist > li").addClass("blue"); // This selects all child lis of the element with the id orderedlist and adds the class "blue".
Last updated