zoukankan      html  css  js  c++  java
  • jquery 操作css 选择器

    .addClass()
      为每个匹配的元素添加指定的样式类名
      .addClass(className)
        className 为每个匹配元素所有增加的一个或多个样式名
      .addClass(function(index,currentClass))
        函数返回一个或者多个用空格隔开, index 表示参数匹配中的索引位置 this 指向匹配元素集合中的当前元素。
      $("p").addClass("myClass yourClass"); 给p 这个元素添加这两个类名样式。
      $("ul li:last").addClass(function(index){
        return "item-"+index;
      }) 在最后一个<li> 元素上加上“item-1”样式。


    .css()
      获取匹配元素集合中的第一个元素的样式属性计算值或设置每一个匹配元素的一个或多个
      css属性。

      .css(propertyName)
        propertyName 一个css 属性名 。 一个或者多个css 属性组成的数组。
      $(this).css("background-color"); 获取当前元素的背景颜色。
      $(this).css(["width","height",color]) 获取当前元素的 宽 高 字体颜色。

      .css(propertyName,value)
        propertyName 一个css 属性名。
        value 设置这个css 的属性值。
      .css(propertyName,function)
        propertyName 一个css 属性名。
        function 一个用来返回设置值的函数。this,是当前元素。

      $('div.example').css('width',function(index){
        return index*50;
      }) 设置一个匹配元素的宽度增加到较大的值。
      $("p").mouseover(function(){
        $(this).css("color","red");
      }) 当鼠标经过p 元素时文字变成红色。
      $("#box").one("click",function(){
        $(this).css("width","+=200")
      }) 增加#box 的宽度为200像素。


    .hasClass()
      确定任何一个匹配的元素是否有被分配给定的(样式类)
      .hasClass(className)
      className 要查询的样式名。
      $("#mydiv").hasClass("foo") 匹配的元素是否含有 foo这个样式
      如果有这个样式那么就返回true 如果没有那么就返回false


    .removeClass()
      移除匹配的元素上面的样式。
      .removeClass([className])
        每个匹配元素移除的一个或者多个用空格隔开的样式名。
      $("p").removeClass("myClass yourClass")
      .removeClass(function(index,class))
        一个函数,返回一个或多个要移除的元素,index 所有匹配的元素集合中的当前的元素。


    .toggleClass()
      在匹配的元素集合中的每个元素上切换样式名
      .toggleClass(className)
        className 在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名。
      .toggleClass(className,switch)
        switch 一个布尔值,用于判断样式是否应该被添加或移除。
      .toggleClass([switch])
        switch 一个用来判断样式类天添加还是移除的布尔值。

      $('#foo').toggleClass(className,add0rRemove) 就等同于

     if(add0rRemove){ 
        $('#foo').addClass(className);
      }else{
        $('#foo').removeClass(className) 
      }
    
      $("p").click(function(){ 
      $(this).toggleClass("highlight");
        //点击当前的p 标签的时候切换样式。
      })
  • 相关阅读:
    Windows删除被占用的文件或文件夹
    Fatal error in launcher: Unable to create process using
    World/excel无法同时打开两个解决办法
    Zabbix故障处理系列
    第1章 数据库系统概述
    第2章 关系数据库
    第3章 数据库设计
    Linux命令概况
    Python -扩展C++-Pytorch扩展
    技术栈_人工智能-大数据-云计算
  • 原文地址:https://www.cnblogs.com/nmxs/p/4890599.html
Copyright © 2011-2022 走看看