爱好:
做饭
钓鱼
足球
2.10表单选择器
1):
input:
input元素。
2):
text:
文本框。
3):
pasword:
密码框。
4):
radio:
单选。
5):
checkbox:
多选。
6):
submit:
提交按钮。
7):
image:
图片。
8):
reset:
重置按钮。
9):
button:
普通按钮。
10):
file:
文件。
11):
hidden:
隐藏域。
3、DOM操作
3.1查询
利用选择器找到要操作的节点之后,获得节点的值、属性值、文本以及html内容。
1)html():
html内容,如:
alert($('#d1').html()),相当于innerHTML属性,下例中也会把span输出(输出标记中的所有内容),即hellojQuery。
2)text():
文本,如:
alert($('#d1').text()),相当于innerText属性,由于有兼容性问题,所以没讲。
只输出文本内容hellojQuery(标记中的文本内容)。
3)val():
节点的值,如:
alert($('#username').val()),结果为文本框中输入的值。
4)attr():
属性值,如:
alert($('#d1').attr('id')),结果为d1。
◆注意事项:
此外,这几个方法也可以用来修改节点的内容、值、文本内容、属性值。
如:
$('#d1').html('hellojava');$('#username').val('chang');
$('#d1').attr('style','color:
red;font-size:
50px;');
5)案例:
username:
3.2创建
$(html);//直接写html语句即可,如:
var$obj=$('
3.3插入节点
1)append():
向每个匹配的元素内部最后追加内容(添加的元素作为最后一个孩子)
例如:
var$obj=$('
2)prepend():
向每个匹配的元素内部最前添加内容(添加的元素作为第一个孩子)
例如:
var$obj=$('
3)after():
向每个匹配的元素之后插入内容(在该元素之后添加兄弟节点)
例如:
$('ul').after('
hello
');4)before():
向每个匹配的元素之前插入内容(在该元素之前添加兄弟节点)
例如:
$('ul').before('
hello
');◆注意事项:
都可以简化为:
$('body').append/prepend/after/before('
5)案例:
;"onclick="f1();">岳飞是谁?
3.4删除节点
1)remove():
删除节点,如:
$('ulli:
eq
(1)').remove();
2)remove(selector):
删除满足selector的节点,如:
$('ulli').remove('#l2');
3)empty():
清空节点,相当于innerHTML="",如:
$('ulli:
eq
(1)').empty();
4)案例:
3.5如何将JavaScript代码与HTML分开
1)为何要分开?
为了使行为和数据分开。
2)问题分析
varobj=document.getElementById("d1");
obj.onclick=function(){this.innerHTML='hellojava';}
此处的varobj=document.getElementById("d1");没有写在一个函数里(即直接在script标签中写的),再由于浏览器是逐行解析,那么obj将是null,因为DOM树还没有生成。
3)当引入自己写的JS文件时,JS代码写
window.onload=function(){//这里的JS代码会在页面加载完成之后执行。
varobj=document.getElementById("d1");
obj.onclick=function(
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1