`
zlpx
  • 浏览: 156881 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用JQuery改变HTML中Element的text颜色

JQuery 
阅读更多

下面的例子展示了如何在在HTML5中用JQuery设置HTML中Element的颜色。用JQuery 和 CSS()方法 。

 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
    <p id="debug">The quick brown fox gets replaced by jQuery.</p>
    <input type="button" value="Set color" onclick="btn_click();" />
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function btn_click() {
            var hex = "#" + Math.round(Math.random() * 0xFFFFFF).toString(16);
            $("#debug").css("color", hex);
        }
    </script>
 
</body>
</html>

 

源码下载：

 

changing-an-elements-text-color-using-jquery.zip

分享到：
| Flash移动开发的一本好书Android&IOS
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery1.10+中文完整API

    jQuery 提供了一系列方法来操作 DOM 元素，如 `append()`、`prepend()` 用于在元素内部添加内容，`html()`、`text()` 用于获取或设置元素的 HTML 或纯文本内容，`attr()` 和 `removeAttr()` 用来获取或删除属性。...

    jQuery 3.3.1 api docs 中文手册 [chm]

    jQuery 提供了丰富的DOM操作方法，如`append()`在元素内部追加内容，`prepend()`在元素内部前置内容，`remove()`删除元素，`clone()`复制元素，以及`html()`, `text()`, `val()`等用于获取或设置元素内容的方法。...

    JQUERY的API中文文档

    例如，`$("#element").css("color", "red").fadeIn(1000)`会先改变元素颜色，再进行淡入动画。 7. **插件扩展（Plugins）** jQuery的生态系统中有大量的第三方插件，如表单验证、轮播图、日期选择器等，它们通过...

    jqueryapi1.7中文参考手册

    6. **链式操作（Chaining）**：jQuery的返回对象通常是jQuery对象本身，这使得我们可以连续调用多个方法，如`$("#element").css("color", "red").slideUp(500)`，先改变颜色再滑动隐藏元素。 7. **插件扩展...

    jquery 中文api 3.2.1

    **DOM操作**：jQuery提供了一套方便的DOM操作方法，如`append()`用于在元素内部结尾处添加内容，`prepend()`用于在元素内部开头处添加内容，`remove()`用于移除元素，`clone()`用于复制元素，以及`html()`、`text()`...

    jQuery中element选择器用法实例

    在jQuery库中，Element选择器是一种基础且非常实用的选择器，它允许我们通过元素标签名来选取DOM树中的特定节点。这种选择器是基于CSS选择器的，因此，如果你熟悉CSS，理解jQuery中的Element选择器将非常容易。下面...

    jQuery1.3中文参考

    - jQuery Color Animation：扩展颜色动画效果。 ### 八、性能优化 jQuery 1.3 版本着重于性能提升，包括更快的选择器引擎和优化的DOM操作。此外，使用`.delegate()`和`.live()`方法可以更高效地处理事件。 ### ...

    jquery文字特效制作上下颜色文字渐变带有立体效果

    总结来说，创建“jquery文字特效制作上下颜色文字渐变带有立体效果”需要理解jQuery的选择器和样式操作，以及CSS3的`text-shadow`属性。通过结合颜色渐变和阴影动画，我们可以营造出引人注目的视觉效果，提升网页的...

    jquery.qrcode生成二维码demo

    `jQuery.qrcode.js` 是一个轻量级的 jQuery 插件，专为在浏览器环境中生成二维码而设计，无需依赖任何第三方服务，简化了开发过程。 ### 1. 插件安装与引入 要使用 `jQuery.qrcode.js`，首先需要确保你的项目中...

    jQuery手册1.4.1在线版 - 中文

    5. **动画效果**：jQuery的`.animate()`函数可以创建平滑的动画效果，包括改变元素的大小、位置、颜色等属性。另外，还有`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等预定义的动画方法。 6. **Ajax交互**：...

    jqueryapi1.4参考手册

    2. **DOM操作**：jQuery提供了方便的DOM操作接口，如`$(element).append()`用于在元素内部追加内容，`$(element).remove()`用于删除元素，`$(element).html()`和`$(element).text()`分别用于设置或获取元素的HTML...

    jQuery1.8.3类库文件

    它提供了简洁的API，如`$(selector)`选择器用于选取HTML元素，`$(element).html()`和`$(element).text()`用于获取或设置元素的HTML内容和文本内容，以及`$(element).append()`和`$(element).prepend()`用于向元素...

    jQuery常见开发技巧详细整理

    在jQuery的开发过程中，掌握一些常见技巧能显著提升开发效率和代码质量。下面是一些详细的jQuery开发技巧： 1. **引用页面元素**：jQuery通过`$()`选择器引用元素，支持ID、类名、元素类型以及层级关系和DOM或XPath...

    Jquery 样式和效果

    在本文中，我们将深入探讨jQuery中的样式和效果处理，这些是jQuery功能的重要组成部分，让网页交互变得更加生动和有趣。** ### 1. jQuery 选择器 jQuery 提供了丰富的选择器来定位DOM元素，比如： - `$("#id")` ...

    jQuery详细教程

    jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素的背景颜色更改为红色： 实例 $("p").css("background-color","red"); 更多的选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") ...

    50个jquery例子源码

    4. **链式调用**：jQuery对象支持链式调用，如`$("#element").css("color", "red").slideUp();`可以先改变颜色再执行滑动隐藏效果。 5. **动画效果**：jQuery的`.animate()`方法可以创建自定义动画，如改变大小、...

    jquery1.7中文api

    在jQuery 1.7中，对CSS3选择器的支持更加完善，如`$:nth-child(n)`选取第n个子元素。 2. **DOM操作** jQuery提供了丰富的DOM操作方法，如`append()`用于在元素内部添加内容，`prepend()`则在元素内部的开头插入...

    Jquery结合colorpicker.js插件实现的颜色选择器特效源码.zip

    1. **初始化**：在HTML中，通常需要一个输入框(input[type="text"])或者一个按钮，作为颜色选择器的触发元素。然后通过jQuery选择器获取该元素，并调用colorpicker插件的初始化方法，如`$('input.color')....

    jQuery点击弹出信息提示框插件.zip

    jQuery通过提供简洁的API，让开发者能够用更少的代码实现更多的功能，比如选择DOM元素、操作CSS样式、处理事件以及创建复杂的动画效果。 在这个插件中，"点击弹出信息提示框"的功能通常涉及到以下几个关键知识点： ...

    JQUery超炫登录界面login

    2. **反馈提示**：当用户输入错误时，可以使用jQuery动态修改元素的文本或显示错误消息。例如，`$(element).text("错误信息!");` 3. **登录提交**：点击登录按钮时，jQuery会阻止表单的默认提交行为，然后使用`$....

Magicbox
Global site tag (gtag.js) - Google Analytics