<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wrap</title>
<script type="text/javascript" src="../jquery/jquery-1.11.3.min.js"></script>
<style type="text/css">
.lianjie{display: inline-block;border:1px solid red}
.border{border:1px solid red}
.border1{outline: 4px dotted green }
</style>
</head>
<body>
<a href="http://www.baidu.com" class="baidu">百度</a>
<a href="http://www.souhu.com" class="souhu">百度</a>
<a href="http://www.xinlang.com" class="xinlng">百度</a>
<img src="1.jpg" alt="这是张图片"/> <script type="text/javascript">
$(document).ready(function(){
$("img").addClass("picture");//添加class属性
$("img").removeClass("picture").addClass("t_pic");//删除并添加class属性
console.log($("img").hasClass("t_pic"));//hasClass检测是否存在Class属性 $("a:odd").addClass("lianjie");//odd 奇数 even偶数 $("a").addClass(function(index,eclass){//动态添加class属性 index是索引 elcass处理当前元素拥有的class属性
if(index%==){
return "even";
}else{
return "odd";
}
}); $("a").filter(":odd").addClass("oddClass").end()//filter()筛选出于表达式匹配的结果集 end()返回最近一次的破坏性操作之前,将匹配的元素列表变为前一次状态
.filter(":even").addClass("evenClass"); $("<button>toggle</button>").appendTo("body").click(doToggle); function doToggle(e){
// $("img").toggleClass("border");//toggleClass切换class
// $("img").toggleClass("border border1");//toggleClass切换多个class
// $("img").toggleClass();//toggleClass()不添加参数的话是切换全部class
// $("img").toggleClass("border",false);//toggleClass()第二个参数是false只删除
// $("img").toggleClass("border",true);//toggleClass()第二个参数是true值添加
$("a").toggle(function(index,currentClass){ if(index%==){
return "border";
}else{
return "border1";
} }); e.preventDefault();
} }); </script>
</body>
</html>

jquery 相关class属性的操作的更多相关文章

  1. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  2. JQuery 相关用法和操作

    01-JQuery 基础语法: 1.使用JQuery必须先导入JQuery.x.x.xjs文件. 2.JQuery中的选择器: $(选择器).函数() ① $是JQuery的缩写,既可以使用JQuer ...

  3. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  4. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

  5. js进阶 11-2 jquery属性如何操作

    js进阶 11-2  jquery属性如何操作 一.总结 一句话总结:jquery中的属性用attr方法表示.jquery中都是方法. 1.jquery中的属性的增删改查操作? 只需要两个方法, at ...

  6. JQuery知识快览之五—操作属性和结构

    前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法. prop还是attr? 从JQuery1.6版开始,新增了prop方法来获取和设 ...

  7. jQuery attr removeAttr 属性操作

    jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...

  8. jquery 学习(二) - 属性操作

    html代码 <div class="n1" zdy="z1">AAA <p>1111111</p> <input t ...

  9. jQuery学习之------对标签属性的操作

    jQuery学习之------标签的属性 <a href=””>链接</a>此处的href就是该a标签带有的属性 在js中对标签的属性的操作方法有 1.1getAttribut ...

随机推荐

  1. PLSQL_性能优化系列14_Oracle High Water Level高水位分析

    2014-10-04 Created By BaoXinjian 一.摘要 PLSQL_性能优化系列14_Oracle High Water Level高水位分析 高水位线好比水库中储水的水位线,用于 ...

  2. ADO.NET基础(增删改查)

    ADO.NET是一种数据访问技术,就是将C#和MSSQL连接起来的一个纽带.可以通过ADO.NET将内存中的临时数据写入到数据库中,也可以将数据库中的数据提取到内存中供程序调用. ADO.NET是所有 ...

  3. mongodb,redis,mysql 简要对比

    本篇内容大部分不是原创,转载的会贴有链接. 准备学习下数据库,想对目前的主流数据库做一个简单的了解分析,就搜集了资料整理到了一块. 当下主流的要数NoSql数据库了,拥有强大的高并发能力. mongo ...

  4. CSS如何实现图片上下垂直居中

    方法一: 使用margin方式,使图片在div中上下垂直居中.margin-top值的计算方式是:div的高度/2-图片高度/2. 代码实例如下: <!DOCTYPE html><h ...

  5. Java多线程之捕获异常

    1.主线程不能捕获到子线程的异常 package Thread.Exection; import java.util.concurrent.ExecutorService; import java.u ...

  6. NSSet类型 以及与NSArray区别

    NSSet到底什么类型,其实它和NSArray功能性质一样,用于存储对象,属于集合: NSSet  , NSMutableSet类声明编程接口对象,无序的集合,在内存中存储方式是不连续的,不像NSAr ...

  7. C# Bitmap Save Generic GDI+ Error

    Image.Save 方法 (String) 将该 Image 保存到指定的文件或流. 命名空间:  System.Drawing程序集:  System.Drawing(在 System.Drawi ...

  8. (转)关于rdlc报表的数据源

      rdlc 报表字符类数据分为文本数据和表数据,区别就在于文本数据只有一个,表数据可以有多行,然而有很多数据只需要一个传入就可以比如打印某个用户的基本信息,很多信息都是唯一的,如果此时报表传入的数据 ...

  9. [ActionScript 3.0] AS3 绘制星形

    package { import flash.display.Sprite; import flash.events.Event; /** * @author Frost.Yen * @E-mail ...

  10. 页面设计--TextBox

    TextBox文本框 主要介绍  输出感应.允许为空.热点提示等功能 输出感应: 在Textbox文本框属性中找到输出感应设置需要感应的字段 在web中显示感应功能: 允许为空:   点击保存此页面时 ...