一、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. Linux系统和工具集

    Linux系统和工具集 阿里源 http://mirrors.aliyun.com/ http://centos.ustc.edu.cn/ 第三方包管理器 不同的发行版使用不同的软件包管理器,Cent ...

  2. 【剑道】步法(Ashi Sabaki)

    转自 http://www.openkendo.com/class7.html 步法(Ashi Sabaki)可能算是剑道中最重要的部分.,以下大致做一归纳讲解,希望能够帮助到各位新人的练习. “折足 ...

  3. 你不知道的KVO的内部实现

    通过强大的Runtime 实现.第一次观察某个Object 时,runtime 会创建一个新的继承自 object 对应Class 的 subClass.在这个新subClass 里它重写了被观察的k ...

  4. Android应用中创建绑定服务使得用户可以与服务交互

    原文:http://android.eoe.cn/topic/android_sdk 一个绑定的服务是客户服务器接口上的一个服务器.一个绑定的服务允许组件(如:活动)来绑定一个服务,传送请求,接收响应 ...

  5. bestcoder 48# wyh2000 and a string problem (水题)

    wyh2000 and a string problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K ...

  6. Atitti html5 h5 新特性attilax总结

    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...

  7. Java常考面试题(四)

    序言 双十一那天去我女朋友那了,11.11到11.13 漏了两天的内容,今天中午刚回来的,赶紧补一下前两天漏下的博文,我相信,坚持下来,会有成长的,等到出去实习那一天,肯定会很有帮助,会感谢现在自己的 ...

  8. 菜鸟学数据库（五）——MySQL必备命令

    今天跟大家分享一下MySQL从连接到具体操作的一系列常用命令.可能有的人觉得现在有很多可视化的工具,没必要再学习那些具体的命令了,但是我不这么认为,不可否认那些工具的确让我们的工作更加方便快捷,但是如 ...

  9. android笔记---百度地图api应用 (二) 获取公交路线的详细信息

    package com.example.bdtest; import com.baidu.mapapi.MKEvent; import com.baidu.mapapi.MKPlanNode; imp ...

  10. maven deploy distributionManagement

    分发构件至远程仓库 mvn install 会将项目生成的构件安装到本地Maven仓库,mvn deploy 用来将项目生成的构件分发到远程Maven仓库.本地Maven仓库的构件只能供当前用户使用, ...