目录
1.选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="button" id="btn1" value="获取" />
<input type="button" id="btn2" value="隐藏所有的p标签" />
<input type="button" id="btn3" value="隐藏class为p1 标签" />
<input type="button" id="btn4" value="*选择器" />
<input type="button" id="btn5" value="this选择器" />
<input type="button" id="btn6" value="p标签里面id为itro元素" />
<input type="button" id="btn7" value="选取第一个p" />
<input type="button" id="btn8" value="选择UL下面的第一个LI" />
<input type="button" id="btn9" value="选择带属性里面有href的对象" />
<input type="button" id="btn10" value="选择a标签里面带有target='_blank'" />
<input type="button" id="btn11" value="设置表格奇数行和偶数行的颜色" />
<div id="div1">
<span>我在DIV里面</span>
<div>
<span>我在DIV2里面</span>
</div>
<p class="p1">p1p1p1p1p1p11p1</p>
<p>
p2p2p2p2p2p2
<p class="itro">p222222222222222</p>
</p>
<p>p3p3p3p3pp3</p>
<p class="p1">p4p4p4p4p4p4p4p4</p>
</div>
<ul>
<li>dota</li>
<li>LOL</li>
<li>WOW</li>
</ul>
<a href="01_jquery_hello.html">我是超链接</a><br />
<a href="01_jquery_hello.html" target="_blank">我是超链接_black</a><br />
<a href="01_jquery_hello.html">我是超链接</a><br />
<table border="1" width="50%">
<tr>
<td>1</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>11</td>
</tr>
</table>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
var x = $("div");
})
$("#btn2").click(function() {
$("p").hide();
})
$("#btn3").click(function() {
$(".p1").hide();
// $(".p1").css("color","red");
})
$("#btn4").click(function() {
alert($("*").length);
})
$("#btn5").click(function() {
//text()-==js innerHtml innerText
//val() ===js value
alert($(this).val());
})
$("#btn6").click(function() {
$("p.itro").hide();
})
$("#btn7").click(function() {
$("p:first").hide();
})
$("#btn8").click(function() {
$("ul li:first-child").hide();
})
$("#btn9").click(function() {
$("[href]").hide();
})
$("#btn10").click(function() {
$("a[target='_blank']").hide();
})
$("#btn11").click(function() {
//$("table tr:even").css("background-color","green");
//$("table tr:odd").css("background-color","red");
$("p,span").hide();
})
$("table tr").hover(function(){
$(this).css("background-color","red")
},function(){
$(this).css("background-color","white")
});
})
</script>
</html>2.事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
border: 1px solid green;
width: 200px;
height: 200px;
}
</style>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//文档加载事件
$(document).ready(function() {
// $("#p1").click(function(){
// alert("P1被点击了");
// })
$("#p1").dblclick(function() {
alert("P1被双击了");
})
$("#div1").mouseenter(function() {
$(this).text("鼠标进入了")
})
$("#div1").mouseleave(function() {
$(this).text("鼠标离开了了")
})
$("#div1").mousedown(function() {
$(this).text("鼠标按下了")
})
$("#div1").mouseup(function() {
$(this).text("鼠标松开了")
})
$("p").hover(function() {
$(this).css("color", "red");
}, function() {
$(this).css("color", "black");
})
$(".mytable tr").hover(function(){
$(this).css("background-color","red")
},function(){
$(this).css("background-color","white")
})
$("#username").focus(function(){
$(this).val("得到焦点");
})
$("#username").blur(function(){
$(this).val("失去焦点");
})
$("#btnbind").click(function(){
$("#btn1").bind("click",function(){
alert("被点了");
})
})
$("#btnunbind").click(function(){
$("#btn1").unbind("click");
})
})
</script>
</head>
<body>
<p id="p1">点击事件1</p>
<div id="div1"></div>
<p class="p1">点击事件2</p>
<p class="p1">点击事件3</p>
<p class="p1">点击事件4</p>
<p class="p1">点击事件5</p>
<input type="text" id="username" value="" />
<br />
<input type="button" id="btnbind" value="给下面的按钮绑定点击事件" />
<input type="button" id="btnunbind" value="给下面的按钮解绑点击事件" />
<br />
<input type="button" id="btn1" value="我是测试的" />
<table border="1" class="mytable" width="50%">
<tr><td>1</td><td>11</td></tr>
<tr><td>1</td><td>11</td></tr>
<tr><td>1</td><td>11</td></tr>
<tr><td>1</td><td>11</td></tr>
<tr><td>1</td><td>11</td></tr>
</table>
</body>
</html>3.显示隐藏、 淡入淡出、滑入滑出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p {
border: 1px solid green;
text-align: center;
height: 100px;
background: green;
}
</style>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnhide").click(function() {
// $("#p1").hide();
// $("#p1").hide(3000,function(){
// alert("隐藏完成");
// });
$("#p1").hide("slow");
})
$("#btnshow").click(function() {
$("#p1").show(3000,function(){
alert("显示完成");
});
})
$("#btnshowandhide").click(function(){
$("#p1").toggle(3000);
})
//淡入谈出
$("#btnfadein").click(function(){
// $("#p2").fadeIn();
// $("#p2").fadeIn(2000);
// $("#p2").fadeIn("slow");
$("#p2").fadeIn(2000,function(){
alert("动画完成");
});
})
$("#btnfadeout").click(function(){
// $("#p2").fadeOut();
// $("#p2").fadeOut(2000);
// $("#p2").fadeOut("slow");
$("#p2").fadeOut(2000,function(){
alert("动画完成");
});
})
$("#btnfadeinandout").click(function(){
// $("#p2").fadeToggle();
// $("#p2").fadeToggle(2000);
// $("#p2").fadeToggle("slow");
$("#p2").fadeToggle(2000,function(){
alert("动画完成"+($(this)));
});
})
$("#btnfadeto").click(function(){
// $("#p2").fadeToggle();
// $("#p2").fadeToggle(2000);
// $("#p2").fadeToggle("slow");
$("#p2").fadeTo(2000,0.5,function(){
alert("动画结束")
});
})
//滑入滑出
$("#btnslideDown").click(function(){
// $("#p3").slideDown(3000);
$("#p3").slideDown(3000,function(){
alert("打开了");
});
})
$("#btnslideUp").click(function(){
// $("#p3").slideUp(3000);
$("#p3").slideUp(3000,function(){
alert("收起了");
});
})
$("#btnslideUpDown").click(function(){
$("#p3").slideToggle(3000);
})
})
</script>
</head>
<body>
<input type="button" id="btnhide" value="隐藏P" />
<input type="button" id="btnshow" value="显示P" />
<input type="button" id="btnshowandhide" value="btnshowandhide" />
<p id="p1">隐藏和显示P</p>
<input type="button" id="btnfadein" value="淡入P" />
<input type="button" id="btnfadeout" value="淡出P" />
<input type="button" id="btnfadeinandout" value="btnshowandhide" />
<input type="button" id="
" value="变淡到50%" />
<p id="p2">淡出淡入P</p>
<input type="button" id="btnslideDown" value="滑入P" />
<input type="button" id="btnslideUp" value="滑出P" />
<input type="button" id="btnslideUpDown" value="滑入滑出" />
<p id="p3">滑入滑出P</p>
</body>
</html>4.动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#div1{
border: 1px solid green;
height: 100px;
width: 100px;
background: green;
}
#div2{
border: 1px solid green;
height: 500px;
width: 500px;
}
#ball{
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
}
</style>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function(){
$("#div1").animate({height:'200px',width:'200px'},2000);
})
$("#btn2").click(function(){
// $("#ball").animate({left:'450px',top:'450px'},2000);
// $("#ball").animate({left:'450px'},2000);
// $("#ball").animate({top:'450px'},2000);
// $("#ball").animate({left:'1px'},2000);
// $("#ball").animate({top:'1px'},2000,function(){
// $("#btn2").click();
// });
$("#ball").animate({left:'450px'},2000)
.animate({top:'450px'},2000)
.animate({left:'1px'},2000)
.animate({top:'1px'},2000,function(){
$("#btn2").click();
});
})
$("#btn3").click(function(){
$("#ball").stop(true,false);
})
})
</script>
</head>
<body>
<!--<input type="button" id="btn1" value="1" />
<div id="div1">11111</div>-->
<div id="div2">
<span id="ball"></span>
</div>
<input type="button" id="btn2" value="2" />
<input type="button" id="btn3" value="停止" />
</body>
</html>5.添加、删除、切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
border: 1px solid green;
height: 200px;
}
</style>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function(){
$("#div1").addClass("div1");//等在在标签上加了一个class="div1"
});
$("#btn2").click(function(){
$("#div1").removeClass("div1");
});
$("#btn3").click(function(){
$("#div1").toggleClass("div1");
});
$("#btn4").click(function(){
// $("#div1").css("border","1px solid green");
// $("#div1").css("height","200px");
// $("#div1").css("height","200px").css("border","1px solid green");
$("#div1").css({"border":"1px solid green","height":"200px"});
});
})
</script>
</head>
<body>
<input type="button" id="btn1" value="addcss" />
<input type="button" id="btn2" value="removecss" />
<input type="button" id="btn3" value="toggleCss" />
<input type="button" id="btn4" value="css()方法" />
<div id="div1">
我是DIV里面的原始内容
</div>
</body>
</html>6.遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
//访问s1直接父级元素
var x = $("#s1").parent().text();
//访问s1的所有父级元素
// var all=$("#s1").parents();
//访问s1的所有父级元素找出里面的div
// var allDiv=$("#s1").parents("div");
// alert(allDiv.length);
//得到 id=div1 到id=p1的所有父级元素
var all = $("#s1").parentsUntil("#div1");
alert(all.length);
})
$("#btn2").click(function() {
//找出id=div1里面的所有直接子元素
var allC = $("#div1").children();
//找出id=div1里面的所有p标签
var allp = $("#div1").children("p");
//找出id=div1里面的所有子元素 find里面必须写选择器 *代表所有
var allc1 = $("#div1").find("*");
alert(allc1.length);
})
$("#btn3").click(function() {
//找出id=div2的所有同级元素 不包含自己
// var x=$("#div2").siblings();
//找出id=div2的\同级p元素 不包含自己
// var x=$("#div2").siblings("p");
// //找出id=div2的下一个同级元素
// var x = $("#div2").next();
// //找出id=div2的下面所有同级元素
// var x1=$("#div2").nextAll();
//找出id=div2下面的第一个span元素 nextALL里面要写选择器
// var x2=$("#div2").nextAll("span");
// 找出id=div2到id=h3的同级元素
var x3 = $("#div2").nextUntil("#h3");
alert(x3.length);
})
});
</script>
</head>
<body>
<input type="button" value="遍历父级元素" id="btn1" />
<input type="button" value="遍历所有子元素" id="btn2" />
<input type="button" value="遍历所有同级元素" id="btn3" />
<div id="div1">
<b>我是DIV的内容</b>
<p>p1p1p1p1p1p1p1p1</p>
<p>p2p2p2p2pp2p2p2p2p2</p>
<p>p3p3p3p3p3pp3p3p3</p>
<div id="div2">div2div2div2div2div2
<p>p4p4p4p
<span id="s1">span1</span>
</p>
</div>
<p>p5p5p5p5p5p5p5</p>
<p>p6p5p5p5p5p5p5</p>
<span>span2</span>
<span>span3</span>
<h1>h1</h1>
<h2>h2</h2>
<h3 id="h3">h3</h3>
<h4>h4</h4>
<h5>h5</h5>
</div>
</body>
</html>7.过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10_jquery_遍历过滤.html</title>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
//找到id=div1的第一个p
$("#div1 p").first().css("color","red");
})
$("#btn2").click(function() {
//找到id=div1的最后一个p
$("#div1 p").last().css("color","red");
})
$("#btn3").click(function() {
//找出id=div1的第三个P标签
$("#div1 p").eq(2).css("color","red");
})
$("#btn4").click(function() {
//找出id=div1 有class=x的p标签 filter里面要有选择器
$("#div1 p").filter(".x").css("color","red");
})
$("#btn5").click(function() {
//找出id=div1 没有class=x的p标签 not里面要有选择器
$("#div1 p").not(".x").css("color","red");
})
});
</script>
</head>
<body>
<input type="button" value="first" id="btn1" />
<input type="button" value="last" id="btn2" />
<input type="button" value="eq" id="btn3" />
<input type="button" value="filter" id="btn4" />
<input type="button" value="not" id="btn5" />
<div id="div1">
<b>我是DIV的内容</b>
<p class="x">p1p1p1p1p1p1p1p1</p>
<p>p2p2p2p2pp2p2p2p2p2</p>
<p>p3p3p3p3p3pp3p3p3</p>
<div id="div2">div2div2div2div2div2
<p>p4p4p4p
<span id="s1">span1</span>
</p>
</div>
<p>p5p5p5p5p5p5p5</p>
<p class="x">p6p5p5p5p5p5p5</p>
<span>span2</span>
<span>span3</span>
<h1>h1</h1>
<h2>h2</h2>
<h3 id="h3">h3</h3>
<h4>h4</h4>
<h5>h5</h5>
</div>
</body>
</html>8.用each遍历数组或元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>each.html</title>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
var arr=[];
arr[0]=4;
arr[5]=9;
$.each(arr, function(index,value) {
alert(index+"---"+value);
});
})
$("#btn2").click(function() {
//得到id=div1里面的所有p
var allp=$("#div1 p");
var allp2=document.getElementsByTagName("p");
// alert(allp.length);
alert(allp+" "+allp2);
$.each(allp, function(index,obj) {
alert(index+"---"+obj.innerText);
});
})
});
</script>
</head>
<body>
<input type="button" value="遍历数组" id="btn1" />
<input type="button" value="遍历元素" id="btn2" />
<div id="div1">
<p class="x">p1p1p1p1p1p1p1p1</p>
<p>p2p2p2p2pp2p2p2p2p2</p>
<p>p3p3p3p3p3pp3p3p3</p>
</div>
</body>
</html>
4615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
