jQuery（三）：样式操作

一、DOM操作分类

DOM Core：任何一种支持DOM的编程语言都可以使用它，例如：getElementById()。
HTML-DOM：用于处理HTML文档，例如：document.forms。
CSS-DOM：用于操作CSS，例如：element.style.color="green"。

二、jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装，使用起来更加简便。

jQuery中的DOM操作可分为如下几种：

样式操作。
内容及value属性值操作。
节点操作。
节点属性操作。
节点遍历。
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>

效果：

转载于:https://www.cnblogs.com/dotnet261010/p/9735092.html

jQuery（三）：样式操作相关推荐

jQuery三天复习.md
jQuery 复习--by 传智前端与移动开发学院 1. jQuery是什么?(了解) www.github.com jQuery 其实就是一堆的js函数,是普通的js,只不过应用广泛,形成了行业标准 ...
jQuery学习笔记之jQuery的DOM操作
前期:http://blog.csdn.net/goodshot/article/details/20202019 一.节点的操作 1.查找节点: var $var_1=$("htmltyp ...
从零玩转jQuery（三）之jQueryCSS样式操作
jQueryCSS样式操作 css()方法:设置css样式 1.方法一:逐个设置 $(function () {$('div').css("width","100px&q ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件
jQuery事件: jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如: <script>$('input').cli ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
02 - jQuery选择器以及样式操作
jQuery中的选择器在说jQuery中的选择器之前咱们先回忆一下DOM中选择元素的方法 // id document.getElementById('id'); // 根据标签多个 docum ...

jQuery（三）：样式操作

jQuery（三）：样式操作相关推荐

最新文章

热门文章