一、DOM操作分类

  1. DOM Core：任何一种支持DOM的编程语言都可以使用它，例如：getElementById()。
  2. HTML-DOM：用于处理HTML文档，例如：document.forms。
  3. CSS-DOM：用于操作CSS，例如：element.style.color="green"。

二、jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装，使用起来更加简便。

jQuery中的DOM操作可分为如下几种：

  1. 样式操作。
  2. 内容及value属性值操作。
  3. 节点操作。
  4. 节点属性操作。
  5. 节点遍历。
  6. CSS-DOM操作。

三、样式操作

1、使用css()为指定的样式设置样式值，语法如下：

例如：

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>样式操作</title>

    <!--引入jQuery-->

    <script src="../jquery-3.3.1.js"></script>

    <!--javascript-->

    <script>

       $(function(){

           // 设置单个样式

           //$("p").css("border","1px solid red");

           // 设置多个样式

           $("p").css({"border":"1px solid blue","background-color":"green","color":"yellow"});

       });

    </script>

</head>

<body>

    <p>Hello World!</p>

</body>

</html>

效果：

补充：

JSON简介

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。其语法如下：

JSON的取值方法

可以使用点号表示法来获取。

例如：

例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>JSON示例</title>

    <script>

       // 获取年龄

       var student={"name":"Tom","age":28};

       alert(student.age);

       var json={

           "student":[{"name":"Tom","age":24},

                      {"name":"Kevin","age":25},

                      {"name":"James","age":22}

       ]};

       alert(json.student[2].age);

    </script>

</head>

<body>

</body>

</html>

2、追加和移除样式

使用jQuery可以同时追加或移除一个、多个样式，语法如下：

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>追加和移除样式演示示例</title>

    <style>

      h2{

          margin: 0px;

          padding: 0px;

          font-size: 30px;

          margin-bottom: 10px;

      }

      /*边框样式*/

      .borderStyle{

          border: 2px solid red;

      }

      /*背景色样式*/

      .bgcolorStyle{

          background-color: green;

      }

    </style>

     <!--引入jQuery-->

     <script src="../jquery-3.3.1.js"></script>

     <!--javascript-->

     <script>

        $(function(){

            // 获取h2元素

            var h2Element=$("h2");

            // 追加边框样式

            $("#btnAdd").click(function(){

                h2Element.addClass("borderStyle");

            });

            // 追加背景色样式

            $("#btnAddBgcolor").click(function(){

                h2Element.addClass("bgcolorStyle");

            });

            // 同时追加边框和背景色样式

            $("#btnAddMulit").click(function(){

                h2Element.addClass("borderStyle bgcolorStyle");

            });

            // 移除边框样式

            $("#btnRemove").click(function(){

                h2Element.removeClass("borderStyle");

            });

            // 移除背景色样式

            $("#btnRemoveBgcolor").click(function(){

                h2Element.removeClass("bgcolorStyle");

            });

            $("#btnRemoveMulit").click(function(){

                h2Element.removeClass("borderStyle bgcolorStyle");

            });

        });

     </script>

</head>

<body>

    <h2>练习使用jQuery追加和移除样式</h2>

    <input type="button" id="btnAdd" value="追加边框样式" />

    <input type="button" id="btnAddBgcolor" value="追加背景色样式" />

    <input type="button" id="btnAddMulit" value="同时追加边框和背景色样式" />

    <input type="button" id="btnRemove" value="移除边框样式" />

    <input type="button" id="btnRemoveBgcolor" value="移除背景色样式" />

    <input type="button" id="btnRemoveMulit" value="同时移除边框和背景色样式" />

</body>

</html>

效果：

jQuery（三）：样式操作的更多相关文章

  1. 解密jQuery内核 样式操作

    基础回顾 jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的,本章通一下分解探究下jquery里这部分代码的实现 那么jQuery要处理样式的哪些问题? 先简单回顾下样式操作会遇到 ...

  2. jQuery - 5.样式操作

    样式操作 1.获取样式 attr("class"), 2.设置样式attr("class","myclass"), 3.追加样式addCla ...

  3. jquery动态样式操作

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 1 var p_class = $(" ...

  4. jquery加载方式，选择器，样式操作

    原生js和css不兼容,jquery已经过测试,可放心使用 https://code.jquery.com   这个网站可以下载jquery的源码,比如把源码下载到js文件夹中,文件名为jquery- ...

  5. jQuery 源码解析(二十九) 样式操作模块 尺寸详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...

  6. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  7. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  8. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  9. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

随机推荐

  1. 如何在 Mac 上通过 Boot Camp 安装 Windows?

    如何在 Mac 上通过 Boot Camp 安装 Windows? The following contents are chosen from the apple website, thanks f ...

  2. 大家来找茬：富连网今天中午抢购二手iPhone时网站无法访问的问题

    前几天在新闻区看到富士康卖二手iPhone的新闻,今天又看到说今天中午12点开抢.一大早就发现富连网无法访问了.前几天刚看到新闻的时候注册了个账号进去看了看,发现页面加载速度非常慢,今天中午基本无法打 ...

  3. spring注解方式实现定时器

    1.Spring的配置: <beans xmlns:task="http://www.springframework.org/schema/task" xsi:schemaL ...

  4. mysql打开binlog

    修改mysql的配置文件,ubuntu下mysql的配置文件存放位置为:/etc/mysql/my.cnf 找到log_bin配置项,指定一个路径: 重启数据库:/etc/init.d/mysql r ...

  5. SpringBoot+mybatis实现多数据源支持

    什么是多数据源支持? 简单的说,就是一个项目里,同时可以访问多个不同的数据库. 实现原理 单个数据源在配置时会绑定一套mybatis配置,多个数据源时,不同的数据源绑定不同的mybatis配置就可以了 ...

  6. 微服务，ApiGateway 与 Kong

    一. 微服务 二. Api Gateway 三. Kong 的使用 一. 微服务 对于一些传统的 大型项目,传统的方式会有一些缺陷,比如说 新人熟悉系统成本高(因为整个系统作为一个整体,彼此会有一定的 ...

  7. ISO GPS定位，坐标转换以及如何显示

    这个写的公共类叫做:GPScombineClass类主要展示GPS位置的定位,GPS坐标的获取,然后从手机坐标转换成火星坐标,继而在需要的情况下,由火星转百度 ,百度转火星的详细算法:   在GPSc ...

  8. ios 精简日历

    网上其他人写的日历类功能都很齐全,比较繁杂,对于想看看日历基础实现然后自己绘制日历的我来说不太方便,就自己整理了一个极精简的日历出来,大家看了之后应该能多少理解日历该怎么自定义,很简单. 我的小dem ...

  9. [svc]ansible自动化模块

    ansible命令执行模块 - command模块 [执行远程命令] $ ansible n1 -m command -a 'uname -n' - raw模块 [类似于command模块.支持管道传 ...

  10. iOS7隐藏状态栏 status Bar

    转自:http://blog.csdn.net/dqjyong/article/details/17896145 IOS7中,不仅应用的风格有一定的变化,状态栏变化比较大,我们可以看到UIVIEWCO ...