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

废话不多说，学习今天的知识点。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. （八）二进制文件在webservice中的处理（以byte[]字节数组方式）

    一.介绍 二进制文件在webservice中的处理. A:通过byte[]字节数组的方式来传递.比较适合小文件,字节数组不能太大的情况.(本章所用) B:通过DataHander的方式来进行传递. 1 ...

  2. Google Drive 和 Dropbox 同步同一个文件夹目录

     Dropbox 也是非常棒的同步工具,例如先进的增量上传或者更开放的 API 等.可是为什么不曾想过把 Google Drive 和 Dropbox 同时使用呢,我是说,让这两者同时云同步同一个文件 ...

  3. XML-RPC-3XML-RPC 与 XML-RPC 服务器类

    http://codeigniter.org.cn/user_guide/libraries/xmlrpc.html XML-RPC 与 XML-RPC 服务器类 CodeIgniter 的 XML- ...

  4. pickle 和 base64 模块的使用

    pickle pickle模块是python的标准模块,提供了对于python数据的序列化操作,可以将数据转换为bytes类型,其序列化速度比json模块要高. pickle.dumps() 将pyt ...

  5. 安装mysql采坑记录

    安装之前彻底卸载之前的mysql,再次安装,初始化数据库那一步失败. 再次彻底卸载mysql,把原先的安装路径的文件夹删除,文件夹路径:C:\ProgramData,再次安装,成功. 总结:重装mys ...

  6. MMU简介

    MMU(Memory Management Unit)内存管理单元 负责虚拟地址到物理地址的映射,并提供硬件机制的内存访问权限检查.内存访问权限的检查可以保护每个进程所用的内存不会被其他进程所破坏 地 ...

  7. C语言对齐、补齐

    加快CPU读取数据的速度 aligned(n) 让所作用的结构成员对齐在n字节自然边界上.如果结构中有成员的长度大于n,则按照最大成员的长度来对齐 struct s { char c; int i; ...

  8. MFC编程——Where is WinMain?

    源码 #include<afxwin.h> class MyApp :public CWinApp { public: virtual BOOL InitInstance(); }; My ...

  9. java实战(一)-------jdk环境在windows安装及配置

    1.jdk官方下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html 点击下载windows的版本:jdk-13.0 ...

  10. javascript获取用户按了哪个键

    浏览器好像不允许js获取F5这个键的按下事件,应该屏蔽了,这个键太过特殊,猜测可能是,防止用户失去对浏览器的控制? <!DOCTYPE html> <html> <hea ...