1、DOM操作的分类:DOM Core、HTML-DOM和CSS-DOM;
2、DOM Core并不专属于JavaScript,任何一种支持DOM的编程语言都可以使用它。JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法都是DOM Core的组成部分;
3、使用DOM Core获取表单对象:
document.getElementsByTagName("form");
4、使用DOM Core获取某个元素的src属性:
element.getAttribute("src");
5、HTML-DOM提供了一些更简明的记号来描述各种HTML元素的属性;
6、使用HTML-DOM来获取表单对象的方法:
document.forms
7、使用HTML-DOM获取某个元素的src属性:
element.src;
8、HTML-DOM只能用来处理Web文档;
9、CSS-DOM技术的主要作用是获取和设置style对象的各种属性;
10、设置某个元素的style对象的字体颜色的方法:
element.style.color = "red";
11、查找某个元素节点:
HTML代码:
<p title="????"></p>
<ul>
<li title="??">??</li>
<li title="??">??</li>
<li title="??">??</li>
</ul>
javascript代码:
var $li = $("ul li:eq(1)"); //获取<ul>里的第二个<li>节点
var li_txt = $li.text(); //获取第二个<li>元素节点里的文本内容
12、查找某个属性节点:
HTML代码:
<p title="????"></p>
<ul>
<li title="??">??</li>
<li title="??">??</li>
<li title="??">??</li>
</ul>
javascript代码:
var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title"); //获取<p>元素节点属性title
13、删除属性:
HTML代码:
<p title="????"></p>
<ul>
<li title="??">??</li>
<li title="??">??</li>
<li title="??">??</li>
</ul>
javascript代码:
$("p").removeAttr("title"); //删除<p>元素的属性title
14、用text()方法对<p>元素进行操作:
<p title="???">??</p>
var p_text = $("p").text(); //获取<p>元素的文本内容
15、用val()方法对某元素进行操作:
HTML代码:
<input type="text" id="address" value="????">
<input type="text" id="address" value="???">
<input type="button" value="??">
javascript代码:
$(function() {
$("#address").focus(function() {
var txt_value = $(this).val();
if(txt_value == "????") {
$(this).val("");
}
});
$("#address").blur(function() {
var txt_value = $(this).val();
if(txt_value == "") {
$(this).val("????");
}
});
$("#address").focus(function() {
var txt_value = $(this).val();
if(txt_value == "???") {
$(this).val("");
}
});
$("#address").blur(function() {
var txt_value = $(this).val();
if(txt_value == "") {
$(this).val("???");
}
});
})
16、构建网页演示val()方法的选中功能:
HTML代码:
<select id="single">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option selected="selected">选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
<option>选择4号</option>
<option selected="selected">选择4号</option>
</select>
<input type="checkbox" value="check1">多选1
<input type="checkbox" value="check2">多选2
<input type="checkbox" value="check3">多选3
<input type="checkbox" value="check4">多选4
<input type="radio" value="radio1">单选1
<input type="radio" value="radio2">单选2
<input type="radio" value="radio3">单选3
javascript代码:
$("#single").val("选择2号");
$("multiple").val(["选择2号","选择3号"]);
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
17、遍历节点:(1)children()方法,用于取得匹配元素的子元素集合;(2)next()方法,用于匹配元素后面紧邻的同级元素;(3)prev()方法,用于匹配元素前面紧邻的同级元素;(4)siblings()方法,用于匹配元素前后所有的同级元素;
18、图片提示效果:
HTML代码:
<ul>
<li><a href="图片链接" class="tooltip" title="图片名字"><img src="图片链接" alt="图片名字"></a></li>
<li><a href="图片链接" class="tooltip" title="图片名字"><img src="图片链接" alt="图片名字"></a></li>
<li><a href="图片链接" class="tooltip" title="图片名字"><img src="图片链接" alt="图片名字"></a></li>
<li><a href="图片链接" class="tooltip" title="图片名字"><img src="图片链接" alt="图片名字"></a></li>
</ul>
javascript代码:
$(function() {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e) {
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip>'<img src='"+this.href + "' alt='产品预览图'/>" + imgTitle + "</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function() {
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e) {
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
})
19、三元运算符:三元运算的结构为Boolean? 值1 :值2.它的第一个参数必须为布尔值;
20、三元运算符也可以用"if(){ }else{ }"代替,例如:
var imgTitle;
if(this.myTitle) {
imgTitle = "<br/>" + this.myTitle;
} else {
imgTitle = "";
}
21、parent()、parents()与closest()的区别:
parent():获得集合中每个匹配元素的父级元素;
parents():获得集合中每个匹配元素的祖先元素;
closest():从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素;
22、CSS类:
addClass() - 向被选元素添加一个或多个类,在添加类时,您也可以选取多个元素,也可以在 addClass() 方法中规定多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
该方法对被选元素进行添加/删除类的切换操作