JQ随笔 jquery class大全

分类:class属性//http://www.jquery123.com/category/manipulation/class-attribute/

.addClass();为每个匹配的元素添加制定的样式类名//http://www.jquery123.com/addClass/

  1:.addClass(className);

    eg:$("p").addClass("myClass yourClass");

  2:.addClass(function(index,currentClass){})

    eg1:

    $("ul li:last").addClass(function(index) {

      return "item-" + index;

    });

    eg2:

    

    $("div").addClass(function(index, currentClass) {  //index为当前的索引值,currentClass为当前类名

      var addedClass;

    if ( currentClass === "red" ) {

      addedClass = "green";

    $("p").text("There is one green div");

    }

    return addedClass;

    });

.hasClass();确定任何一个匹配元素是否有被分配给定类//http://www.jquery123.com/hasClass/

  1:.hasClass(className) 返回true/false;

  eg:$(‘#mydiv‘).hasClass(‘foo‘);

.removeClass();移除集合中每个匹配元素上一个,多个或者全部样式。

  1:removeClass([className]) 每个匹配元素移除一个或多个空格隔开的样式名

  eg:.$(‘p‘).removeClass("myClass noClass").addClass("yourClass");    

  2:.removeClass(function(index,class){}) //index参数,表示所有在匹配元素的集合中当前元素的索引位置。class参数表示原有的样式名。

  eg:

    $(‘li:last‘).removeClass(function() {

      return $(this).prev().attr(‘class‘);

    });

.toggleClass();在匹配的元素集合的每个元素上添加或者删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:有无切换。

  1:.toggleClass(className);

  eg:$(‘div.tumble‘).toggleClass(‘bounce‘)

  2:toggleClass(className,switch); //className 在匹配元素集合中的每个元素上用来切换的一个或多个(空格隔开)样式类名。switch,用于判断是否被移除or添加

  eg1:$(‘#foo‘).toggleClass(className, addOrRemove);

  上一例子等价于:

    if (addOrRemove) {

      $(‘#foo‘).addClass(className);

    }

    else {

      $(‘#foo‘).removeClass(className);

    }

  

  3:.toggleClass([switch]);//switch一个用来判断样式添加还是移除的布尔值。

  4:toggleClass(function(index,class,switch)[,switch])//function(index,class,switch);用来返回在匹配元素集合中的每个元素上用来切换的样式类名的一个函数。接受元素的索引位置和元素就的样式类作为参数。switch判断样式类是否是添加还是移除  

  eg:

  

  $(‘div.foo‘).toggleClass(function() {

    if ($(this).parent().is(‘.bar‘)) {

      return ‘happy‘;

  } else {

    return ‘sad‘;

    }

  });

时间: 2024-08-05 08:14:13

JQ随笔 jquery class大全的相关文章

jQuery使用大全

我的程序人生 提供基于Lesktop的IM二次开发,联系QQ:76159179 CnBlogs Home New Post Contact Admin Rss Posts - 476  Articles - 0  Comments - 444 [经典]jQuery使用大全 官方网站:http://jquery.com jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可

使用jquery选择器大全的用法介绍

在jquery开发(http://www.maiziedu.com/course/python/303-2785/)当中,很多人都很在意选择器的问题,首先选择器是jQuery最基础的东西,也对获得页面元素变得更加容易.更加灵活,能减轻工程师的开发压力,本文主要加深对选择器的理解以及用法,帮助提升个人编写jQuery代码的效率.下面就一起看看对所有jQuery选择器的介绍,并且也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素

转 jquery插件--241个jquery插件—jquery插件大全

241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典的Slogan是“Write Less, Do more”(写更少的代码,做更多的事情).jQuery是轻量级的js库(压缩后只有21k) ,这是其它

JQUERY选择器大全(转载)

在Web应用程序中,大部分的客户端操作都是基于对象的操作,要操作对象就必须先获取对象,jQuery提供了强大的选择器让我们获取对象.我人为地将jQuery选择器分为两大部分:选择对象和筛选条件.选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对象. 1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id")·element 根据给定的元素名匹配所有元素.例如:$("div")·.class 根据给定的类匹

jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(func

JQUERY 常用方法大全

JQUERY 常用方法大全 Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $(&quo

100+经典常用的jQuery插件大全实例演示和下载

jQuery 表单插件 jQuery cxCalendar 日期选择器 jQuery cxColor 颜色选择器 jQuery cxSelect 联动下拉菜单 jQuery Validation Engine 表单验证 jQuery soColorPacker 网页拾色器 jQuery AutoComplete 自动补全 jQuery uploadify 文件上传 jQuery FileUpload 文件上传 jQuery LayDate 日期控件 jQuery ClockPicker 圆形时钟

【jq】JQuery对select option的操作

下拉框 <select id="selectID"> <option vlaue="1">1</option> <option vlaue="2">2</option> <option vlaue="3">3</option> </select> jq针对下拉框的基本操作有 //选择更改事件 $("#selectID&qu

Jquery 选择器大全

jQuery 选择器简介  jQuery 选择器允许对 HTML 元素组或单个元素进行操作. jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器. jQuery 中所有选择器都以美元符号开头:$(). 1 .基本选择器 $("#test") 选择id值为test的元素,id值是唯一的所以返回单个元素. $("div") 选择所有的d