快捷導(dǎo)航

Jquery change(fontsize,background) 改變顏色與背景的代碼

更新時(shí)間：2010年05月13日 18:08:00 作者：

基于Jquery的改變顏色與背景的代碼，對于學(xué)習(xí)jquery的朋友可以參考下。

change(fn)
在每一個(gè)匹配元素的change事件中綁定一個(gè)處理函數(shù)。
change事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，也會(huì)當(dāng)其值在獲得焦點(diǎn)后改變時(shí)觸發(fā)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>豪情</title> <style> p{line-height:23px;margin:0;padding:0;} </style> </head> <body> <div> <label for="fontsize">字體大小</label> <select name="" id="fontsize"> <option value="12px">小號(hào)</option> <option value="14px">較小</option> <option value="16px" >中號(hào)</option> <option value="18px">較大</option> <option value="24px">大號(hào)</option> </select> <label for="backgoundcolor">背景顏色</label> <select name="" id="backgoundcolor"> <option value="#F4FBFF">默認(rèn)</option> <option value="gray">淡灰</option> <option value="red">紅色</option> <option value="green">綠色</option> <option value="yellow">明黃</option> </select> <label for="fontcolor">字體顏色</label> <select id="fontcolor"> <option value="#000">黑色</option> <option value="#f00">紅色</option> <option value="#060">綠色</option> <option value="#00f">藍(lán)色</option> <option value="#600">棕色</option> </select> <label> </div> <h4>春江花月夜</h4> <p>春江潮水連海平，海上明月共潮生。滟滟隨波千萬里，何處春江無月明。</p> <p>江流宛轉(zhuǎn)繞芳甸，月照花林皆似霰?？绽锪魉挥X飛，汀上白沙看不見。</p> <p>江天一色無纖塵，皎皎空中孤月輪。江畔何人初見月？江月何年初照人？</p> <p>人生代代無窮已，江月年年只相似。不知江月待何人，但見長江送流水。</p> <p>白云一片去悠悠，青楓浦上不勝愁。誰家今夜扁舟子？何處相思明月樓？</p> <p>可憐樓上月徘徊，應(yīng)照離人妝鏡臺(tái)。玉戶簾中卷不去，搗衣砧上拂還來。</p> <p>此時(shí)相望不相聞，愿逐月華流照君。鴻雁長飛光不度，魚龍潛躍水成文。</p> <p>昨夜閑潭夢落花，可憐春半不還家。江水流春去欲盡，江潭落月復(fù)西斜。</p> <p>斜月沉沉藏海霧，碣石瀟湘無限路。不知乘月幾人歸，落月?lián)u情滿江樹。</p> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

javascript（基于jQuery）實(shí)現(xiàn)鼠標(biāo)獲取選中的文字示例【測試可用】
這篇文章主要介紹了javascript（基于jQuery）實(shí)現(xiàn)鼠標(biāo)獲取選中的文字,涉及jQuery響應(yīng)鼠標(biāo)事件及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-10-10
快速學(xué)習(xí)jQuery插件 jquery.validate.js表單驗(yàn)證插件使用方法
快速學(xué)習(xí)jQuery插件中的jquery.validate.js表單驗(yàn)證插件使用方法，Validation是歷史最悠久的jQuery插件之一，經(jīng)過了全球范圍內(nèi)不同項(xiàng)目的驗(yàn)證，并得到了許多Web開發(fā)者的好評(píng)，感興趣的小伙伴們可以參考一下
2015-12-12
jquery和javascript中如何將一元素的內(nèi)容賦給另一元素
將一元素的內(nèi)容賦給另一元素，在某些情況下還是比較實(shí)用的，下面為大家講解下jquery和javascript中是如何實(shí)現(xiàn)的
2014-01-01
jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫（附源碼下載）
ImageDrawer.js是一款可以實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫的jQuery插件，接下來通過本文給大家介紹jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫（附源碼下載），需要的朋友參考下
2016-02-02
淺談jQuery before和insertBefore的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery before和insertBefore的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-12-12
深入分析jQuery.one() 函數(shù)
這篇文章主要介紹了jQuery.one() 函數(shù)的用法，文中通過示例代碼幫助大家更好的學(xué)習(xí)，感興趣的朋友可以參考一下
2020-06-06
jQuery列表拖動(dòng)排列具體實(shí)現(xiàn)
列表拖動(dòng)排列的實(shí)現(xiàn)方法有很多，下文為大家介紹下使用jQuery是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過
2013-11-11
基于jQuery的消息提示插件 DivAlert之旅（二）
今天在首頁看到了一位仁兄用JS實(shí)現(xiàn)的模仿QQ校友彈出提示框效果的文章（文章鏈接），同道中人啊。?？雌鸫_實(shí)不錯(cuò)，看來我第一版的有點(diǎn)單純了，咱也美化一下，就借鑒一下人家這兩張圖片吧
2010-04-04
移動(dòng)端JQ插件hammer使用詳解
本文給大家介紹的是一款移動(dòng)端下的jQuery插件Hammer.js，他是一個(gè)開源的，輕量級(jí)的javascript庫，它可以在不需要依賴其他東西的情況下識(shí)別觸摸，鼠標(biāo)事件支持各種手機(jī)事件，比如縮放，qq左滑動(dòng)刪除，放大，旋轉(zhuǎn)等
2015-07-07
jQuery AjaxQueue改進(jìn)步驟
之前用jquery實(shí)現(xiàn)了一個(gè)簡單的AjaxQueue，用于管理ajax請求的發(fā)送順序。這次改進(jìn)了下。
2011-10-10