jquery 相关class属性的操作
2016-04-04 17:27
555 查看
<!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%2==0){ 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%2==0){ return "border"; }else{ return "border1"; } }); e.preventDefault(); } }); </script> </body> </html>
相关文章推荐
- jQuery学习笔记之unbind()
- jqueryui.position.js源代码分析
- jQuery ui
- JS中使用JQuery
- jquery通过ajax方法获取json数据不执行success
- jQuery+zTree加载树形结构菜单
- Struts2+Jquery实现ajax并返回json类型数据
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
- Jquery元素追加和删除
- 【jQuery源码】html,text,val
- 【jQuery源码】preFilter
- 【jQuery源码】select方法
- jQuery学习笔记
- jquery自制折叠菜单
- jquery给h1和span赋值
- Jquery Table 的基本操作
- jQuery源码浅析
- jQuery UI 知识点
- jquery-ui以及js复习
- jquery