一、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. C#基础第八天-作业-设计类-面向对象方式实现两个帐户之间转账

    要求1:完成以下两种账户类型的编码.银行的客户分为两大类:储蓄账户(SavingAccount)和信用账户(CreditAccount),两种的账户类型的区别在于:储蓄账户不允许透支,而信用账户可以透 ...

  2. kafak manager + zookeeper + kafka 消费队列快速清除

    做性能测试时,kafka消息队列比较长,让程序自己消费完毕需要等待很长时间.就需要快速清理kafka队列 清理方式把 这kafak manager + zookeeper + kafka 这些应用情况 ...

  3. mysql 中只能使用 localhost 登录，用ip不能登陆

    解决办法 1 首先使用 localhost 登录 mysql 服务器,如果想要所用ip都可以登录本地mysql 服务器,执行以下授权命令 2 grant all privileges on *.* t ...

  4. Talend open studio如何调试代码

    Talend将设计的模型直接生成了java代码,可以直接对模型生成的java代码进行调试,排查问题比kettle灵活很多, 设计的模型如下: 生成的代码如下: 点击 Java Debug进入调试模式, ...

  5. php分享二十二：php面向对象

    1:static访问符 在类中使用static有两种主要用途.定义静态成员和定义静态方法.静态成员只保留一个变量的值,这个值对所有实例都是有效的 类的方法是static的,他所访问的属性也必须是sta ...

  6. Atitit gui控件定位解决方案

    Atitit gui控件定位解决方案 1.1. 但是AUTOIT没有找图功能..可以请大侠们写一份这个UDF出来吗?1 1.2. ahk1 1.3. Java +opencv 模板匹配2 1.1. 但 ...

  7. 利用javapns对IOS进行推送

    start package com.jynine.javapns; import java.io.FileNotFoundException; import java.io.IOException; ...

  8. CentOS编绎gcc

    1.解压tar -jxvf gcc-6.3.0.tar.bz2 -C ~/dev/2.下载前前提软件包cd gcc-6.3.0 ./contrib/download_prerequisitescd . ...

  9. /etc/ssh/sshd_config 关建字:AllowUsers root test01

    新加用户,在AllowUsers 新增的用户名,重启sshd后,新增的用户才能登录服务器.

  10. update set where exists 多表更新 在mssql、MySQL、Oracle中分别用法

    MySQL: UPDATE ChgCfm t1 INNER JOIN tb_dz_file t2 ON t1.ID = t2.ID ' SQLserver: FROM ChgCfmRcd t1 ' F ...