本文通过多个实例详细介绍了jQuery的使用方法，包括DOM操作、事件处理、选择器应用等核心功能。
jQuery是一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
实例一 JS与JQ的转换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
//JS
/* window.onload=function()
{
document.getElementById('btn').onclick= function () {
alert("heihei");
}
}*/
//JQ
$(function(){
$("#btn").click(function () {
alert("heiheihaha");
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//JQ和JS的方法名有不同 JS：onclick JQ：click
//JS转JQ
$(document.getElementById('btn')).click(function () {
alert("JS对象调用JQ方法");
});
//JQ转JS
$("#btn2")[0].onclick=function () {
alert("JQ对象调用JS方法");
};
});
</script>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
<input type="button" id="btn2" value="按钮"/>
</body>
</html>
实例二 JQ的选择器
id选择器 #id
类选择器 .class
xxxx选择器 body input
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//odd 获取偶数行 变色
$("p:odd").css("color","red");
//even 获取奇数行 变色
$("p:even").css("color","green");
//获取页面中的第一个P标签
$("p:first").css("color","yellow");
//获取页面中的最后一个P标签
$("p:last").css("color","blue");
//属于父标签的第一个子标签的P标签
$("p:first-child").css("color","pink");
//属于父标签的最后一个子标签的P标签
$("p:last-child").css("color","purple");
//属于父标签的第一个子标签的话 就变色 (第i个)
$("p:nth-child(1)").css("color","orange");
//属于父标签的子标签中的第一个P标签的话 就变色 (第i个)
$("p:nth-of-type(1)").css("color","brown");
});
</script>
</head>
<body>
<p>页面中的第一个P标签</p>
<p>222222</p>
<p>333333</p>
<p>444444</p>
<p>555555</p>
<p>666666</p>
<div>
<p>属于父标签的第一个子标签的P标签</p>
<p>属于父标签的第二个子标签的P标签</p>
<p>属于父标签的最后一个子标签的P标签</p>
</div>
<p>页面中的倒数第二个P标签</p>
<p>页面中的最后一个P标签</p>
<div>页面中的最后一个DIV标签</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//包含a标签的div标签
$("div:has(a)").css("color","yellow");
//设置了title属性的a标签
$("a[title]").css("color","pink");
//设置了href且以www开头的a标签
$("a[href^=www]").css("color","red");
//设置了href且以www结尾的a标签
$("a[href$=org]").css("color","purple");
//设置了href且包含pdf的a标签
$("a[href*=pdf]").css("color","green");
//设置了href且内容为xx的a标签
$("a[href='www.hhs.com']").css("color","black");
//对表单元素的操作
//设置type为button的按钮为禁用状态
$("input[type='button']").attr("disabled","disabled");
//获取所有按钮 设置为禁用 快捷方式
// $(":button").attr("disabled","disabled");
//设置所有不可用的控件的宽度
$("input[disabled=disabled]").css("width","200px");
//设置所有不可用的控件的宽度 快捷方式
$(":disabled").css("width","200px");
//获得可用的 $(:enable)
});
</script>
</head>
<body>
<div>
我的第一个div<br/>
<a href="#" title="">我的第一个div中的a标签</a><br/>
<a href="www.baidu.com" title="">我的第一个div中的a标签</a><br/>
<a href="128.0.0.1.org" title="">我的第一个div中的a标签</a><br/>
<a href="pdf" title="">我的第一个div中的a标签</a><br/>
<a href="www.hhs.com" title="">我的第一个div中的a标签</a>
</div>
<p>-------分割线-------</p>
<div>
我的第二个div
<input type="button" value="HHS"/>
</div>
</body>
</html>
实例三 eq gt not filter
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//获取第i个div
$("div").eq(0).css("color","red");
$("div:eq(1)").css("color","blue");
//第i个后面的元素 gt只能写在里面
$("div:gt(2)").css("color","yellow");
//第i个div的兄弟元素
$("div:eq(2)").siblings().css("color","pink");
//找到去掉第i个div后的所有div 过滤掉
$("div").not(":eq(0)").css("color","green");
//找到去掉button后的所有input标签
//$("input").not(":button")
//筛选出第i个 相当于eq
$("div").filter(":eq(2)").css("color","purple");
});
</script>
</head>
<body>
<div>aaaa</div>
<div>bbbb</div>
<div>cccc</div>
<div>dddd</div>
<div>eeee</div>
<div>div
<span>div中的span</span>
<p>div中的p</p>
<div>div中的div</div>
</div>
</body>
</html>
实例四 parent children next prev
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//父级标签
$(".d1").parent().css("color","red");
//所有父级标签
$(".d2").parents().css("font-size","20px");
//父级的父级标签
$(".d2").parent().parent().css("font-size","10px");
//子元素
$(".d3").children().css("color","yellow");
//上一个兄弟元素
$(".d3").prev().css("color","green");
//前面所有的兄弟元素
$(".d3").prevAll().css("color","green");
//下一个兄弟元素
$(".d3").next().css("color","yellow");
//后面的所有兄弟元素
$(".d3").nextAll().css("color","yellow");
})
</script>
</head>
<body>
<div>ttt</div>
<div>
<div>aaa</div>
<div class="d2">d2</div>
<div>
<div class="d1">d1</div>
<div >
<p>222</p>
<p>333</p>
<p class="d3">111</p>
<p>222</p>
<p>333</p>
</div>
<div class="d1">bbbbbbb</div>
<div>cccccc</div>
</div>
</div>
</body>
</html>
实例五 size addClass removeClass find
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.c2{
color:green;
}
</style>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//获取div的个数
var size=$("div").size();
//alert(size);
//同时加多个样式 优先级较高
$(".c1").css({
"color":"red",
"font-size":"30px"
});
//添加样式
$(".c1").addClass("c2");//可以同时设置多个css
$(".c3").addClass("c2");
//移除样式
$("div").eq(1).removeClass("c2");
//在元素中找元素
$(".c4").find("span").css("color","blue");
})
</script>
</head>
<body>
<div class="c1">c1 div</div>
<div class="c2">c2 div</div>
<div class="c3">c3 div</div>
<div class="c4">c3 div<br/>
<span>c3 div span</span>
</div>
<div></div>
</body>
</html>
实例六 jq链
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.3.js"></script>
<style type="text/css">
.c1{
color: red;
}
.c2{
font-size: 50px;
}
</style>
<script type="text/javascript">
$(function(){
$("div").addClass("c1").filter(function(index){return index==1 || $(this).attr("id")=="d3"}).addClass("c2");
//给P标签加CSS
$("div").find("p").addClass("c2 c1");
//end 找到当前结果集的上一个结果集
$("div").find("p").addClass("c2").end().addClass("c1");
//end 找到当前的对象以及当前对象的上一个结果集
$("div").find("p").addClass("c2").andSelf().addClass("c1");
})
</script>
</head>
<body>
<div id="d1">111</div>
<div id="d2">222</div>
<div id="d3">333</div>
<div id="d4">444</div>
<div id="d5">555</div>
<div>
ddddddd<br/>
<p>ppp</p>
</div>
</body>
</html>
实例七 attr html text hasClass is
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
//获取属性值
$("#d1").attr("title");
//设置属性值
$("#d1").attr("title","aaaa");
//设置多个属性值
$("#d1").attr({
"title":"bbb",
"id":"qq"
});
//获取标签加内容
var html=$("#qq").html();
//alert(html);
//获取文本内容
$("#qq").text();
//设置内容
$("#qq").text("重新设置内容");
//获取该元素是否有该样式
alert($("#qq").hasClass("c1"));
//判断该标签是否是一个xxx标签
alert($("#qq").is("div"));
});
</script>
</head>
<body>
<div id="d1" title="hhs"><p>hha</p></div>
</body>
</html>
实例八 append after mouseover mouseout hover
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css"></style>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
//在div中添加一个p标签
$("#d1").append("<p>append p标签</p>");
//将P加到div中
$("<p>appendto</p>").appendTo($("#d1"));
//将p标签加到div后面
$("<p>insert after</p>").insertAfter("#d1");
//将P标签加到div前面
$("<p>insert before</p>").insertBefore("#d1");
$("#d1").mouseover(function () {
alert("你进来啦");
});
$("#d1").mouseout(function () {
alert("你又出去啦");
});
})
</script>
</head>
<body>
<div id="d1" style="width: 400px;height: 400px;background-color: burlywood;solid-color: red;"></div>
</body>
</html>
扫一扫
1299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
