一、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. Jacobi并行拆解

    作者:桂. 时间:2018-04-23  21:12:02 链接:http://www.cnblogs.com/xingshansi/p/8921815.html 前言 本文主要是复数矩阵分解的拆解思 ...

  2. Android 源码解析:单例模式-通过容器实现单例模式-懒加载方式

    本文分析了 Android 系统服务通过容器实现单例,确保系统服务的全局唯一. 开发过 Android 的用户肯定都用过这句代码,主要作用是把布局文件 XML 加载到系统中,转换为 Android 的 ...

  3. HAProxy压测及参数调优

    背景 小米容器云平台,在构建云厂商集群时,需要通过HAProxy将云厂商LB流量从宿主机转到容器中,但对于HAProxy的性能没有把握.参考网上的一篇HAProxy压测文章,文章中提到HAProxy ...

  4. 实例分析JVM安全体系：双亲委派、命名空间、保护域、策略

    在了解双亲委派模型之前,先了解一下类加载器的概念: 类加载器的作用就是将真实的class文件根据位置将该Java类的字节码装入内存,并生成对应的Class对象.用户可以通过继承ClassLoader和 ...

  5. OpenStack OVS GRE/VXLAN

    https://www.jianshu.com/p/0b52de73a4b3 OpenStack OVS GRE/VXLAN网络 学习或者使用OpenStack普遍有这样的现象:50%的时间花费在了网 ...

  6. Redis List数据类型

    一.概述:      在Redis中,List类型是按照插入顺序排序的字符串链表.和数据结构中的普通链表一样,我们可以在其头部(left)和尾部(right)添加新的元素.在插入时,如果该键并不存在, ...

  7. 简单的sqlhelper的学习日志

    一:今天做了一个简单的sqlhelper,还有调用,将今天学的内容总结一下,解决方案如下: 二:对应的sqlhelper的内容: using System; using System.Collecti ...

  8. Android，XML解析

    XML解析三种方式 DOM 通用性强,它会将XML文件的所有内容读取到内存中,然后允许您使用DOM API遍历XML树.检索所需的数据: 简单直观,但需要将文档读取到内存,并不太适合移动设备: SAX ...

  9. 交叉编译环境以及开发板上-/bin/sh: ./hello: not found 转载自 http://blankboy.72pines.com

    交叉编译环境以及开发板上-/bin/sh: ./hello: not found 目标板是S3C2440.至于交叉编译环境的搭建就不多说了,网上很多教程. 搭建好了交叉编译环境后,第一件事就是传说中的 ...

  10. linux c编程操作数据库（sqlite3应用）

     首先pThread 不是linux系统默认库,连接的时候需要使用库libpthread.a. 加入-lpthread参数.另外会有lopen什么找不到的情况.加入-ldl 指定目录.Project_ ...