扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
jQuery支持多选,所以一次获取多个元素进行操作取决于你所写的选择器包含了哪些元素——如果只有一个元素,那就对一个元素进行操作;如果包含了多个元素,那就是都多个元素进行操作。下面给出实例演示:创建Html元素:主体是一个li列表不同的选择器决定了不同的作用对象: Glen Tane John Ralph设置css样式:大致修饰一下div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}div.boxspan{color:#999;font-style:italic;}div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}li{margin:5px;list-style: none;}.red{color:red;}根据不同的jquery代码观察不同的效果$("li")包含了4个元素,所以一次操作了4个对象$("li").addClass('red');$("li").eq(1)将选择范围缩小到第二个li元素,即只有一个作用对象$("li").eq(1).addClass('red');$("li:gt(1)") 表示index大于1的li,也就是后两个li。同理可以用lt(N)表示index小于N$("li:gt(1)").addClass('red');
10多年的大箐山网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整大箐山建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“大箐山网站设计”,“大箐山网站推广”以来,每个客户项目都认真落实执行。
这个很简单,就是setInterval()的使用问题,示例如下:
script src=""/script
script
$(function(){
var i = 0, t = $('ul li').hide().length, tmp = setInterval(function(){
$('ul li').hide().eq(i t-1 ? i = 0 : i++).fadeIn(1000);
}, 3000);
});
/script
div
ul
li id="1"轮流显示1/li
li id="2"轮流显示2/li
li id="3"轮流显示3/li
/ul
/div
jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 p 元素。
$("p.intro") 选取所有 class="intro" 的 p 元素。
$("p#demo") 选取所有 id="demo" 的 p 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("#元素id").find("li:gt(48)").each(function (){ //具体代码})
给find函数的参数为:‘li:gt(48)’;表示从下标大于48,也就是下标为49开始遍历。(因为下标是从0开始,49代表第50个)
既然已预知共有3个标签,且这3个标签都有共同的特性(包含li,li可能会有class为on的属性值),可以使用jQuery直接判断它们的数量,如果存在3个li的class带有on属性值的话,就是成功了。举例如下:
HTML代码:
ul class="nav_q1"
li class="on"我是第一题/li
/ul
ul class="nav_q2"
li class="on"我是第二题/li
/ul
ul class="nav_q3"
li class="on"我是第三题/li
/ul
JavaScript代码:
if ($('.nav_q1, .nav_q2, .nav_q3').find('li.on:first').length == 3) {
alert('验证通过');
}else{
alert('第' + ($('.nav_q1, .nav_q2, .nav_q3').find('li:not(".on")').first().parent('ul').index() + 1) + '题没有选');
}
//第一行中li.on:first带有一个:first是为了防止同一个父元素下多个li标签存在class的on属性。只计算一个。
//如果每个父元素下都有li.on那么就是成功了。
//在else中提醒未选的那条语句的li:not(".on")是去寻找父元素下class不包含on的li标签。后面的.first()是获取第一个被匹配的li标签。
这样处理的话,只是一行if语句就结果问题了。
代码已在本地测试过,可以提示验证通过或者某一个题未选。
javascript:
$(function(){
var li = $('li'),
len = li.size() - 1,
n = 0,
outIndex = 0;
function fade(){
li.eq(n).fadeIn();
outIndex = (n - 1) 0 ? len : n - 1;
li.eq(outIndex).fadeOut();
if(n len){
n++
}else{
n = 0;
}
}
fade();
setInterval(function(){
fade();
},2000);
})
css:
ul{
position: relative;
}
li{
display: none;
position: absolute;
top:0;
left: 0;
}
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流