三 dom操作
1.查询
利用选择器找到节点后，访问节点的html内容，节点的text内容，
节点的值，节点的属性值
html():访问节点的html内容，相当于dom节点的innerHTML属性
text():访问节点text的内容，相当于innerText属性
val():访问节点的值,如下拉列表的值
attr():输出或者设置节点的属性值
例子:
<html>
<!-- 查询 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
//alert($('#d1').html());
//alert($('#d1').text());
$('#d1').html('hello java');
}
function f2(){
//alert($(':text').val());
$(':text').val('zs');
}
function f3(){
//alert($('#d1').attr('id'));
$('#d1').attr('style',
'font-size:60px;color:red;');
}
</script>
</head>
<body style="font-size:30px">
<div id="d1"><span>hello jQuery</span></div>
username:<input name="username"/><br/>
<input type="button" value="查询"
onclick="f3();"/>
</body>
</html>
2.创建
$(html);
3.插入节点
append();
向每个匹配的元素内部追加内容
prepend()
向每个匹配的元素内部前置内容
after()
在每个匹配的元素之后插入内容
before()
在每个匹配的元素之前插入内容
例子
例子:
<html>
<!-- 创建节点和添加节点 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
var $obj = $('<div>兴趣是第一位的</div>');
$('body').append($obj);
}
function f2(){
$('body').append('<div>兴趣是第一位的</div>');
}
function f3(){
var $obj = $("<div></div>");
$obj.html('其次是多练习');
$('body').append($obj);
}
function f4(){
$('ul').append('<li>newItem</li>');
}
function f5(){
$('body').prepend('<div>多看看优秀的代码</div>');
}
function f6(){
$('a').after('<p>hello java</p>');
}
</script>
</head>
<body style="font-size:30px;">
<a href="javascript:;"
onclick="f6();">如何才能学好java?</a>
<br/>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul>
<li>item11</li>
<li>item22</li>
<li>item33</li>
</ul>
</body>
</html>
4.删除节点
remove()
remove(selector)
empty() 清空节点
例子:
<html>
<!-- 删除节点 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
function f1(){
$('ul li:eq(1)').remove();
}
function f2(){
$('ul li:eq(1)').empty();
}
function f3(){
$('ul li').remove('#l2');
}
</script>
</head>
<body style="font-size:30px;">
<ul>
<li>item1</li>
<li id="l2">item2</li>
<li>item3</li>
</ul>
<input type="button" value="删除节点"
onclick="f3();"/>
</body>
</html>
5.复制节点
clone() 复制(不复制行为)
clone(true); 使复制的节点也具有行为(绑定在该节点上的事件)
如何绑定事件在节点上
1)//将事件处理代码绑订到dom节点之上。
var obj = document.getElementById('b1');
obj.onclick=f1;
2)
<!-- 将事件处理代码绑订到html标记之上 -->
<input type="button" value="ClickMe" id="b1"
onclick="f1();"/>
复制例子:
<html>
<!-- clone -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
/*
可以将这儿的代码放到.js文件里，然后引入
该文件，这样做，可以将js代码与html代码完全
分离，方便代码的维护。
*/
$(function(){
/*
$('#b1').click(function(){
var $obj = $('ul li:eq(2)').clone();
$('ul').append($obj);
});
*/
$('ul li:eq(2)').click(function(){
alert('hello');
});
$('#b1').click(function(){
var $obj = $('ul li:eq(2)').clone(true);
$('ul').append($obj);
});
});
</script>
</head>
<body style="font-size:30px;">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<input type="button" value="clone方法" id="b1"/>
</body>
</html>
6.属性操作
attr(''); 读取属性
设置:attr('','')
或者一次设置多个attr({"":"","":""});
删除:removeAttr('')
例子:
<html>
<!-- 属性操作 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.s1{
font-size:60px;
}
</style>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('#b1').click(function(){
//alert($('#d1').attr('id'));
//$('#d1').attr('class','s1');
//$('#d1').attr({'class':'s1',
//'style':'color:red;font-style:italic;'});
$('#d1').attr('class','s1').attr('style','color:blue');
});
});
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello</div>
<input type="button" value="属性操作" id="b1"/>
</body>
</html>
7.样式操作
attr("calss","") 获取和设置
addClass('') 追加
removeClass('') 移除
或者removeClass('s1 s2')
或者removeClass() 会删除所有样式
toggleClass() 切换样式
hasClass('') 是否有某个样式
css('') 读取设置css('','')或者css({"":"","":""})//设置多个样式
例子:
<html>
<!-- jquery中的样式如何修改 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.s1{
font-size:80px;
}
.s2{
color:blue;
}
.s3{
font-style:italic;
}
</style>
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
/*
$('#b1').click(function(){
$('#d1').attr('class','s1');
});
*/
$('#b1').click(function(){
//$('#d1').addClass('s2 s3');
//$('#d1').removeClass('s1');
//$('#d1').toggleClass('s1');
//alert($('#d1').hasClass('s1'));
//$('#d1').css('font-style','italic')
//.css('color','red');
$('#d1').css({'font-style':'italic','color':'blue'});
});
});
</script>
</head>
<body style="font-size:30px">
<div id="d1" class="s1">hello</div>
<input type="button" value="样式操作" id="b1"/>
</body>
</html>
8.遍历节点
children() 只考虑子元素,不考虑其他后代元素.
next()
prev()
siblings(); 兄弟节点
find(selector)
例子:
<html>
<!-- 遍历 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('#b1').click(function(){
//var $obj = $('#d1').children();
/*
var $obj = $('#d1').children('div');
$obj.css('font-size','60px');
*/
//$('#d1').next('p').html('hello 555');
//$('#d1').prev().html('hello 777');
//$('#d1').siblings('span').css('font-size','80px');
$('#d1').find('div').css('font-size','80px');
});
});
</script>
</head>
<body style="font-size:30px;">
<span>hello7</span>
<div id="d1">
<div>hello1</div>
<div>hello2</div>
<div>hello3</div>
<div>
<div>hello111</div>
</div>
<p>hello4</p>
</div>
<span>hello5</span><br/>
<p>hello6</p>
<input type="button" value="遍历" id="b1"/>
</body>
</html>