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

废话不多说，学习今天的知识点。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. 数据格式转换string.Format

    1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:￥0.20 (英文操作系统结果:$0 ...

  2. 十六进制转换十进制（JAVA版）

    解题思路路大概为:现将十六进制数转换为二进制数,再讲二进制数转换为八进制数.在进行十六进制转换为八进制时可以利用JAVA中的‘&’运算符号,一个十六进制数可以表示为四个二进制数,利用‘& ...

  3. Unity 自定义"=="操作符 [翻译来源blogs.unity3d,2014/05]

    主要内容来源 https://blogs.unity3d.com/cn/2014/05/16/custom-operator-should-we-keep-it/ 在我们代码里,如果有这样的代码: i ...

  4. React/react相关小结

    React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...

  5. ajax:用于创建快速动态网页的技术

    ajax是一种用于创建快速动态网页的技术. 异步的javascript和XML(JSON),主要是完成一个局部刷新. 异步:你传输吧,我先干我自个儿的事,你传好了告诉我一声 同步:你传输,我停下活儿看 ...

  6. insert buffer/change buffer double write buffer，双写 adaptive hash index（AHI） innodb的crash recovery innodb重要参数 innodb监控

    https://yq.aliyun.com/articles/41000 http://blog.itpub.net/22664653/viewspace-1163838/ http://www.cn ...

  7. man 手册--nc

    man 手册--nc NCAT(1) Ncat Reference Guide NCAT(1) NAME ncat - Concatenate and redirect sockets SYNOPSI ...

  8. ubuntu安装supervisor

    1. Ubuntu14中supervisor的安装及配置 2. Ubuntu 14.04下进程管理工具supervisor安装 3. Supervisor使用教程 4. supervisor在deep ...

  9. 拒绝流量劫持，全面使用 HTTPS！

    最近收到数个 BootCDN 用户的反馈:某些地区的宽带运营商劫持了部分 BootCDN 上的文件,并篡改文件加入了广告代码. 这种方式的流量劫持属于中间人攻击(Man-in-the-Middle A ...

  10. Lua 学习之基础篇五<Lua OS 库>

    lua os库提供了简单的跟操作系统有关的功能 1.os.clock() 返回程序所运行使用的时间 local nowTime = os.clock() print("now time is ...