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

用JQuery改变HTML中Element的text颜色

阅读更多

下面的例子展示了如何在在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

分享到:
评论

相关推荐

    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学习资料

    3. **DOM操作(DOM Manipulation)**:jQuery提供了丰富的DOM操作方法,包括添加、删除和修改元素,如`$("div").append("&lt;p&gt;Hello&lt;/p&gt;")`在每个div后添加一个段落。 4. **事件处理(Events)**:jQuery统一了事件...

    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样式、处理事件以及创建复杂的动画效果。 在这个插件中,"点击弹出信息提示框"的功能通常涉及到以下几个关键知识点: ...

Global site tag (gtag.js) - Google Analytics