复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
1.简单过滤选择器:根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头;简单过滤选择器是过滤选择器中使用最广泛的一种
jQuery选择器详解
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
-->
<title>使用jQuery基本过滤选择器</title>
<!--使用jQuery基本过滤选择器选择元素:在页面中,设置一个<h1>标记用户显示主题,创建<ul>标记并在其中放置四个<li>,再创建一个<span>标记,用于执行动画效果。通过简单过滤选择器获取元素,将选中的元素改变其类名称,从而突出其被选中的状态-->
<script src="/UploadFiles/2021-04-02/jquery-1.9.1.js"><style type="text/css">
body{font-size:12px;text-align:center;}
div{width:240px;height:83px;border:solid 1px #eee}
he{font-size:13px;}
ul{list-style-type:none;padding:0px}
.DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee}
.GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
#spnMove{width:234px;height:23px;line-height:23px;}
</style>
<script type="text/javascript">
$(function () { //增加第一个元素的类别
$('li:first').addClass('GetFocus');
})
$(function () { //增加最后一个元素的类别
$('li:last').addClass('GetFocus');
})
$(function () { //增加去除所有与给定选择器匹配的元素类别
$('li:not(.NotClass)').addClass('GetFocus');
})
$(function () { //增加所有索引值为偶数的元素类别,从0开始计数
$('li:even').addClass('GetFocus');
})
$(function () { //增加所有索引值为奇数的元素类别,从0开始计数
$('li:odd').addClass('GetFocus');
})
$(function () { //增加一个给定索引值的元素类别,从0开始计数
$('li:eq(1)').addClass('GetFocus');
})
$(function () { //增加所有大于给定索引值的元素类别,从0开始计数
$('li:gt(1)').addClass('GetFocus');
})
$(function () { //增加所有小于给定索引值的元素类别,从0开始计数
$('li:lt(4)').addClass('GetFocus');
})
$(function () { //增加标题类元素类别
$('div h1').css('width', '238');
$(':header').addClass('GetFocus');
})
$(function () {
animateIt(); //增加动画效果元素类别
$('#spnMove:animated').addClass('GetFocus');
})
function animateIt() { //动画效果
$('#spnMove').slideToggle('slow', animateIt);
}
</script>
</head>
<body>
<div>
<h1>基本过滤选择器</h1>
<ul>
<li class="DefClass">Item 0</li>
<li class="DefClass">Item 1</li>
<li class="NotClass">Item 2</li>
<li class="DefClass">Item 3</li>
</ul>
<span id="spnMove">Span Move</span>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
1.简单过滤选择器:根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头;简单过滤选择器是过滤选择器中使用最广泛的一种
jQuery选择器详解
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
-->
<title>使用jQuery基本过滤选择器</title>
<!--使用jQuery基本过滤选择器选择元素:在页面中,设置一个<h1>标记用户显示主题,创建<ul>标记并在其中放置四个<li>,再创建一个<span>标记,用于执行动画效果。通过简单过滤选择器获取元素,将选中的元素改变其类名称,从而突出其被选中的状态-->
<script src="/UploadFiles/2021-04-02/jquery-1.9.1.js"><style type="text/css">
body{font-size:12px;text-align:center;}
div{width:240px;height:83px;border:solid 1px #eee}
he{font-size:13px;}
ul{list-style-type:none;padding:0px}
.DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee}
.GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
#spnMove{width:234px;height:23px;line-height:23px;}
</style>
<script type="text/javascript">
$(function () { //增加第一个元素的类别
$('li:first').addClass('GetFocus');
})
$(function () { //增加最后一个元素的类别
$('li:last').addClass('GetFocus');
})
$(function () { //增加去除所有与给定选择器匹配的元素类别
$('li:not(.NotClass)').addClass('GetFocus');
})
$(function () { //增加所有索引值为偶数的元素类别,从0开始计数
$('li:even').addClass('GetFocus');
})
$(function () { //增加所有索引值为奇数的元素类别,从0开始计数
$('li:odd').addClass('GetFocus');
})
$(function () { //增加一个给定索引值的元素类别,从0开始计数
$('li:eq(1)').addClass('GetFocus');
})
$(function () { //增加所有大于给定索引值的元素类别,从0开始计数
$('li:gt(1)').addClass('GetFocus');
})
$(function () { //增加所有小于给定索引值的元素类别,从0开始计数
$('li:lt(4)').addClass('GetFocus');
})
$(function () { //增加标题类元素类别
$('div h1').css('width', '238');
$(':header').addClass('GetFocus');
})
$(function () {
animateIt(); //增加动画效果元素类别
$('#spnMove:animated').addClass('GetFocus');
})
function animateIt() { //动画效果
$('#spnMove').slideToggle('slow', animateIt);
}
</script>
</head>
<body>
<div>
<h1>基本过滤选择器</h1>
<ul>
<li class="DefClass">Item 0</li>
<li class="DefClass">Item 1</li>
<li class="NotClass">Item 2</li>
<li class="DefClass">Item 3</li>
</ul>
<span id="spnMove">Span Move</span>
</div>
</body>
</html>
标签:
jQuery,过滤,选择器
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“jQuery基本过滤选择器使用介绍”评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新动态
2024年11月19日
2024年11月19日
- Fine乐团《废墟游乐》[320K/MP3][105.13MB]
- 万山红.2009-花开原野万山红Vol.1-2【柏菲】2CD【WAV+CUE】
- 曾庆瑜1992-18首中英文经典全集[台湾派森][WAV整轨]
- 【上扬爱乐】群星-TheSoundsofLS35AVol.4情迷4【低速原抓WAV分轨】
- Fine乐团《废墟游乐》[Hi-Res][24bit 48kHz][FLAC/分轨][767.04MB]
- Cicada《回返 (十五周年自选集)》[320K/MP3][93.87MB]
- Cicada《回返 (十五周年自选集)》[Hi-Res][24bit 48kHz][FLAC/分轨][466.75MB]
- 郑智化.2024-不思议【智在上作】【FLAC分轨】
- 罗文.2015-NEW.XRCD精丫华星】【WAV+CUE】
- 许秋怡.1995-电影少女【丽音唱片】【FLAC分轨】
- 【中国艺术歌曲典藏】温雅欣《她比烟花寂寞》紫银合金SQCD【低速原抓WAV+CUE】
- 张国荣《FinalEncounter》头版限量编号MQA-UHQ[低速原抓WAV+CUE].
- 发烧萨克斯-雪国之春(SRS+WIZOR)[原抓WAV+CUE]
- 王铮亮《慢人理论》[320K/MP3][175.31MB]
- 王铮亮《慢人理论》[FLAC/分轨][524.11MB]