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

废话不多说，学习今天的知识点。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. KNN算法识别手写数字

    需求: 利用一个手写数字“先验数据”集,使用knn算法来实现对手写数字的自动识别: 先验数据(训练数据)集: ♦数据维度比较大,样本数比较多. ♦ 数据集包括数字0-9的手写体. ♦每个数字大约有20 ...

  2. 监控神器-普罗米修斯Prometheus的安装

    搬砖党的福音:普罗米修斯-监控神器 功能: 在业务层用作埋点系统 Prometheus支持多种语言(Go,java,python,ruby官方提供客户端,其他语言有第三方开源客户端).我们可以通过客户 ...

  3. socket基本用法

    socket介绍 1.什么是socket socket是应用层与传输层中间的一个软件抽象层,它是一组接口.它把TCP/IP这些复杂的协议统一封装起来 这样我们只要知道如何使用socket就好,就已经符 ...

  4. web pack备忘

    全局安装:npm install webpack -g npm i module_name -S = > npm install module_name --save 写入到 dependenc ...

  5. Axure工作区间

    Axure的工作环境可进行可视化拖拉操作,可轻松快速的创建带有注释的线框图.无需编程就可以在线框图中定义简单链接和高级交互.Axure可一体化生成线框图.HTML交互原型.规格说明Word文档.以下是 ...

  6. PAT Basic 1075 链表元素分类 (25 分)

    给定一个单链表,请编写程序将链表元素进行分类排列,使得所有负值元素都排在非负值元素的前面,而 [0, K] 区间内的元素都排在大于 K 的元素前面.但每一类内部元素的顺序是不能改变的.例如:给定链表为 ...

  7. 用js刷剑指offer(斐波那契数列)

    牛客网链接 下面介绍一下什么是斐波那契数列 js代码 知道了通项公式,那代码就非常简单了 function Fibonacci(n) { // write code here let pre = 1 ...

  8. 《构建之法》——Alpha2项目的测试

    这个作业属于哪个课程 课程的链接 这个作业要求在哪里 作业要求的链接 团队名称 Runningman 这个作业的目标 测试其他组的项目,互相借鉴 作业正文 作业正文 测试人姓名 陈嘉莹 测试人学号 2 ...

  9. Codeforces 567D - One-Dimensional Battle Ships - [树状数组+二分]

    题目链接:https://codeforces.com/problemset/problem/567/D 题意: 在一个 $1 \times n$ 的网格上,初始摆放着 $k$ 只船,每只船的长度均为 ...

  10. Python3+Appium学习笔记08-元素定位

    appium整合了不同的自动化测试驱动程序.而新版本appium desktop 中安卓是使用UI Automator2来作为驱动程序的.以前版本是使用UI Automator1或 Selendroi ...