上一个实践主要对jquery的ready事件进行。本实践要来使用jQuery改变页面的背景图片。
可以先试试效果：http://hovertree.com/texiao/jquerytree/2/

当你打开页面时，会看到一闪一闪的雪花效果。
这不是使用jQuery的效果，只是用CSS设置了背景图片为动态图而已。
本实践将要用jquery改变页面的背景图。

代码如下:

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>jQuery实践树(2) - 何问起</title><base target="_blank" />

 <meta charset="utf-8" />

 <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>

 <style>body{margin:0px;background-image:url(http://hovertree.com/texiao/jquerytree/2/images/snow.jpg);}.jquerytree2{width:765px;margin:10px auto}</style>

 </head>

 <body>

 <div class="jquerytree2">

 <h1>何问起</h1>

 <h2>jQuery实践树(2) </h2>

 <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/h/bjae/9ofotfdj.htm">原文</a> <a href="http://hovertree.com/texiao/">特效</a>

 <br />

 当你打开页面时，会看到一闪一闪的雪花效果。<br />这不是使用jQuery的效果，只是用CSS设置了背景图片为动态图而已。<br />本实践将要用jquery改变页面的背景图。请点击下列链接。<br />

 <br />

 <a href="javascript:;" id="backHoverTree0" target="_self">圣诞节背景图</a> <a href="javascript:;" id="backHoverTree1" target="_self">背景图1</a> <a href="javascript:;" id="backHoverTree2" target="_self">背景图2</a> <a href="javascript:;" id="backHoverTree3" target="_self">背景图3</a>

 <a href="javascript:;" id="backHoverTree4" target="_self">还原</a> <a href="javascript:;" id="backHoverTree5" target="_self">清除背景图片</a>

 </div>

 <script>

 $(document).ready(function () {

 $("#backHo" + "verTree0").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/christmas.jpg)") });

 $("#backHoverTree1").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/flower.jpg)") });

 $("#backHoverTree2").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/bubble.jpg)") })

 $("#backHoverTree3").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/red.jpg)") })

 $("#backHoverTree4").on("click", function () { $("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/snow.jpg)") })

 $("#backHoverTree5").on("click", function () { $("body").css("background-image", "url()"); })

 })

 </script>

 </body>

 </html>

其中的$(document).ready(),表示当页面载入完后执行指定函数，请参考：http://hovertree.com/h/bjae/9ofotfdj.htm

代码中， $("#backHoverTree1")，是jquery的选择器，表示选择id为backHoverTree1的元素，也就是
<a href="javascript:;" id="backHoverTree1" target="_self">背景图1</a>
这个链接的id为backHoverTree1，请注意这是区分大小写的。

jQuery # 选择器 也叫做id选择器
# 选取带有唯一的指定 id 的元素。
id 引用 HTML 元素的 id 属性。
相同的 id 值只能在文档中使用一次。
语法
$("#id")

其中的id为必需。规定所要选择的元素的 id。
id 选择器使用 HTML 元素的 id 属性。

注意不要使用数字开头的 ID 名称！在某些浏览器中可能出问题。

选择了元素后，就可以对元素进行操作了，代码中的on()函数表示附加一个函数来处理指定的事件

请参考：http://keleyi.com/a/bjac/4013kn5s.htm

$("#backHoverTree1").on("click", function () { });
其中click表示点击，表示当点击id为backHoverTree1的元素时执行function中的代码
上面代码中实际为
$("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/flower.jpg)")
这个语句表示设置body的背景图片为http://hovertree.com/texiao/jquerytree/2/images/flower.jpg

$("body")表示选择body元素，这是一个标签选择器

请参考：http://hovertree.com/menu/jqueryselect/

选择之后，就是对body元素进行样式设置，也就是就是对body元素进行css()方法操作，css() 方法返回或设置匹配的元素的一个或多个样式属性。

一 返回 CSS 属性值
返回第一个匹配元素的 CSS 属性值。
注释：当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）。
$(selector).css(name)
其中 name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。

