1.1.1    css操作

功能：设置或者修改样式，操作的是style属性。

  • 设置单个样式
//name：需要设置的样式名称

//value：对应的样式值

css(name, value);

//使用案例

$("#one").css("background","gray");//将背景色修改为灰色

　　

  • 设置多个样式
//参数是一个对象，对象中包含了需要设置的样式名和样式值

css(obj);

//使用案例

$("#one").css({

    "background":"gray",

    "width":"400px",

    "height":"200px"

});

　　

  • 获取样式
//name:需要获取的样式名称

css(name);

//案例

$("div").css("background-color");

　　

注意：获取样式操作只会返回第一个元素对应的样式值。

隐式迭代：

  1. 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
  2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

1.1.1    class操作

  • 添加样式类
//name：需要添加的样式类名，注意参数不要带点.

addClass(name);

//例子,给所有的div添加one的样式。

$(“div”).addClass(“one”);

　　

  • 移除样式类
//name:需要移除的样式类名

removeClass(“name”);

//例子，移除div中one的样式类名

$(“div”).removeClass(“one”);

　　

  • 判断是否有样式类
//name:用于判断的样式类名，返回值为true false

hasClass(name)

//例子，判断第一个div是否有one的样式类

$(“div”).hasClass(“one”);

　　

  • 切换样式类
//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

toggleClass(name);

//例子

$(“div”).toggleClass(“one”);

　　

【案例：tab栏切换案例】

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style: none;

    }

    .wrapper {

      width: 1000px;

      height: 475px;

      margin: 0 auto;

      margin-top: 100px;

    }

    .tab {

      border: 1px solid #ddd;

      border-bottom: 0;

      height: 36px;

      width: 320px;

    }

    .tab li {

      position: relative;

      float: left;

      width: 80px;

      height: 34px;

      line-height: 34px;

      text-align: center;

      cursor: pointer;

      border-top: 4px solid #fff;

    }

    .tab span {

      position: absolute;

      right: 0;

      top: 10px;

      background: #ddd;

      width: 1px;

      height: 14px;

      overflow: hidden;

    }

    .products {

      width: 1002px;

      border: 1px solid #ddd;

      height: 476px;

    }

    .products .main {

      float: left;

      display: none;

    }

    .products .main.selected {

      display: block;

    }

    .tab li.active {

      border-color: red;

      border-bottom: 0;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      $(".tab-item").mouseenter(function () {

        //两件事件

        $(this).addClass("active").siblings().removeClass("active");

        var idx = $(this).index();

        $(".main").eq(idx).addClass("selected").siblings().removeClass("selected");

      });

    });

  </script>

</head>

<body>

<div class="wrapper">

  <ul class="tab">

    <li class="tab-item active">国际大牌<span>◆</span></li>

    <li class="tab-item">国妆名牌<span>◆</span></li>

    <li class="tab-item">清洁用品<span>◆</span></li>

    <li class="tab-item">男士精品</li>

  </ul>

  <div class="products">

    <div class="main selected">

      <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>

    </div>

    <div class="main">

      <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>

    </div>

    <div class="main">

      <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>

    </div>

    <div class="main">

      <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>

    </div>

  </div>

</div>

</body>

</html>

　属性attr操作

设置属性

//用法和css一样

    //设置单个属性

    //attr(name, value)

    //$("img").attr("alt", "图破了");

    //$("img").attr("title", "错错错错");

    //设置多个属性

    /*$("img").attr({

      alt:"图破了",

      title:"错错错",

      aa:"bb"

    })*/

　获取属性简单

prop操作

//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。

  $(function () {

    $("input").eq(0).click(function () {

      $("#ck").prop("checked", true);

    });

    $("input").eq(1).click(function () {

      $("#ck").prop("checked", false);

    });

  });

　　案例

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      padding: 0;

      margin: 0;

    }

    .wrap {

      width: 300px;

      margin: 100px auto 0;

    }

    table {

      border-collapse: collapse;

      border-spacing: 0;

      border: 1px solid #c0c0c0;

      width: 300px;

    }

    th,

    td {

      border: 1px solid #d0d0d0;

      color: #404060;

      padding: 10px;

    }

    th {

      background-color: #09c;

      font: bold 16px "微软雅黑";

      color: #fff;

    }

    td {

      font: 14px "微软雅黑";

    }

    tbody tr {

      background-color: #f0f0f0;

      text-align: center;

    }

    tbody tr:hover {

      cursor: pointer;

      background-color: #fafafa;

    }

  </style>

