jquery 相关class属性的操作
<!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属性的操作的更多相关文章
- js进阶 11-3 jquery中css属性如何操作
js进阶 11-3 jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...
- JQuery 相关用法和操作
01-JQuery 基础语法: 1.使用JQuery必须先导入JQuery.x.x.xjs文件. 2.JQuery中的选择器: $(选择器).函数() ① $是JQuery的缩写,既可以使用JQuer ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- js进阶 11-2 jquery属性如何操作
js进阶 11-2 jquery属性如何操作 一.总结 一句话总结:jquery中的属性用attr方法表示.jquery中都是方法. 1.jquery中的属性的增删改查操作? 只需要两个方法, at ...
- JQuery知识快览之五—操作属性和结构
前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法. prop还是attr? 从JQuery1.6版开始,新增了prop方法来获取和设 ...
- jQuery attr removeAttr 属性操作
jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...
- jquery 学习(二) - 属性操作
html代码 <div class="n1" zdy="z1">AAA <p>1111111</p> <input t ...
- jQuery学习之------对标签属性的操作
jQuery学习之------标签的属性 <a href=””>链接</a>此处的href就是该a标签带有的属性 在js中对标签的属性的操作方法有 1.1getAttribut ...
随机推荐
- 2016 Multi-University Training Contest 5 Divide the Sequence
Divide the Sequence 题意: 给你一个序列A,问你最多能够分成多少个连续子序列,使得每个子序列的所有前缀和均不小于0 题解: 这题是比赛时候的水题,但我比的时候也就做出这一题, = ...
- Javascript生成GUID
GUID(全球唯一标识)是微软使用的一个术语,由一个特定的算法,给某一个实体,如Word文档,创建一个唯一的标识,GUID值就是这个唯一的标识码.除了.Net有专门的方法生成外,JS也可以生成GUID ...
- c语言-枚举
自定义枚举数据类型:一般在函数返回值调用过程中,被调用函数具体实现中可以直接return 枚举列表中的常量值而不用定义具体的枚举数据,调用方则需用枚举具体的数据变量来接收返回结果,而不能用#defin ...
- UCOS-消息邮箱(学习笔记)
任务间数据传递通过缓冲区进行,如果将缓冲区赋值给时间控制块成员:指针OSEventPtr,且任务控制块类型为OS_EVENT_TYPE_MBOS则即为消息邮箱: 一创建消息邮箱:OS_EVENT *O ...
- Cocoa编程中视图控制器与视图类详解
iPhone编程规则是:一个窗口,多个视图.UIView是iPhone屏幕上很多控件的基础类.每个iPhone用户界面都是由显示在UIWindow(这其实也是个特殊的UIView)内的众多UIView ...
- 织梦后台更新,报错DedeCMS Error:Tag disabled:"php" more...
网站采用织梦v5.7版本,在做过一次后台补丁更新后,再对网站“生成”操作的时候,无厘头出现报错“ 网站后台--系统--系统基本参数---其他选项 ---模板引擎禁用标签:php ,把php删掉 保存 ...
- 修改Tomcat的网站根目录
想把Tomcat的默认网站根目录修改成自己指定的目录,比如:F:/MyWeb.这样以后把自己写的index.jsp放到该目录下,就能通过http://localhost:8080/index.jsp来 ...
- 【转】深入理解Java:注解(Annotation)自定义注解入门
http://www.cnblogs.com/peida/archive/2013/04/24/3036689.html 元注解: 元注解的作用就是负责注解其他注解.Java5.0定义了4个标准的me ...
- ELK stack elasticsearch/logstash/kibana 关系和介绍
ELK stack elasticsearch 后续简称ES logstack 简称LS kibana 简称K 日志分析利器 elasticsearch 是索引集群系统 logstash 是日志归集集 ...
- MongoDB 多条件组合查询
组合条件查询json格式语法 { "$and": [ { "Date": { $gt: ISODate("2015-06-05T00:45:00.00 ...