前几天回家，参加了全国的成人高考，都说学历是找工作的敲门砖，其实一点都不假，尤其是现在的社会竞争力那么强，你不学就会被淘汰。像要过自己想要的生活，就必须努力学习，努力赚钱，买自己想买的，过自己想过的。

废话不多说，学习今天的知识点。jq操作样式。

样式属性操作css
 
操作css改变样式方法
<script>

    //方法1 css({json})

    $f(unction(){

        $("div").css({"width":,"height":, "background":"red"})

    })

    //第二种方法

    $(window).ready(function(){

        $("div").css("background","blue")

    })

    //第三种方法 一个参数获取，参数值

    $(document).ready(function(){

        console.log($("div").css("width"))

    })

</script>

添加类 删除类  判名 返回值（true false）

 $(function(){

            $("button:eq(0)").click(function(){

                //添加类名

                $("div").addClass("current");

                //判断类名

                alert($("div").hasClass("current"))

            });

            $("button:eq(1)").click(function(){

                //删除类名

                $("div").removeClass("current");

                //判断类名

                alert($("div").hasClass("current"))

            })

        })

    </script>
切换类 没有类添加类，有类删除类

 $("div").toggleClass("current")
 
案例
切换背景
<script>

        $(function(){

            $("button").click(function(){

                if($("div").hasClass("current")===true){

                    $("div").removeClass("current")

                }else{

                    $("div").addClass("current")

                }

            })

        })

    </script>

淘宝top栏

 <style type="text/css">

        * {  margin: ;  padding: ; }

        ul { list-style: none; }

        .wrapper {width: 1000px;height: 475px;margin:  auto;margin-top: 100px;}

        .tab {border: 1px solid #ddd;border-bottom: ;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: ;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: ; }

    </style>

    <script src="../jquery-1.11.1.min.js"></script>

    <script>

        jQuery(window).ready(function(){

            //鼠标放到LI上，对应的LI添加类，其他LI删除类

            //下面对应的DIV添加类，其他的删除类

            $(".tab>li").click(function(){

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

                $(".products>.main").eq($(this).index()).addClass("selected").siblings(".main").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="../image/guojidapai.jpg" alt=""/></a>

        </div>

        <div class="main">

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

        </div>

        <div class="main">

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

        </div>

        <div class="main">

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

        </div>

    </div>

</div>

yquery-操作样式属性的更多相关文章

  1. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  2. jQuery使用（二）：DOM样式操作和属性操作

    DOM取值与赋值 .html() .text() .size() 1.html()方法类似原生DOM的属性innerHTML,不传入参数的时候默认为取指定元素内的HTML内容,包含前后空白文本结构,以 ...

  3. PHP Jquery 代码操作 内容 属性 样式 事件 Json数据

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. DOM操作之属性和样式操作

    在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...

  5. document--文档中的操作，操作属性、操作样式、操作元素

    ---恢复内容开始--- document操作:    1.找元素   getE..    2.操作内容   非表单:innerHtml   表单:value    3.操作属性            ...

  6. Dom的样式操作和属性操作

    如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...

  7. JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）

    document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...

  8. dom操作 属性操作 样式操作

    jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...

  9. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  10. jQuery 样式操作、文档操作、属性操作的方法总结

    文档操作: addClass()             向匹配的元素添加指定的类名.after()                    在匹配的元素之后插入内容.append()         ...

随机推荐

  1. （一）Redis之简介和windows下安装radis

    一.简介 1.1 关于nosql 介绍Redis之前,先了解下NoSQL (Not noly SQL)不仅仅是SQL, 属于非关系型数据库:Redis就属于非关系型数据库, 传统的Mysql ,ora ...

  2. c#入门学习笔记

    Hello World //打印语句 Console.WriteLine("Hello World"); //暂停 Console.ReadKey(); 数据类型 1.值类型 by ...

  3. Async await 解析

    Async 定义:使异步函数以同步函数的形式书写(Generator函数语法糖) 原理:将Generator函数和自动执行器spawn包装在一个函数里 形式:将Generator函数的*替换成asyn ...

  4. 六、TreeMap的使用 及其源码解析

    TreeMap中的元素默认按照keys的自然排序排列 1. 构造函数TreeMap(): 创建一个空的TreeMap ,keys按照自然排序TreeMap(Comparator comparator) ...

  5. element之 el-scrollbar组件滚动条的使用

    在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部.侧栏.面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动.

  6. win7电脑数字键盘失灵怎么办

    转自:https://zhidao.baidu.com/question/370674322729785324.html 解决方法: 第一步.同时按下“Windows键” + “R”调出运行窗口. 第 ...

  7. openpyxl 设置单元格颜色

    在处理excel数据格式的时候,需要对特定单元格进行颜色标注,方便相关人员查看 醒目 # -*- coding: utf-8 -*- from openpyxl import load_workboo ...

  8. 初级文件IO——IO过程、open、close、write、read、lseek、dup、dup2、errno、perror

    先要回答的问题 文件IO指的是什么? 本文主要讲述如何调用Linux OS所提供的相关的OS API,实现文件的读写. 如何理解文件IO? IO就是input output的意思,文件io就是文件输入 ...

  9. 用python实现新词发现程序——基于凝固度和自由度

    互联网时代,信息产生的数量和传递的速度非常快,语言文字也不断变化更新,新词层出不穷.一个好的新词发现程序对做NLP(自然预言处理)来说是非常重要的. N-Gram加词频 最原始的新词算法莫过于n-gr ...

  10. 什么是 java 序列化？（未完成）什么情况下需要序列化？（未完成）

    什么是 java 序列化?(未完成)什么情况下需要序列化?(未完成)