首页 / JQUERY / JQuery基础学习总结
JQuery基础学习总结
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JQuery基础学习总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含20778字，纯文字阅读大概需要30分钟。
内容图文
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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
>
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>
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>
<!
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>
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>
二：方法
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>
例子：表单选择器
<!
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包裹spanvar $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>
<!
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>
原文：http://www.cnblogs.com/caozong/p/5859752.html
内容总结
以上是互联网集市为您收集整理的JQuery基础学习总结全部内容，希望文章能够帮你解决JQuery基础学习总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】