</head>

<body>

<div class="wrap">

  <table>

    <thead>

    <tr>

      <th>

        <input type="checkbox" id="j_cbAll"/>

      </th>

      <th>菜名</th>

      <th>饭店</th>

    </tr>

    </thead>

    <tbody id="j_tb">

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>红烧肉</td>

      <td>田老师</td>

    </tr>

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>西红柿鸡蛋</td>

      <td>田老师</td>

    </tr>

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>红烧狮子头</td>

      <td>田老师</td>

    </tr>

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>日式肥牛</td>

      <td>田老师</td>

    </tr>

    </tbody>

  </table>

</div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    $("#j_cbAll").click(function () {

      //修改下面的哪些checkbox

      $("#j_tb input").prop("checked", $(this).prop("checked"));

    });

    $("#j_tb input").click(function () {

      if($("#j_tb input:checked").length  ==  $("#j_tb input").length){

        $("#j_cbAll").prop("checked", true)

      }else {

        $("#j_cbAll").prop("checked", false)

      }

    });

  });

</script>

</body>

</html>

　　

　

jQuery基础--CSS操作、class操作、attr操作、prop操作的更多相关文章

  1. Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]

    1:属性.attr(name|pro|key,val|key,fn)与removeAttr(name) 1.1 .attr(name) 参数name为属性名称 <a id="my_hr ...

  2. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

  3. jQuery中attr()、prop()、data()用法及区别

    .attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...

  4. 查找索引/ie滤镜/动态背景/属性attr和prop

    1. 查找索引 查找当前元素在指定范围内的索引序号,示例: $('.right_newestState_con').find('em').index($(this)); 2. ie滤镜 利用ie的私有 ...

  5. jQuery基础DOM和CSS操作

    $('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...

  6. jQuery(基础dom及css操作)

    设置元素内容 元素属性操作 ---------- 元素样式操作 ---------------- 对象数组的遍历 测试代码: $(function () { var v=$('div').css([' ...

  7. jQuery基础知识点（DOM操作）

    1.样式属性操作     1)设置样式属性操作         ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...

  8. jQuery attr removeAttr 属性操作

    jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...

  9. jQuery基础操作

    1.jQuery的介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...

随机推荐

  1. python 定义模块作用及分类

    python把一个功能的模块归类,简单来说,模块是一个由Python代码组成的文件.模块可以定义函数,类和变量. 模块还可以包括可运行的代码. 1,python模块的作用 提高代码的方便维护 使用模块 ...

  2. C# log4net 日志写入到数据库

    原文:C# log4net 日志写入到数据库 效果图: 1:第一步创建SQL表结构   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  3. 【JAVA】input.next().charAt(0);的含义

    接收键盘输入的字符串,并且取出它的第一个字符. 分析: Scanner scan=new Scanner(System.in); String s=scan.next(); //返回一个String ...

  4. 2018-12-25-win10-uwp-显示SVG

    title author date CreateTime categories win10 uwp 显示SVG lindexi 2018-12-25 10:37:5 +0800 2018-2-13 1 ...

  5. [Luogu1220]关路灯（区间dp）

    [Luogu1220]关路灯 题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏 ...

  6. No qualifying bean of type xxx' available 的一种解决方法

    获取bean Class beanClass = Class.forName(event.className); FilterEvent filterEvent = (FilterEvent)Bean ...

  7. git 操作遇到的问题与解决方法

    一.使用git在本地创建一个项目的过程,Git 上传本地文件到github $ makdir ~/hello-world //创建一个项目hello-world $ cd ~/hello-world ...

  8. C++ decltype

    #include <iostream> using namespace std; int main() { int ia{3}; decltype(ia) varr[3]={1,2,3}; ...

  9. nginx配置虚拟主机-端口号区分/域名区分

    Nginx实现虚拟机 可以实现在同一台服务运行多个网站,而且网站之间互相不干扰.同一个服务器可能有一个ip,网站需要使用80端口.网站的域名不同. 区分不同的网站有三种方式:ip区分.端口区分.域名区 ...

  10. Bugku 杂项 签到题

    签到题 加微信公众号会发现