二设置 CSS 属性
设置所有匹配元素的指定 CSS 属性。
$(selector).css(name,value)
其中 name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。

value可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。
如果设置了空字符串值，则从元素中删除指定属性。

本示例代码下载：http://hovertree.com/h/bjae/5n2tvrlb.htm

web前端： http://www.cnblogs.com/jihua/p/webfront.html

jQuery实践树(2)的更多相关文章

  1. jQuery实践-别踩白块儿网页版

    ▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...

  2. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  3. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  4. Jquery实践--精读开篇

    JQuery实践,我已经看了最少三遍了.这里面的很多方法对我的工作很有帮助.但由于不是真的进行前端开发,所以JQuery中的很多功能也没有用到.所以隔一段时间想起,就会发觉,一些东西又忘记了.所以趁这 ...

  5. Jquery的树插件jqxTreeGrid的使用小结

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...

  6. JQuery 目录树jsTree插件用法

    PHP循环构造目录树结构 <ul> <php> function digui($fid,$level){ $class=M("wangpan_class") ...

  7. jquery实践

    转:http://www.cnblogs.com/Wayou/p/jquery_best_prictise.html jQuery编程的最佳实践   好像是feedly订阅里看到的文章,读完后觉得非常 ...

  8. Jquery的树插件jqxTreeGrid的使用小结（实现基本的增删查改操作）

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...

  9. JQuery实践--事件

    通过HTML网页所呈现的界面是异步的和事件驱动的.步骤: 建立用户界面 等待又去的事情发生 做出相应的反应 重复 浏览器所实现的事件模型 DOM第0级事件模型 事件处理程序是通过吧函数实例的引用指派到 ...

随机推荐

  1. iOS-C基础

    iOS开发系列--C语言之基础知识 概览 当前移动开发的趋势已经势不可挡,这个系列希望浅谈一下个人对IOS开发的一些见解,这个IOS系列计划从几个角度去说IOS开发: C语言 OC基础 IOS开发(i ...

  2. iOS-网络基础

    概览 大部分应用程序都或多或少会牵扯到网络开发,例如说新浪微博.微信等,这些应用本身可能采用iOS开发,但是所有的数据支撑都是基于后台网络服务器的.如今,网络编程越来越普遍,孤立的应用通常是没有生命力 ...

  3. web安全测试资料

    最近因为工作需要,整理了安全测试工具AppScan的一个教程.目录如下: 网上对于appscan的资料挺多,但是也很乱很杂.不利于系统的学习,这也是我为什么整理这样一份指导手册. 在这份手册里,主要包 ...

  4. MongoDB 内嵌文档

    MongoDB是文档型的数据库系统,doc是MongoDB的数据单位,每个doc相当于关系型数据库的数据行(row),doc和row的区别在于field的原子性:row中的column是不和分割的原子 ...

  5. SQL Server Audit监控触发器状态

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 实现代码(SQL Codes) 注意事项(Attention) 疑问(Questions) 参 ...

  6. 【转】C# using的三种使用方法

    原文地址http://www.cnblogs.com/fashui/archive/2011/09/29/2195061.html,感谢心茶前辈的总结. 1.using指令 using+命名空间,这种 ...

  7. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  8. ASP.NET中使用HttpWebRequest调用WCF

    最近项目需要和第三网站进行数据交换,第三方网站基本都是RESTfull形式的API,但是也有的是Web Service,或者.NET里面的WCF.微软鼓励大家使用WCF替代Web Service. W ...

  9. 修改USB固件库的Customer_HID例程

    我用的是神州三号开发板子,板子的USB模块原理图为: 配置端口G的11号引脚为usb的使能引脚,按理来说应该是开漏输出的(看了很多的修改代码都是这个模式),不过就是不能使能usb,只能配置成推挽的才行 ...

  10. 让你的Mac支持NTFS

    前段时间换成Mac电脑之后,发现有一点不爽,不能在Mac下写入NTFS格式的磁盘,所以就去研究了一下. 解决方法有如下三种. 第一种,直接使用第三方软件,如Paragon NTFS for MAC,T ...