jQuery学习

酸甜果糖

于 2017-07-16 21:54:36 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/lyt5201/article/details/75212468

版权

<!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(){

//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="玉米" οnclick="testA()"/>
<input type="button" value="小白兔" οnclick="testB()"/>
<input type="button" value="智障" οnclick="testC()"/>
<input type="button" value="啊咧" οnclick="testE()"/>
<input type="button" value="啊咧咧" οnclick="testF()"/>
<input type="button" value="豌豆" οnclick="testG()"/>
<input type="button" value="豇豆" οnclick="testH()"/>
<input type="button" value="土豆" οnclick="testI()"/>
<input type="button" value="番茄" οnclick="testJ()"/>
<input type="button" value="排骨" οnclick="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>

酸甜果糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习

jQuery001//选择器$( function(){//element标签查询($("span").length);//class查询alert($(".first").length);//#id查询alert($("#foo\\:bar").length);});-->//ajax特点--局部刷新function testB()
复制链接

扫一扫