一、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()为指定的样式设置样式值，语法如下：

例如：

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>样式操作</title>
  8.     <!--引入jQuery-->
  9.     <script src="../jquery-3.3.1.js"></script>
  10.     <!--javascript-->
  11.     <script>
  12.        $(function(){
  13.            // 设置单个样式
  14.            //$("p").css("border","1px solid red");
  15.            // 设置多个样式
  16.            $("p").css({"border":"1px solid blue","background-color":"green","color":"yellow"});
  17.        });
  18.     </script>
  19. </head>
  20. <body>
  21.     <p>Hello World!</p>
  22. </body>
  23. </html>

效果：

补充：

JSON简介

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

JSON的取值方法

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

例如：

例如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>JSON示例</title>
  8.     <script>
  9.        // 获取年龄
  10.        var student={"name":"Tom","age":28};
  11.        alert(student.age);
  12.  
  13.        var json={
  14.            "student":[{"name":"Tom","age":24},
  15.                       {"name":"Kevin","age":25},
  16.                       {"name":"James","age":22}
  17.        ]};
  18.        alert(json.student[2].age);
  19.     </script>
  20. </head>
  21. <body>
  22. </body>
  23. </html>

2、追加和移除样式

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

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>追加和移除样式演示示例</title>
  8.     <style>
  9.       h2{
  10.           margin: 0px;
  11.           padding: 0px;
  12.           font-size: 30px;
  13.           margin-bottom: 10px;
  14.       }
  15.       /*边框样式*/
  16.       .borderStyle{
  17.           border: 2px solid red;
  18.       }
  19.       /*背景色样式*/
  20.       .bgcolorStyle{
  21.           background-color: green;
  22.       }
  23.     </style>
  24.      <!--引入jQuery-->
  25.      <script src="../jquery-3.3.1.js"></script>
  26.      <!--javascript-->
  27.      <script>
  28.         $(function(){
  29.             // 获取h2元素
  30.             var h2Element=$("h2");
  31.             // 追加边框样式
  32.             $("#btnAdd").click(function(){
  33.                 h2Element.addClass("borderStyle");
  34.             });
  35.             // 追加背景色样式
  36.             $("#btnAddBgcolor").click(function(){
  37.                 h2Element.addClass("bgcolorStyle");
  38.             });
  39.             // 同时追加边框和背景色样式
  40.             $("#btnAddMulit").click(function(){
  41.                 h2Element.addClass("borderStyle bgcolorStyle");
  42.             });
  43.             // 移除边框样式
  44.             $("#btnRemove").click(function(){
  45.                 h2Element.removeClass("borderStyle");
  46.             });
  47.             // 移除背景色样式
  48.             $("#btnRemoveBgcolor").click(function(){
  49.                 h2Element.removeClass("bgcolorStyle");
  50.             });
  51.             $("#btnRemoveMulit").click(function(){
  52.                 h2Element.removeClass("borderStyle bgcolorStyle");
  53.             });
  54.         });
  55.      </script>
  56. </head>
  57. <body>
  58.     <h2>练习使用jQuery追加和移除样式</h2>
  59.     <input type="button" id="btnAdd" value="追加边框样式" />
  60.     <input type="button" id="btnAddBgcolor" value="追加背景色样式" />
  61.     <input type="button" id="btnAddMulit" value="同时追加边框和背景色样式" />
  62.     <input type="button" id="btnRemove" value="移除边框样式" />
  63.     <input type="button" id="btnRemoveBgcolor" value="移除背景色样式" />
  64.     <input type="button" id="btnRemoveMulit" value="同时移除边框和背景色样式" />
  65. </body>
  66. </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. SVN配置钩子文件限制提交文件时必须填写更新日志

    进入相应SVN仓库hooks目录,编辑文件pre-commit #!/bin/sh REPOS="$1"TXN="$2" SVNLOOK=/usr/bin/sv ...

  2. PHP+FastCGI+Nginx配置PHP运行环境方法

    PHP+FastCGI+Nginx配置PHP运行环境 Nginx不支持对外部程序的调用,所以必须通过FastCGI接口实现对外部程序的调用从而实现对客户端动态页面请求的处理. CGI的英文全称为Com ...

  3. collections集合的总括。

    序言 突然遇到集合的有关面试题,感觉很懵逼,所以特意总结了一下,关于我们常用的 ArrayList.LinkedList.Set等集合的一些区别和用法. 还有,这份微小型总结肯定是从很多博文中摘取精华 ...

  4. 【Unity】2.8 相机（Camera）

    分类:Unity.C#.VS2015 创建日期:2016-03-31 一.简介 Unity的相机用来向玩家呈现游戏世界.你在场景中始终至少有一个相机,但也可以有多个.多个相机可以带给您双人分屏效果或创 ...

  5. Android动画三部曲之中的一个 View Animation &amp; LayoutAnimation

    转载请注明出处:http://blog.csdn.net/crazy1235/article/details/50612827 本篇文章对android的Tween动画和帧动画以及布局动画进行总结. ...

  6. error: unpacking of archive failed on file /usr/sbin/zabbix_agent;592e5bc3: cpio: open

    # lsattr /usr/ ----------I--e- /usr/lib64 ----------I--e- /usr/bin -------------e- /usr/libexec ---- ...

  7. /etc/sudoers 配置

    /etc/sudoers ## Allow root to run any commands anywhere root ALL=(ALL) ALL #第一个root是用户账号 第二列的ALL是登陆者 ...

  8. 无法加载 DLL“ParkCOM.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E) 终结者

    C#调用利用C++写的dll 常遇到的情况是无法加载DLL"***.dll":找不到指定的模块(异常来自HRESULT:0x8007007E)终极解决方法如下: 1.产生原因 可能 ...

  9. android 调用系统相机拍照 获取原图

      好吧,为了这个问题又折腾了一整天.之前在网上找来的方法,如果在onActivityResult中直接用data.getData()的方式来生成bitmap,其实获取的是拍照生成的缩略图!看看尺寸就 ...

  10. layui的table中使用switch

    {{# if(false){ }} <input type="checkbox" name="switch" lay-skin="switch& ...