JQuery基础学习总结
简单总结下JQuery：
一：事件
1.change事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<select id="s">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<div></div>
<script type="text/javascript">
$(function () {
$("#s").change(function(){
$("div").html("您选择的是:"+$(this).val())
})
});
</script> </body>
</html>
change
2.hover事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red {
color: red;
}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
sda
</div>
<script type="text/javascript">
$(function () {
$("div").hover(
function(){
$(this).addClass("red")
},
function(){
$(this).removeClass("red")
}
)
});
</script> </body>
</html>
hover
3.toggleClass事件：实现点击鼠标样式切换，可以和hover比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red {
color: red;
}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
sdaasdas
</div>
<script type="text/javascript">
$(function () {
$("div").click(function(){
$("div").toggleClass("red");
})
});
</script> </body>
</html>
toggleClass
4.one事件：一次性事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div >cao</div>
<script type="text/javascript">
$(function () {
var n = 20;
$("div").one("click",function(){
n++;
$(this).css("font-size",n+"px");
}) });
</script> </body>
</html>
one
5. click事件：鼠标单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="test">
点击触发
</div>
<script type="text/javascript">
$(function(){
$("#test").click(function(e){
// alert(e.target.innerHTML);
alert(e.target.id);
})
});
</script> </body>
</html>
click
6.dblclick事件：鼠标双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>点我</div> <p>我变颜色</p>
<script type="text/javascript">
$(function () {
$("div").dblclick(function(){
$("p").css("color","red")
})
});
</script>
</body>
</html>
dblclick
7.siblings事件：选择除了自己以外的兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="d">
<ul>
<li class="l1">草莓</li>
<li class="l2">香蕉</li>
<li class="l3">橘子</li>
<li class="l4">苹果</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$(".l1").siblings().css("border", "1px red solid");
});
</script> </body>
</html>
siblings
8.next事件：选择自己的相邻元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="d">
<ul>
<li class="l1">草莓</li>
<li class="l2">香蕉</li>
<li class="l3">橘子</li>
<li class="l4">苹果</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$(".l1").next().css("border", "1px red solid");
});
</script> </body>
</html>
next
9.内容添加事件：包括append;appendTo;after;before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种方法</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
<span id="sp">曹</span>
</div>
<p id="p">曹泰</p>
</body>
<script type="text/javascript">
var $h = "<div>我是添加的</div>";
$("body").append($h); //不能直接写便签名字，或者类名，把$h添加到body元素之后
$("#p").appendTo("span"); //可以直接写便签名字，或者类名，把p元素添加到span元素之后 $("#sp").after("<a href=''>曹之后添加</a>"); //在元素之后添加
$("#sp").before("<a href=''>曹之前添加</a>"); //在元素之前添加 $("body").append($("#p").clone()); //克隆
</script>
</html>
内容添加
10.删除事件：remove;empty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<style type="text/css">
.red{
color: red;
}
</style>
</head>
<body> <span class="s">我是曹泰</span>
<span class="s1">我是曹泰1</span> </body>
<script type="text/javascript">
// $("span").remove(); //移除span标签
// $("span").empty(); //移除span标签
// $("span").remove(".s"); // 移除span标签中的s
$(".s1").empty("span");// .s1标签的内容
</script>
</html>
删除
11.bind,unbind事件：绑定,解绑事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>sad</div>
<input type="button" value="解除绑定"/>
<script type="text/javascript"> $(function () {
// $("div").bind("click dblclick",function(){
// $(this).css("color","red");
// })
$("div").bind({
click:function(){
$(this).css("color","red");
},
dblclick:function(){
$(this).css("background-color","blue");
}
});
$("input").bind("click",function(){
$("div").unbind();
})
});
</script> </body>
</html>
bind,unbind
12.on,off事件：绑定，解绑事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>sad</div>
<input type="button" value="解除绑定"/>
<script type="text/javascript"> $(function () {
$("div").on({
click:function(){
$(this).css("color","red");
},
dblclick:function(){
$(this).css("background-color","blue");
}
});
$("input").on("click",function(){
$("div").off();
})
});
</script> </body>
</html>
on,off
13.show,hide事件：显示隐藏事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<!--分别对显示和隐藏绑定-->
<img src="../../样式练习/images/2.png">
<input type="button" class="show" value="显示" disabled/>
<input type="button" class="hide" value="隐藏"/> <!--只绑定一个button-->
<!--<img src="../../样式练习/images/2.png">-->
<!--<input type="button" class="hide" value="隐藏"/>--> </body>
<script type="text/javascript">
$(function(){
//分别对显示和隐藏绑定
$(".show").bind("click",function(){
$("img").show(1000,function(){
$(".show").attr("disabled",true);
$(".hide").attr("disabled",false);
});
});
$(".hide").bind("click",function(){
$("img").hide(1000,function(){
$(".hide").attr("disabled",true);
$(".show").attr("disabled",false);
});
}); //只绑定一个button
// $(".hide").bind("click",function(){
// $("img").toggle(1000,function(){
// $(".hide").val()=="隐藏" ? $(".hide").val("显示"): $(".hide").val("隐藏");
// })
// }) })
</script>
</html>
show,hide
14.mousemove事件：鼠标移动事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
border: 0;
}
div{
border: 1px solid salmon;
}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="n1">
<p>鼠标在此区域移动触发mousemove</p>
<span class="s1">移动的X位置</span>
<span class="s2">移动的Y位置</span>
</div>
<script type="text/javascript"> $(function () {
$("#n1").mousemove(function(e){
$(".s1").html("移动的X位置:"+e.pageX);
$(".s2").html("移动的Y位置:"+e.pageY);
}) });
</script> </body>
</html>
mousemove
15.mouseenter,mouseleave事件:鼠标移入移出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mouseover/mouseout</title>
<style type="text/css">
.main{width:150px;height: 50px;line-height:50px;text-align:center;background-color:#8C0000;color:#fff;position:relative}
.list{width:148px;height: 200px;color:#f00;border:1px solid red;position: absolute;top:50px;display:none}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="main">
标题
<div class="list">
下拉列表
</div>
</div>
<script type="text/javascript">
$(function () {
$(".main").mouseenter(function () {
$(".list").css("display","block");
}).mouseleave(function () {
$(".list").css("display","none");
});
});
</script>
</body>
</html>
mouseenter,mouseleave
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mouseover与mouseenter</title>
<style type="text/css">
div{width:350px;height:150px;padding:5px;margin:5px;border:1px solid #ccc;}
p{height: 50px;border:1px solid red;margin:30px;}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="aa">
<p>鼠标离开此区域触发mouseover事件</p>
<span>冒泡事件触发次数</span>
</div>
<div class="bb">
<p>鼠标离开此区域触发mouseenter事件</p>
<span>冒泡事件触发次数</span>
</div>
</body>
<script type="text/javascript">
$(function(){
var i=0;
$(".aa").mouseover(function(){
$(".aa span").html("mouseover事件触发的次数："+(++i));
});
var n=0;
$(".bb").mouseenter(function(){
$(".bb span").html("mouseover事件触发的次数："+(++n));
})
});
</script>
</html>
mouseover冒泡
16.focus,blur事件：聚焦,失焦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点/失焦</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<from>
<div></div>
<input type="text" value="">
</from>
</body>
<script type="text/javascript">
$(function () {
$("input").focus(function(){
$("div").html("请您输入您的姓名");
}).blur(function(){
if($(this).val().length==0){
$("div").html("您的名称不能为空");
}
});
});
</script>
</html>
focus,blur
二：方法
1.arrt方法：获取指定属性名的属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种方法</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<a href="http://127.0.0.1" id="a1">点我就ok</a>
<div>我要取得地方是:<span id="tip"></span></div>
</body>
<script type="text/javascript">
$("#a1").removeAttr("href");
var $url=$("#a1").attr("href");
$("#tip").html($url); // js方法
// var a = document.getElementById("a1");
// alert(a.getAttribute("href")); </script>
</html>
attr
例子：表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" rel="stylesheet">
.red {
border: 1px solid red;
}
</style>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<form id="f">
<input type="text"/>
<select id="i" multiple="multiple">
<option id="o" value="曹泰">选1</option>
<option selected="selected">选2</option>
<option >选3</option>
<option >选4</option>
<option selected="selected">选5</option>
</select>
男<input type="radio" name="sex"/>
女<input type="radio" name="sex"/>
<br/>
A<input type="checkbox"/>
B<input type="checkbox"/>
C<input type="checkbox"/>
D<input type="checkbox"/>
</form>
<br/>
<div>asc</div>
</body>
<script type="text/javascript">
$(function () {
$("#f :input").addClass("red");
$("#f input:text").addClass("red");
// $("#f :text").addClass("red");
$("#f :radio").attr("disabled", "true"); $("#f :checkbox").attr("checked", "checked");
$("#f :checkbox").attr("disabled", "true"); $("#i :selected").html("你被选中了");
alert($("#i #o").val());
$("div").html("<b>你被选中了</b>"); });
</script>
</html>
表单练习
2.替换方法：replaceWith;replaceAll;warp:warpInner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换方法</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<style type="text/css">
.red{
color: red;
}
</style>
</head>
<body> <span class="s">我是曹</span>
<span class="s">我是曹</span> </body>
<script type="text/javascript">
// $(".s").replaceWith("<div class='red'>想你了</div>");//span添加了div便签，div包裹span var $h ="<div class='red'>你好</div>";
$($h).replaceAll(".s"); //替换所有的span标签 // $(".s").wrap("<p class='red'>aa</p>"); //span添加了p便签，p包裹span
// $(".s").wrapInner("<i></i>"); //span添加了i便签，span包裹i </script>
</html>
替换方法
3.遍历：children,parent,parents,find
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="d">
<ul>
<li>草莓<span>我的最爱</span></li>
<li>香蕉</li>
<li class="l3">橘子</li>
<li><span>苹果</span></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
// $("ul li").each(function(i){
// if(i==1){
// $(this).css("color","red");
// }
// }); // $("ul").children().css("color", "red"); //查找下一辈 （向下找）
// $("ul").children("span").css("color", "red"); //查找下一辈，不能实现查找span （向下找）
// $(".l3").parent().css("border", "1px solid red"); //查找父亲（向上找） // $("li").find("span").css("color", "red"); //查找下辈所有的 （向下找）
// $(".l3").parents().css("border", "1px solid red"); //查找所有祖辈 （向上找）
// $(".l3").parents(".d").css("border", "1px solid red"); //查找祖辈到d （向上找） });
</script> </body>
</html>
遍历
三：选择器
选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
// $(document).ready(function(){
// $("p").html("hello");
// }
// )
// $(function () {
// $("p").html("元素选择器");
// }
// );
// $(function () {
// $("#id").html("id选择器");
// }
// );
// $(function () {
// $(".ul").html("类选择器");
// }
// );
// $(function () {
// $("p a").html("祖孙选择器");
// });
// $(function () {
// $(".div1,.div2").html("div");
// }); $(function () {
// $("div>p").html("hello"); // div的直系亲属 // $("span+p").html("hello"); // span下面的p标签
$("p~span").css('color','red')
})
</script>
</head>
<body>
<!--------------------------------------------------------------------> <!--<p>-->
<!--<p>-->
<!--<p>--> <!--------------------------------------------------------------------> <!--<div id="id"></div>-->
<!--<ul class="ul">-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--</ul>--> <!--------------------------------------------------------------------> <!--<p><a></a></p>--> <!--<div class="div1"></div>-->
<!--<div class="div2"></div>--> <!--------------------------------------------------------------------> <!--<div>-->
<!--<p>ad</p>-->
<!--<span> <p>ad</p></span>-->
<!--</div>-->
<!--<p>ads</p>--> <!--<p>asd</p>--> <!--------------------------------------------------------------------> <!--<div>-->
<!--<span>曹</span>-->
<!--<p></p>-->
<!--<p>曹</p>-->
<!--<p>曹</p>-->
<!--</div>--> <!--------------------------------------------------------------------> <p>阿三djasdj；lkj</p>
<span>adssdada</span>
<span>adssdada</span>
<a><span></span></a> </body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<ul>
<li title="我是曹泰">asdsda</li>
<li title="曹泰是我">asdddd</li>
<li title="曹泰">asdddd</li>
</ul>
<script type="text/javascript">
$(function(){
$("li[title = '曹泰']").css("color","red");
// $("li[title != '我是']").css("color","blue");
// $("li[title *= '曹泰']").css("font-weight","bold");
});
</script>
</body>
</html>
属性选择器
过滤选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
// $(function(){
// $("ul li:first").html("1");
// $("ul li:first").css("color","red");
// // n从0开始
// $("ul li:eq(1)").html("2");
// $("ul li:eq(2)").html("3");
//
// $("ul li:last").html("4");
// $("ul li:last").css("color","red");
// }); // $(function(){
//// 含有曹泰的li变为红色
// $("li:contains('曹泰')").css('color',"red");
// }) // $(function () {
//// 含有a的p变为红色
// $("p:has('span')").css('color', "red");
// });
//
// $(function () {
// var $s=$("p:hidden").html();
// $("div").html($s);
// });
// $(function () {
// var $s=$("p:hidden").html();
// $("div").html($s);
// }); $(function () {
var $s=$("p:visible").html();
$("div").html($s);
});
</script>
</head>
<body>
<!--<ul>-->
<!--<li>2</li>-->
<!--<li>2</li>-->
<!--<li>2</li>-->
<!--<li>2</li>-->
<!--</ul>-->
<br/>
<!--<ul class="ul1">-->
<!--<li>曹泰阿斯顿撒旦</li>-->
<!--<li>帅阿斯</li>-->
<!--<li>曹泰爱神的箭</li>-->
<!--</ul>-->
<br/>
<!--<p>as<span>a阿斯顿</span></p>-->
<br/>
<!--<div></div>-->
<!--<p style="display: none">隐藏</p>-->
<br/>
<p>我是</p>
<div></div>
</body>
</html>
过滤选择器1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:first-child").css("color","red");
$("li:last-child").css("color","red");
$("li:nth-child(2)").css(("background-color"),("green"));
// 就是指的第二个,n从1开始
});
</script>
<body>
</head>
<ul>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
</ul>
<ul>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
<li>曹泰</li>
</ul>
</body>
</html>
过滤选择器2