Jquery
1.Jquery的历史和特点简介
1.1Jquery的历史
1.2005年8月,John Resig提议改进Prototype的“BehavIoUr”库
2.2006年1月John Resig等人创建了jQuery;8月,jQuery的第一个稳定版本,并且已经支持CSS选择符、事件处理和AJAX交互
3.2007年7月,jQuery 1.1.3版发布
4.2008年5月,jQuery 1.2.6版发布,这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中,同时也修改了许多BUG,而且有不少的性能得到提
5.2009年1月,jQuery 1.3版发布,它使用了全新的选择符引擎Sizzle
6.2010年1月,也是jQuery的四周年生日,jQuery 1.4版发布
友情提示:
JQuery 版本 2 以上不支持 IE6,7,8 浏览器。
如果需要支持 IE6/7/8,那么请选择1.9
1.2Jquery的特点
1.快速获取文档元素
jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。
2.提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。
3.创建AJAX无刷新网页
AJAX是异步的JavaScript和ML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用 AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。
4.提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。
5.增强的事件处理
jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。
6.更改网页内容
jQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式
2.使用
2.1从 jquery.com 下载 jQuery 库
官网:http://jquery.com/download/
1.首先是下载相关的资源
2.加入到项目中
3.在页面上引入jqeury.js文件:
4.在页面的相应位置上开始使用
2.2 CDN 中载入 jQuery, 如从 Google 中加载 jQuery(不推荐使用)
1.Google CDN:内容分发网络:联网加载jquery.js
最新版本(放心 copy):https://code.jquery.com/jquery-3.5.1.min.js
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
</head>
CDN:好处:不用再把jquery.js文件放在本地,减少了本地资源的消耗,同时也可以减少当前服务器本身的网络请求的压力(相当于是将网络请求转到了不同的CDN结点(不同城市的服务器))
缺点:如果因为网络原因,导致CDN结点中断,那么我们的项目中的页面上的功能就要失效了
3.Jquery基本语法
3.1.jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作
3.1.1.元素选择器
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Jquery之元素选择器</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function elementSelector(){
alert("这是元素选择器")
$('p').hide()
}
</script>
</head>
<body>
<p>Hello World:Jquery</p>
<input type="button" value="元素选择器" onclick="elementSelector()" />
</body>
</html>
小结:1)jquery是以$开头的
2)hide():隐藏HTML中的元素
3)jquery代码可以和js代码混合使用
3.1.2.id 选择器
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Jquery之元素选择器</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function elementSelector(){
alert("这是id选择器")
$('#p1').hide()
}
</script>
</head>
<body>
<p id="p1">Hello World:Jquery</p>
<input type="button" value="id选择器" onclick="elementSelector()" />
</body>
</html>
3.1.3.class 选择器
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Jquery之元素选择器</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function elementSelector(){
alert("class选择器")
$('.pp').hide()
}
</script>
</head>
<body>
<p class="pp">Hello World:Jquery</p>
<input type="button" value="class选择器" onclick="elementSelector()" />
</body>
</html>
3.2.jQuery 事件方法
3.2.1.dblclick()
dblclick():当鼠标双击元素时,会发生 dblclick 事件
例如:
$("#p1").dblclick(function(){
alert("再见,您的鼠标双击了该段落。");
});
3.2.2.mouseenter() mousedown() mouseup()
mouseleave():当鼠标指针离开元素时,会发生 mouseleave 事件
例如:
$("#p1").mouseleave(function(){
alert("再见,您的鼠标离开了该段落。");
});
mousedown():当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件
例如:
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下!");
});
mouseup():当在元素上松开鼠标按钮时,会发生 mouseup 事件
例如:
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
3.2.3.hover()
hover()方法用于模拟光标悬停事件。
$("img").hover(
function(){//相当于mouseenter
console.log("你进入了 p1!");
},
function(){//相当于mouseleave
console.log("拜拜! 现在你离开了 p1!");
}
)
// 当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);
// 当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
3.3.jquery特效
3.3.1.隐藏和显示
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>dblclick</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function hiddenEle(){
var Box=$("#Box");
Box.hide();
}
function showEle(){
var Box=$("#Box");
Box.show();
}
</script>
</head>
<body >
<div id="Box" >
<p>上海滩</p>
<p>大上海。。。。百乐门。。。。</p>
</div>
<input type="button" id="btn" value="隐藏" onclick="hiddenEle()" />
<input type="button" id="btn" value="显示" onclick="showEle()" />
</body>
</html>
3.3.2.淡入淡出
淡入:fadeIn()
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="../js/jquery.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
淡出:fadeOut()
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="../js/jquery.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
如果元素已淡出,则 fadetoggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadetoggle() 会向元素添加淡出效果。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>点击淡入/淡出</title>
<script src="../js/jquery.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadetoggle();
$("#div2").fadetoggle("slow");
$("#div3").fadetoggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadetoggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
$(selector).fadeto(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
fadeto() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="../js/jquery.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeto("slow",0.15,function(){
alert("这个是第三个参数的效果")
});
$("#div2").fadeto("slow",0.4);
$("#div3").fadeto("slow",0.7);
});
});
</script>
</head>
<body>
<p>演示 fadeto() 使用不同参数</p>
<button>点我让颜色变淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
3.3.3.滑动
slideDown() 方法用于向下滑动元素
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="../js/jquery.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow",function(){
alert("滑动展开了div,要执行的第二个参数")
$("#flip").css("color","red")
});
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello World!</div>
</body>
</html>
slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="../js/jquery.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow",function(){
$("#flip").css("color","blue")
});
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">点我拉起面板</div>
<div id="panel">Hello World!</div>
</body>
</html>
如果元素向下滑动,则 slidetoggle() 可向上滑动它们。
如果元素向上滑动,则 slidetoggle() 可向下滑动它们。
$(selector).slidetoggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel").slidetoggle("slow",function()
{
alert("执行了")
var flipValue=$("#flip").text()
alert("flipValue:"+flipValue)
if(flipValue=="展开面板")
{
$("#flip").css("color","red")
$("#flip").text("收起面板")
}
else
{
$("#flip").css("color","blue")
$("#flip").text("展开面板")
}
});
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">展开面板</div>
<div id="panel">Hello World!</div>
</body>
</html>
3.3.4.动画
语法:animate({params},speed,callback);
参数简介:{params}:是一个必选参数,定义了形成动画的CSS属性,类型为字典类型
speed:可选的参数其规定效果的时长也就是滑动的速度。它可以取值为:“slow”、“fast” 或毫秒
callback: 可选的参数是动画完成后所执行的函数名称
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function doanimate(){
$("div").animate({left:'250px'},"slow",function(){
alert("滑动这个动画效果执行之后可以加载一个匿名函数")
$("p").css("color","red")
})
}
</script>
</head>
<body>
<input type="button" value="开始动画" onclick="doanimate()" />
<p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
animate() - 操作多个属性
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function doanimateForManyCss(){
$("div").animate({left:'250px',top:'300px',width:'300px'},"slow",function(){
alert("滑动这个动画效果执行之后可以加载一个匿名函数")
$("p").css("color","red")
})
}
</script>
</head>
<body>
<input type="button" value="开始动画" onclick="doanimateForManyCss()" />
<p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery animate() - 使用预定义的值(就是已经是写好的)
把属性的动画值设置为 “show”、“hide” 或 “toggle”
$("div").animate({
width:"hide",//左右隐藏
height:"hide"//上下隐藏,二者作用下就是缩小隐藏
height:"toggle"//上下隐藏或者展开
},
"slow",function(){
alert("滑动这个动画效果执行之后可以加载一个匿名函数")
$("p").css("color","red")
})
jQuery 提供针对动画的队列功能(按照顺序进行加载)。
这意味着如果您在之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function doanimateForManyCssByQueene(){
$("div").animate({left:"300px"},"slow")
$("div").animate({top:"300px"},"slow")
$("div").animate({width:'300px'},"slow")
}
</script>
</head>
<body>
<input type="button" value="开始动画" onclick="doanimateForManyCssByQueene()" />
<p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
语法:stop(stopAll,goToEnd);
参数简介:
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<style type="text/css">
#pane,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#pane
{
padding:50px;
display:none;
}
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function (){
$("#pane").slideDown(5000);//5000毫秒就是5秒
})
})
function stopPush(){
$("#pane").stop()
}
</script>
</head>
<body >
<input type="button" value="停止滑动" onclick="stopPush()"/>
<div id="flip">点我向下滑动面板</div>
<div id="pane">Hello World!</div>
</body>
</html>
4.Jquery的HTML(DOM)操作
4.1获取内容和属性
jQuery 中非常重要的部分,就是操作 DOM 的能力
1)获得内容 - text()、html() 以及 val()
$("#btn1").click(function (){
alert($("#test").text())
})
$("#btn1").click(function ()
{
alert("通过val()获取的数据:"+$("#test").val())
})
$("#btn2").click(function (){
alert($("#test").html())
})
$("#btn1").click(function (){
alert("显示 class 属性的值:"+$("#p1").attr("class"))
})
4.2jQuery - 添加元素
1)结尾追加元素
$("#btn1").click(function (){
$("p").append("追加文本")
})
$("#btn2").click(function (){
$("p").append("<li>追加列表项</li>")
})
2)jQuery prepend() 方法在被选元素的开头插入内容:文本内容,元素
$(document).ready(function (){
$("#btn1").click(function (){
$("p").prepend("在文本的开头添加了内容: ")
})
$("#btn2").click(function (){
$("ol").prepend("<li>在开头添加列表项</li>")
})
})
3)通过 append() 和 prepend() 方法添加若干(>=0个)新元素
小结:append()和prepend():可以传入无数的参数
var txt1="<p>添加的内容:</p>"
$("p").prepend(txt1,txt1,txt1)
4)jQuery after() jQuery before()
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
$(document).ready(function ()
{
$("#btn1").click(function ()
{
var txt1="<p>之前的内容: </p>"
$("img").before(txt1)
})
$("#btn2").click(function ()
{
var txt2="<p>之后的内容: </p>"
$("img").after(txt2)
})
})
4.3jQuery - 删除元素
function deleteElement(){
$("#dv").remove()
}
function deleteElement(){
$("#dv").empty()
}
3)过滤被删除的元素
remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
function deleteElement(){
$("p").remove(".sta")
}
4.4.jQuery - 获取并设置 CSS 类
1)addClass() - 向被选元素添加一个或多个样式/class
<style type="text/css">
.blue{color: #0000FF;}
.green{color: green;}
.import{
color: red;
font-size: 28px;
font-family: "微软雅黑";
}
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function addCssForEnement(){
$("h1").addClass("blue")
$("h2").addClass("blue")
$("div").addClass("green")
$("p").addClass("import")
}
</script>
2)removeClass() - 从被选元素删除一个或多个类
<style type="text/css">
.blue{color: #0000FF;}
.green{color: green;}
.import{
color: red;
font-size: 28px;
font-family: "微软雅黑";
}
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function removeCssForEnement(){
/*$("h1").removeClass("blue")
$("h2").removeClass("blue")
$("div").removeClass("green")
$("p").removeClass("import")*/
$("h1,h2").removeClass("blue")
}
</script>
3)toggleClass() - 对被选元素进行添加/删除类的切换操作
<style type="text/css">
.blue{color: #0000FF;}
</style>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function siwtchCssForEnement(){
$("h1,h2").toggleClass("blue")
}
</script>
4.5.jQuery css() 方法
<script src="jquery.js"></script>
<script type="text/javascript">
function getCssValue()
{
alert($("p").css("width"))//返回首个匹配元素
alert($("#p2").css("width"))
}
</script>
<script src="jquery.js"></script>
<script type="text/javascript">
function setCssValue()
{
$("p").css("background-color","red")
}
</script>
3)设置多个 CSS 属性的值
<script src="../js/jquery.js"></script>
<script type="text/javascript">
function setManyCssValue(){
$("p").css({
"background-color":"yellow",
"font-size":"200%"
});
}
</script>
4.6.jQuery 尺寸方法
<script src="../js/jquery.js"></script>
<script type="application/javascript">
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="div 的宽度是: " + $("#div1").width() + "</br>";
txt+="div 的高度是: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="div 宽度: " + $("#div1").width() + "</br>";
txt+="div 高度: " + $("#div1").height() + "</br>";
txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>";
txt+="div 高度,包含内边距: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
5.Jquery遍历
5.1遍历 - 祖先
1)parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("span").parent().css({"color":"red","border":"2px solid red"})
})
</script>
2)parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()
$(document).ready(function (){
$("span").parents().css({"color":"red","border":"2px solid red"})
})
3)parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。两个开区间
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"})
})
</script>
5.2遍历 - 后代
后代是子、孙、曾孙等等。
通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代。
1)children() 方法返回被选元素的所有直接子元素。
<script type="text/javascript">
$(document).ready(function(){
$(".dv").children().css({"color":"red","border":"2px solid red"})
})
</script>
2)find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
$(document).ready(function(){
//$(".dv").find("span").css({"color":"red","border":"2px solid red"}) //找span
$(".dv").find("*").css({"color":"red","border":"2px solid red"}) //所有
})
5.3遍历 - 同胞(siblings)
同胞拥有相同的父元素。通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素。
1)siblings() 方法返回被选元素的所有同胞元素。
<script type="text/javascript">
$(document).ready(function (){
$("h2").siblings().css({"color":"red","border":"2px solid red"})
})
</script>
$(document).ready(function (){
$("h2").next().css({"color":"red","border":"2px solid red"})
})
3)nextAll() 方法返回被选元素的所有跟随的同胞元素。
$(document).ready(function (){
$("h2").nextAll().css({"color":"red","border":"2px solid red"})
})
4)nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素:可以简单的理解为h2和h6之间夹的元素 开区间
$(document).ready(function (){
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"})
})
5.4遍历- 过滤
遍历过滤:缩小搜索元素的范围
$(document).ready(function (){
$("body div").first().css("background-color","yellow")
})
$(document).ready(function (){
$("body div").last().css("background-color","yellow")
})
3)eq() 方法返回被选元素中带有指定索引号的元素。:从匹配的一组中选中某一个进行显示
索引号从 0 开始,因此首个元素的索引号是 0 而不是 1
$(document).ready(function (){
$("p").eq(1).css("background-color","yellow")
})
4)filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回:匹配的 选择显示,不匹配的不显示
$(document).ready(function (){
$("p").filter(".qs").css("background-color","yellow")
})
5)not() 方法返回不匹配标准的所有元素。
$(document).ready(function (){
$("p").not(".qs").css("background-color","yellow")
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。