jquery的dom操作
创建对象
使用jquery的 $() 来创建一个dom对象， 并包装成一个jquery对象返回
快速入门:
如果传统的dom方法.
//添加重庆li到 上海下(使用dom的传统方法)
function test1(){
varmyli=document.createElement("li");
myli.setAttribute("id","cq");
myli.setAttribute("name","chongqing");
myli.innerHTML="重庆";
document.getElementById("city").appendChild(myli);
}
如果使用的 jquery方法
代码如下:
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<ul id="city">
<liid="bj" name="beijing">北京</li>
<li id="sh"name="shanghai">上海</li>
</ul>
<input type="button"id="b1" value="添加重庆li到 上海下"/><br/>
<input type="button"id="b2" value="添加成都li到 北京前"/><br/>
</body>
<scriptlanguage="JavaScript">
//*****添加重庆li到上海下
$("#b1").click(function(){
//jquery方法
//<li id='cq'name=''chongqing>重庆</li>
//有两种方法
//1.一步到位********
// $myli=$("<liid='cq' name='chongqing'>重庆</li>");
//先使用内部插入
//$('#city').append($myli) :表示在 $('#city')对象内部后面添加一个$myli对象
// $('#city').append($myli);
//1.end ....一步到位********
//2.逐步添加我们的dom对象
$myli=$("<li></li>");//<===>$myli=$("<li/>");
$myli.text("重庆"); //=> <li>重庆</li>
$myli.attr("id","cq");//==><liid='cq'>重庆</li>
$myli.attr("name","chongqing");
//把$myli添加到上海
$('#city').append($myli) :表示在 $('#city')对象内部后面添加一个$myli对象
//$('#city').append($myli);
//如果使用appendTo这应当这样使用
//$myli.appendTo($("#city"));:表示把$myli添加到 $("#city")对象的内部后面
$myli.appendTo($("#city"));
})
//***添加成都li到北京前
$("#b2").click(function(){
//jqury方法
$myli=$("<li id='cq'name='chongqing'>成都</li>");
//$('#city').prepend($myli);
$myli.prependTo($('#city'));
})
</script>
</html>
$aaa.append($bbb);
$bbb.appendTo($aaa);
我们看看外部插入:
核心代码如下:
$('#b4').click(function(){
//使用外部插入
//一步到位
//$("#bj").after("<liid='cd' name='chengdu '>成都</li>");
$("<li id='cd'name='chengdu '>成都</li>").insertAfter($('#bj'));
})
$('#b5').click(function(){
//使用外部插入
//一步到位
//$("#jl") 对象前面添加 "<liid='cd' name='chengdu '>成都</li>";
var $jl=$("<li id='cd'name='chengdu '>成都</li>");
//$("#jl").before($jl);
$jl.insertBefore($('#jl'));
})
l 使用jquery去查找某个对象，如果这个对象(id/class...)不存在，jquery不报错, val()
<scripttype="text/javascript">
//alert($('#text2').val());
alert(document.getElementById("text2").value);
//dom,这样处理
/*if(document.getElementById("text2")){
alert(document.getElementById("text2").value);
}else{
window.alert("ok");
}*/
</script>
删除节点
代码 ：
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="../js/jquery-1.3.1.js"></script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
<liid="bj" name="beijing">北京</li>
<li id="sh"name="shanghai">上海</li>
<li id="tj"name="tianjin">天津</li>
</ul>
您爱好的游戏:<br>
<ul id="game">
<liid="fk" name="fakong">反恐</li>
<li id="cq"name="chuangqi">传奇</li>
</ul>
<p>Hello</p> how are<p>you?</p>
<pname="test">Hello, <span>Person</span> <ahref="#">and person</a></p>
<input type="button"value="删除所有p" id="b1"/>
<input type="button"value="所有p清空"id="b1"/>
<input type="button"value="删除上海这个li" id="b3"/>
</body>
<scriptlanguage="JavaScript">
//*****删除所有p
//$("p").remove();
//***所有p清空
$("p").empty();
//****删除上海这个li
$("#b3").click(function(){
$("#sh").remove();
})
</script>
</html>
复制节点
代码如下:
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type"content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<button>保存</button><br><br><br><br><br>
///<br>
<p>段落</p>
<p>段落2</p>
<p>段落2</p>
<p>段落2</p>
<p>段落2</p>
</body>
<scriptlanguage="JavaScript">
$("p").click(function(){
window.alert($(this).text());
});
//$("p").clone()表示复制一份 $("p"),但是没有复制事件
//$("p").clone(true)表示复制一份 $("p"),同时复制事件
$("p").clone(true).insertAfter($('button'));
</script>
</html>
节点替换
代码:
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<p>Hello</p><p>cruel</p><p>World</p>
</body>
<scriptlanguage="JavaScript">
//with : 用什么去替换什么
// $("p").replaceWith("<input type='button' value='按钮'><br/>");
// $("<ahref='#'>sohu</a>").replaceAll($("p"));
$("p").replaceWith("<ahref='#'>sohu</a><br/>");
</script>
</html>
在jquery开发中有这样几个函数，可以获取值，同时也可以设置值
1. val() val(val)
2. html() html(val)
$("#div1").html("<p>hello</p>")
3. text() text(val)
$("#div1").text("<p>hello</p>");
4. attr(name)attr(name,val)
$('#div1').attr("title");
$(''#div1).attr("title","abc");
4. css("css名字"),css("css名字",val)
$("#div1").css("backgorund");
$("#div1").css("backgorund","red");
removeAttr(): 删除指定元素的指定属性
<ahref='http://www.sohu.com' id="a1">soho</a>
$("#a1").removeAttr("href");
$("#a1").attr("href","http://www.baidu.com");
代码如下:
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
<title>XXX</title>
<metahttp-equiv="content-type" content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript" src="../js/jquery-1.3.1.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<!--value 就是默认值 可以通过 this.defaultValue来访问-->
<input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br>
<input type="password"value="" id="b2"/><br>
<input type="button" value="登陆" id="b3"/>
<br>
</body>
<scriptlanguage="JavaScript">
$(document).ready(function (){
//当dom对象加载完毕后，给 b1绑定一个focus事件
$("#b1").focus(function(){
//获取当前值
$curVal=$(this).val();
if($curVal==this.defaultValue){
//应当设置""
$(this).val("");
}else{
$(this).val($curVal);
}
})
//在绑定一个事件blur
$("#b1").blur(function(){
//获取当前值
$curVal=$(this).val();
if($curVal==""){
$(this).val(this.defaultValue);
}else{
$(this).val($curVal);
}
})
});
</script>
</html>
***如何获取子元素和兄弟元素的方法:
代码:
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<input type="button"value="查找所有子元素" id="b2"/>
<input type="button"value="获取后面的同辈元素" id="b3"/>
<input type="button"value="获取前面的同辈元素" id="b4"/>
<input type="button"value="获取所有的同辈元素" id="b5"/>
<div >
ccccccc
</div>
<div class="one">
<div id="one" >
XXXXXXXXX one
</div>
<div id="two" >
XXXXXXXXX two
</div>
<div id="three" >
XXXXXXXXX three
</div>
<div id="four" >
XXXXXXXXX four
</div>
</div>
<div>
tttttttttt
</div>
<div>
aaaaaaa
</div>
<div>
bbbbbb
</div></body>
<scriptlanguage="JavaScript">
//**查找所有子元素（class为 one 的div的子元素)
$("#b2").click(function(){
window.alert('aaaa');
/* $(".one").children().each(function(){
alert($(this).text());
})*/
//指定获取第几个子孩子
alert($(".one").children().eq(1).text());
})
//***获取后面的同辈元素（class为 one 的div的子元素)
$("#b3").click(function(){
//获取.one后面所有的兄弟
// $(".one").nextAll().each(function(){
// alert($(this).text());
// })
//获取.one后面的第2兄弟
alert($(".one").nextAll().eq(1).text());
})
//**获取前面的同辈元素（class为 one 的div的子元素)
$("#b4").click(function(){
//获取.one前面所有的兄弟
// $(".one").prevAll().each(function(){
// alert($(this).text());
//})
//获取.one前面的第1兄弟
alert($(".one").prevAll().eq(0).text());
alert($(".one").prev().text());
})
//**获取所有的同辈元素
$("#b5").click(function(){
$(".one").siblings().each(function(){
alert($(this).text());
})
})
//***
</script></html>
代码:
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Untitled Document</title>
<scripttype="text/javascript" src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<form method="post"action="">
请选择您的爱好!
<br><inputtype="checkbox" id="checkedAll_2"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<inputtype="checkbox" name="items" value="篮球"/>篮球
<inputtype="checkbox" name="items" value="游泳"/>游泳
<inputtype="checkbox" name="items" value="唱歌"/>唱歌
<br/>
<input type="button" id="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/>
<inputtype="button" id="send" value="提 交"/>
</form>
</body>
<scriptlanguage="JavaScript">
$("#checkedAll_2").click(
function (){
if(this.checked){
$("input[name='items']").attr("checked","checked");
}else{
//$("input[name='items']").attr("checked","");
$("input[name='items']").removeAttr("checked");
}
}
);
$('#CheckedAll').click(function(){
$("input[name='items']").attr("checked","checked");
}
);
$('#CheckedNo').click(function(){
$("input[name='items']").attr("checked","");
}
);
//反选
$('#CheckedRev').click(function(){
$("input[name='items']").each(function(){
if(this.checked){
$(this).attr("checked","");
}else{
$(this).attr("checked","checked");
}
})
}
);
</script>
</html>
小结: jquery和ajax整合的使用方法
使用jquery的方法
1. load(url,[data,],[callfunction])
这个load方法把我们ajax自行写的代码包装,
url表示向哪个php发送ajax请求.
data数据是可以选填 ，但是格式有要求 应当按照 json格式来发送, 一旦有这个数据则，load将以post方式提交, 如果没有数据 ,可以设置null,则默认以get方式提交
callfunction :形式 function(data,textstatus,xmlHttpRequest);
data :表示从服务器返回数据(string)
textstatus:表示文本状态succuss, error, notmodify, timeout
xmlHttpRequest,就是XMLHttpRequest对象
返回的数据可能是text/xml/json, 这时你需要用不同的方法来处理，然后使用jquery来显示到某个适当位置
说明 ： load方法需要用jquery对象来调用.
jquery.load();
2. get(url,[data,][callfunction]);
3. post(url,[data,][callfunctino]);
这个post方法可以不依赖某个jquery对象,它可以直接调用
$.post();
url也是向某个php发送数据.
data 也是可以选填的，格式仍然遵守json格式 {"name":"sp"};$_POST['name'];
该函数返回的值就是xmlHttpRequest 对象
callfunction函数只能有两个参数. data,textstatus
作业:
使用jquery+ajax 改写
1. 用户名无刷新验证
2. 省市联动
3. 天气和黄金报价
扫一扫
1773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
