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

废话不多说，学习今天的知识点。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. （三）SpringBoot之配置文件详解：Properties和YAML

    一.配置文件的生效顺序,会对值进行覆盖: 1. @TestPropertySource 注解 2. 命令行参数 3. Java系统属性(System.getProperties()) 4. 操作系统环 ...

  2. （一）weblogic11g的安装配置

    一.安装 找到weblogic安装包,小编这里用的是wls1034_win32.exe版本,双击打开 完成后运行快速启动,打开快速启动界面,配置weblogic.如果没有打开,还可以在开始菜单中找到q ...

  3. ligerui tab 部分记载

    打开一个Tab $(".strength_box").click(function () { var id = $(this).attr("data"); va ...

  4. ASP.NET MVC或者.net Core mvc 页面使用富文本控件的 保存问题

    https://blog.csdn.net/leftfist/article/details/69629394 目前在做的项目存在XSS安全漏洞! 原因是有一些页面使用了富文本编辑框,为了使得其内容可 ...

  5. IOS 主队列，全局队列的关系

    同步,异步,串行,并发 同步和异步代表会不会开辟新的线程.串行和并发代表任务执行的方式. 同步串行和同步并发,任务执行的方式是一样的.没有区别,因为没有开辟新的线程,所有的任务都是在一条线程里面执行. ...

  6. 关于微信小程序获取多个formId的实现方法

    在此之前,很多人使用过form和button的多层嵌套来实现点击一次获取多个formId的目的,如下图所示,点击一次“提交”,可以获取到多个formId 但是在今年3月份,这个投机取巧的方法(算是微信 ...

  7. ES6--JavaScript扩展知识点（let、const、解构）

    一,ES2015(ES6)新增了两个声明变量的关键字:let.const let:只在代码块内{}有效,不可重复声明,不会提前初始化 1.只在代码块内有效 { let a = 1; var b = 2 ...

  8. 【leetcode】637. Average of Levels in Binary Tree

    原题 Given a non-empty binary tree, return the average value of the nodes on each level in the form of ...

  9. Ubuntu 文件和目录常用命令

    目标 查看目录内容 ls 切换目录 cd 创建和删除操作 touch rm mkdir 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 echo 重定向 > 和 &g ...

  10. man手册--iostat

    iostat手册 IOSTAT(1) Linux User's Manual IOSTAT(1) NAME iostat - Report Central Processing Unit (CPU) ...