一、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. 跨系统-跨数据库访问表或创建映射视图-PB访问数据库的特殊处理

    一. 在项目中可能会遇到在一个项目中会出现多个数据库的操作. 二. 也可能会多个系统多个数据库之间进行交互操作显示. 三. 经常需要两个数据库关联查询或需要翻译显示内容时会很麻烦. 四. 今天就有个简 ...

  2. Hive 打开调试模式

    编程过程中发现错误,无法看到具体的错误信息,网上搜了下,按照下面的方法启动Hive Shell就可以打开调试(注意:此方法只对本次回话有效): hive --hiveconf hive.root.lo ...

  3. 启动supervisord 生成openvpn用于android的证书

     service supervisord start netstat -anp | grep 你的端口号 生成证书: 进入到openvpn的证书生成文件夹,通常在/etc/openvpn/easy-r ...

  4. 小程序踩过的一个小坑---解析二维码decodeURIComponent() url解码

    因为我们需要用户扫码进入小程序,每一个货柜都有一个对应的二维码,当然每个二维码里的信息也不一样.用户扫码进入小程序之后,二维码的信息会以参数q带进去,而我们只能在onLoad事件中拿到这个参数, 但是 ...

  5. PHP实现JS的无符号右移(>>>)

    举例: JS: 5>>>2 PHP function uright($a, $n) { $c = 2147483647 >> ($n - 1); return $c &a ...

  6. C++生成斐波拉其数列

    该方法作为一种演示功能左右,运行较慢. #include <iostream> using namespace std; class Fibonacci{ public: int a, b ...

  7. Atitit 如何设置与安放知识的trap陷阱  知识聚合 rss url聚合工具 以及与trap的对比

    Atitit 如何设置与安放知识的trap陷阱  知识聚合 rss url聚合工具 以及与trap的对比 1.1. 安放地点 垂直知识网站csdn cnblogs等特定频道栏目,大牛博客 1 1.2. ...

  8. [sql]mysql参数(配置)手册

    my-innodb-heavy-4G.cnf配置文件注解 [client] #客户端 port = 3306 #mysql客户端连接时的默认端口号 socket = /application/mysq ...

  9. git将本地项目添加到github上

    git init git add . git commit -m '添加备注' git add remote origin originUrl git push -u origin master 注意 ...

  10. 使用canvas绘制饼状图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...