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 ...
随机推荐
- Top 6 Programming Languages for Mobile App Development
Mobile application development industry in the last five years have multiplied in leaps and bounds, ...
- PC-Lint安装配置与集成到VS2010
第一篇 PC-lint 9 安装及配置教程 1.从这里下载PC-lint.9.0e.rar,解压缩(目录中的patch文件夹不用,因为它只能将PC-lint升级到9.0e ) 2.点击pclint9s ...
- CSU 1803 2016(数论)
2016 Problem Description: 给出正整数 n 和 m,统计满足以下条件的正整数对 (a,b) 的数量: 1≤a≤n,1≤b≤m; a×b 是 2016 的倍数. Input: 输 ...
- pyhton读取json格式的气象数据
原文关于读取pm25.in气象数据的pyhton方法,以及浅析python json的应用 以pm25.in网站数据为例. 1.方法介绍 首先感谢pm25.in提供了优质的空气污染数据,为他们的辛勤劳 ...
- 转:谷歌大脑科学家 Caffe缔造者 贾扬清 微信讲座完整版
[转:http://blog.csdn.net/buaalei/article/details/46344675] 大家好!我是贾扬清,目前在Google Brain,今天有幸受雷鸣师兄邀请来和大家聊 ...
- [MySQL] 两个优化数据库表的简单方法--18.3
这里介绍两个简单的优化MySQL数据库表的方法 一.定期分析表和检查表 1.分析表语法如下: alalyze [local|no_write_to_binlog] table table_name1[ ...
- Python中split()函数的用法及实际使用示例
Python中split()函数,通常用于将字符串切片并转换为列表. 一.函数说明: split():语法:str.split(str="",num=string.count(st ...
- git config(转载)
From:http://www.g2w.me/2013/10/cache-github-credential-for-https-repository/ http://openwares.net/li ...
- wcf使用task实现异步调用
private async void btnGetEmployees_Click(object sender, RoutedEventArgs e) { txtInfo.Text = "Da ...
- js判断手机是的操作系统
var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; retu ...