jQuery学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="C:/Users/ASUS/Desktop/jquery-3.2.1.min.js"></script>
<title>jQuery001</title>
<script>
//选择器
$( function(){
<!--
//element标签查询
($("span").length);
//class查询
alert($(".first").length);
//#id查询
alert($("#foo\\:bar").length);
});
-->
//ajax特点--局部刷新
function testB(){
var divArr=$("div");
divArr.each(function() {
alert($(this).text());
});
}
function testC(){
var divArr=$("div");
$.each(divArr,function(i,div){
alert("第"+ ++i +"个元素:"+$(div).html());
});
}
function testD(){
var divArr=document.getElementsByTagName("div");
for(var i=0;i<divArr.length;i++){
alert(divArr[i].innerHTML);
}
}
//是每个选择器构成的数组 以逗号隔开的选择器找出来的是数组
function testE(){
var classArr=$(("div,span,p.myclass"));
$.each(classArr,function(i,obj){
alert("第"+ ++i +"个元素:"+$(obj).val());
});
}
//是第一个选择器下对应第二个选择器的子子孙孙 以空格 隔开的选这起找出来的是第一个标签下的第二个标签下的子子孙孙
function testF(){
var classArr=$(("form input"));
$.each(classArr,function(i,obj){
alert("第"+ ++i +"个元素:"+$(obj).val());
});
}
//是第一个选择器下找第二个选择器所有的儿子 以>符号隔开的两个选择器只找到所有儿子
function testG(){
var classArr=$(("form >input"));
$.each(classArr,function(i,obj){
alert("第"+ ++i +"个元素:"+$(obj).val());
});
}
//是第一个选择器下对应第二个选择器下得第一个，结果可能有多个 以+号链接的两个栓择期是在第一个选择器的下次找第二个选择器的紧接着第一个
function testH(){
var classArr=$(("form ~ input"));
$.each(classArr,function(i,obj){
alert("第"+ ++i +"个元素:"+$(obj).val());
});
}
//是第一个选择器下对应第一个选择器后的所有兄弟 以~链接的两个的选择器是找第一个选择器下面的第二个选择器的所有兄弟。
function testI(){
var classArr=$(("form ~ input"));
$.each(classArr,function(i,obj){
alert("第"+ ++i +"个元素:"+$(obj).val());
});
}
function testJ(){
$("div").remove("#er");
}
function testK(){
$("div").empty("#er");
}
</script>
</head>
<body>
<input name="啊呀咧" />
<form>
<label>Name:</label>
<input name="二货" /><br/>
<fieldset>
<label>Newsletter:</label><br/>
<input name="newsletter" /><br/>
</fieldset>
</form>
<input name="二傻子" />
<input name="是不是傻" />
<hr/>
<input type="button" value="玉米" onclick="testA()"/>
<input type="button" value="小白兔" onclick="testB()"/>
<input type="button" value="智障" onclick="testC()"/>
<input type="button" value="啊咧" onclick="testE()"/>
<input type="button" value="啊咧咧" onclick="testF()"/>
<input type="button" value="豌豆" onclick="testG()"/>
<input type="button" value="豇豆" onclick="testH()"/>
<input type="button" value="土豆" onclick="testI()"/>
<input type="button" value="番茄" onclick="testJ()"/>
<input type="button" value="排骨" onclick="testJ()"/>
<div>智障儿童欢乐多</div>
<div>少年</div>
<div id="er">二货少女</div>
<div class="myclass">智障儿童欢乐多</div>
<div class="myclass">少年</div>
<div class="myclass">二货少女</div>
<p class="myclass">智障青年</p>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="C:/Users/ASUS/Desktop/jquery-3.2.1.min.js"></script>
<title>jQuery001</title>
<script>
//选择器
$( function(){
<!--
//element标签查询
($("span").length);
//class查询
alert($(".first").length);
//#id查询
alert($("#foo\\:bar").length);
});
-->
//ajax特点--局部刷新
function testB(){
var divArr=$("div");
divArr.each(function() {
alert($(this).text());
});
}
function testC(){
var divArr=$("div");
$.each(divArr,function(i,div){
alert("第"+ ++i +"个元素:"+$(div).html());
});
}
function testD(){
var divArr=document.getElementsByTagName("div");
for(var i=0;i<divArr.length;i++){
alert(divArr[i].innerHTML);
}
}
//是每个选择器构成的数组 以逗号隔开的选择器找出来的是数组
function testE(){
var classArr=$(("div,span,p.myclass"));
$.each(classArr,function(i,obj){
alert("第"+ ++i +"个元素:"+$(obj).val());
});
}
//是第一个选择器下对应第二个选择器的子子孙孙 以空格 隔开的选这起找出来的是第一个标签下的第二个标签下的子子孙孙
function testF(){
var classArr=$(("form input"));
$.each(classArr,function(i,obj){
alert("第"+ ++i +"个元素:"+$(obj).val());
});
}
//是第一个选择器下找第二个选择器所有的儿子 以>符号隔开的两个选择器只找到所有儿子
function testG(){
var classArr=$(("form >input"));
$.each(classArr,function(i,obj){
alert("第"+ ++i +"个元素:"+$(obj).val());
});
}
//是第一个选择器下对应第二个选择器下得第一个，结果可能有多个 以+号链接的两个栓择期是在第一个选择器的下次找第二个选择器的紧接着第一个
function testH(){
var classArr=$(("form ~ input"));
$.each(classArr,function(i,obj){
alert("第"+ ++i +"个元素:"+$(obj).val());
});
}
//是第一个选择器下对应第一个选择器后的所有兄弟 以~链接的两个的选择器是找第一个选择器下面的第二个选择器的所有兄弟。
function testI(){
var classArr=$(("form ~ input"));
$.each(classArr,function(i,obj){
alert("第"+ ++i +"个元素:"+$(obj).val());
});
}
function testJ(){
$("div").remove("#er");
}
function testK(){
$("div").empty("#er");
}
</script>
</head>
<body>
<input name="啊呀咧" />
<form>
<label>Name:</label>
<input name="二货" /><br/>
<fieldset>
<label>Newsletter:</label><br/>
<input name="newsletter" /><br/>
</fieldset>
</form>
<input name="二傻子" />
<input name="是不是傻" />
<hr/>
<input type="button" value="玉米" onclick="testA()"/>
<input type="button" value="小白兔" onclick="testB()"/>
<input type="button" value="智障" onclick="testC()"/>
<input type="button" value="啊咧" onclick="testE()"/>
<input type="button" value="啊咧咧" onclick="testF()"/>
<input type="button" value="豌豆" onclick="testG()"/>
<input type="button" value="豇豆" onclick="testH()"/>
<input type="button" value="土豆" onclick="testI()"/>
<input type="button" value="番茄" onclick="testJ()"/>
<input type="button" value="排骨" onclick="testJ()"/>
<div>智障儿童欢乐多</div>
<div>少年</div>
<div id="er">二货少女</div>
<div class="myclass">智障儿童欢乐多</div>
<div class="myclass">少年</div>
<div class="myclass">二货少女</div>
<p class="myclass">智障青年</p>
</body>
</html>