Jquery遍历元素更改class属性

js实例

 代码如下 复制代码

<style type="text/css">
*{margin:0;padding:0;}
.demonstrate{padding:20px;}
.description h3{color:#900;padding:8px 0;}
.description p{ line-height:23px;}
#demo{width:550px;padding:5px;border:1px #f00 solid;float:left;}
#demo a{width:100px; height:100px; background:#9CF;float:left;margin:5px;}
#demo >a:hover,#demo >a.active{ color:#fff;font-weight:bold;background:#F00;}
</style>
<script type="text/javascript">
window.onload=function(){
 var demo=document.getElementById("demo");
 var children=demo.getElementsByTagName("a");
 var num=0;
 for(var i=0;i<children.length;i++){
  children[i].index=i;//保留当前点击项所在索引值
  children[i].onclick=function(){
   children[num].className="";
   this.className="active";
   num=this.index;
  }
 }
}
</script>
<!--实例效果文字描述，可删-->
<div class="demonstrate">
<div class="description">
 <h3>实现jq遍历元素更改class属性的原生js写法</h3>
 <p>实现效果：点击当前项添加class名:active,其它同级项移除该class名</p>
 <p>实现原理：设置一变量（实例是num）用于记录当前点击项的所在索引值，当发生点击事件时先去掉原先记录到索引值对应项的class名,再为当前点击项添加class名！关键是点击项所在索引值的记录！</p>
</div>
<!--实例效果文字描述，结束-->
<div id="demo">
 <a href="#" class="active">item1</a>
 <a href="#">item2</a>
 <a href="#">item3</a>
 <a href="#">item4</a>
 <a href="#">item5</a>
 <a href="#">item6</a>
 <a href="#">item7</a>
 <a href="#">item8</a>
 <a href="#">item9</a>
 <a href="#">item10</a>
</div>
</div>

 

&nbsp;JQuery遍历1:CssClass遍历元素
将所有的checkbox设置为未选中，采用遍历的方法来完成
控件如下

 代码如下 复制代码

<button id="ClearPosition" type="button">清空职位</button>

<input type="checkbox"   class="jobPostaJoblist"/><span>导购/促销</span>
<input type="checkbox"   class="jobPostaJoblist"/><span>收银员</span>
 <input type="checkbox"   class="jobPostaJoblist"/><span>店长</span>          

  

JQUERY代码如下：

jobPostaJoblistSelected是checkbox被选中时的css

stopDefault函数用于中止默认的事件响应

 代码如下 复制代码

 $("#ClearPosition").each(function(i) {
              $(this).click(function(e) {
                  $("input[class*='jobPostaJoblist']").each(function(i) {
                      $(this).attr("checked", false);
                      $(this).next().removeClass("jobPostaJoblistSelected");
                  });
                  return stopDefault(e);
              });
          });

          function stopDefault(e) {
              if (e && e.preventDefault) {
                  e.preventDefault();
              } else {
                  window.event.returnValue = false;
              }
              return false;
          }
时间： 2024-08-02 06:49:10

Jquery遍历元素更改class属性的相关文章

JQuery遍历元素的后代和同胞实现方法_jquery

1.遍历后代 children() children() 方法返回被选元素的所有直接子元素. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

JQuery遍历元素的父辈和祖先的方法_jquery

JQuery遍历 首先我们要知道 什么是 父亲,儿子,后代,同胞,祖先 •<div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先. •<ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素 •左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代. •<span> 元素是 <li> 的子元素,同时是 <

从零开始学习jQuery(四) 使用jQuery操作元素的属性与样式

一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

jQuery遍历DOM元素与节点方法详解_jquery

本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,

jQuery操作元素的属性与样式(1/2)

区分DOM属性和元素属性 一个img标签:  代码如下 复制代码 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id, src, alt等叫做这个元素的"属性". 我将其称为"元素属性". 但是在解析成DOM对象时, 实际浏览器最后会将标签元素解析成&

jQuery入门(17) 读写HTML元素的css属性

jQuery 的css()方法用来设置或读取HTML元素的css属性. 读取元素的CSS语法语法如下: css("propertyname"); 比如下面代码取得第一个<p>元素的背景颜色. $("p").css("background-color"); 使用下面的语法来设置HTML元素的CSS属性: css("propertyname","value"); 例如,下面代码为所有<p>

JS Jquery 遍历,筛选页面元素 自动完成

本篇文章是对JS Jquery 遍历,筛选页面元素 自动完成的实现代码进行了详细的分析介绍,需要的朋友参考下   复制代码 代码如下:         <script>         var value = "teset";         var s = new RegExp(value, "i")//I 表示不区分大小写(可省略)         $(".lico").each(function (i, n) {    //li

JQuery节点元素属性操作方法_jquery

本文实例讲述了JQuery节点元素属性操作方法.分享给大家供大家参考.具体分析如下: 在JQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性. 获取属性和设置属性 如果要获取p元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称. var $para = $("p"); //获取<p>节点 var p_txt = $para.attr("title"); //获取<p>元素节

jquery动态遍历Json对象的属性和值的方法_javascript技巧

1.遍历 json 对象的属性 //定义json对象 var person= { name: 'zhangsan', pass: '123', fn: function(){ alert(this.name+"的密码="+this.pass); } } //遍历person属性包括方法,如果不想显示出方法,可用typeof(person[item])== "function"来判断 for(var item in person){ alert("perso