JQuery基本功能
① 访问和操作Dom元素 ② 控制页面样式 ③ 对页面事件的处理 ④ 大量插件在页面中的运用 ⑤ 与Ajax技术的完美结合
$(document).ready与window.onload
$(document).ready(function(){})与window.onload=function(){} 执行时间不同:前者在页面框架下载完毕后就执行;而后者必须在页面全部加载完毕后才能执行。前者执行效率高于后者。执行数量不同:前者可以重复写多个,并且每次执行的结果不同;而后者尽管可以执行多个,但仅输出最后一个执行结果,无法完成多个结果的输出。 前者可以简写成$(function(){})。
jQuery访问DOM对象
传统JavaScript访问DOM对象
var tDiv = document.getElementById("divTmp");
var oDiv = tDiv.innerHTML;
jQuery访问页面元素的方法
var tDiv = $("#divTmp");
oDiv.html(tDiv);
<!–
.wiz-todo, .wiz-todo-img {width: 16px; height: 16px; cursor: default; padding: 0 10px 0 2px; vertical-align: -10%;-webkit-user-select: none;} .wiz-todo-label { display: inline-block; padding-top: 7px; padding-bottom: 6px; line-height: 1.5;} .wiz-todo-label-checked { color: #666;} .wiz-todo-label-unchecked {text-decoration: initial;} .wiz-todo-completed-info {padding-left: 44px; display: inline-block; } .wiz-todo-avatar { width:20px; height: 20px; vertical-align: -20%; margin-right:10px; border-radius: 2px;} .wiz-todo-account, .wiz-todo-dt { color: #666; }
–>
<!–
body
{
font-family: Arial;
font-size: 12pt;
line-height: 1.5;
}
html, body
{
color: ;
background-color: ;
}
h1 {
font-size:1.5em;
font-weight:bold;
}
h2 {
font-size:1.4em;
font-weight:bold;
}
h3 {
font-size:1.3em;
font-weight:bold;
}
h4 {
font-size:1.2em;
font-weight:bold;
}
h5 {
font-size:1.1em;
font-weight:bold;
}
h6 {
font-size:1.0em;
font-weight:bold;
}
img {
border:0;
max-width: 100%;
height: auto !important;
}
blockquote {
margin-top:0px;
margin-bottom:0px;
}
table {
border-collapse:collapse;
border:1px solid #bbbbbb;
}
td {
border-collapse:collapse;
border:1px solid #bbbbbb;
}
–>
<!–
.wizimgdragresize {position: absolute;z-index: 1000;border: 1px solid black; background-color: white;} .wizimgdragresize-lt { cursor: nw-resize; } .wizimgdragresize-tm { cursor: n-resize;}.wizimgdragresize-rt {cursor: ne-resize;}.wizimgdragresize-lm {cursor: w-resize;}.wizimgdragresize-rm {cursor: e-resize;}.wizimgdragresize-lb {cursor: sw-resize;}.wizimgdragresize-bm {cursor: s-resize;}.wizimgdragresize-rb { cursor: se-resize; }
–>