jQuery实践树(2)
上一个实践主要对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)的更多相关文章
- jQuery实践-别踩白块儿网页版
▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...
- 基于jquery下拉列表树插件代码
分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <table width= ...
- JQuery Ztree 树插件配置与应用小结
JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...
- Jquery实践--精读开篇
JQuery实践,我已经看了最少三遍了.这里面的很多方法对我的工作很有帮助.但由于不是真的进行前端开发,所以JQuery中的很多功能也没有用到.所以隔一段时间想起,就会发觉,一些东西又忘记了.所以趁这 ...
- Jquery的树插件jqxTreeGrid的使用小结
一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...
- JQuery 目录树jsTree插件用法
PHP循环构造目录树结构 <ul> <php> function digui($fid,$level){ $class=M("wangpan_class") ...
- jquery实践
转:http://www.cnblogs.com/Wayou/p/jquery_best_prictise.html jQuery编程的最佳实践 好像是feedly订阅里看到的文章,读完后觉得非常 ...
- Jquery的树插件jqxTreeGrid的使用小结(实现基本的增删查改操作)
一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...
- JQuery实践--事件
通过HTML网页所呈现的界面是异步的和事件驱动的.步骤: 建立用户界面 等待又去的事情发生 做出相应的反应 重复 浏览器所实现的事件模型 DOM第0级事件模型 事件处理程序是通过吧函数实例的引用指派到 ...
随机推荐
- 浅谈cssText
给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200 ...
- OleDB Destination 用法
第一部分:简介 OleDB Destination component 是将数据流load 到destination,共有5种Data Access Mode,一般的Destination compo ...
- javascript中15种原生对象类型系统综述
前面的话 在编程语言中,能够表示并操作的值的类型称做数据类型,编程语言最基本的特性就是能够支持多种数据类型.javascript拥有强大的类型系统,主要包括原生对象.宿主对象和浏览器拓展对象,本文主要 ...
- 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转
在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...
- 一个简易的MysQL性能查询脚本
如下: #!/bin/sh mysqladmin -P3306 -uroot -p ext |\ awk -F"|" \ "BEGIN{ count=0; }" ...
- GROUP BY的扩展
GROUP BY的扩展主要包括ROLLUP,CUBE,GROUPING SETS三种形式. ROLLUP rollup相对于简单的分组合计增加了小计和合计,解释起来会比较抽象,下面我们来看看具体事例. ...
- SQL Server利用递归把所有【子部门员工】汇总到【一级根节点部门】
前言 说起这个需求,有点反常规,左边是组织机构树,右边是组织机构对应的员工列表.点击左侧组织机构时传一个组织机构ID,然后查询该组织机构以及其所属的一级节点,如果有部门直属单击节点组织机构,则挂出来员 ...
- windows8.1 安装Redis
说点什么 现在互联网都在玩高大上的分布式缓存,或是分布式数据库,去面试的时候也会问些相关知识及应用场景,再没玩过就要out了. Redis官方只提供了Linux的版本下载,windows的需要去gi ...
- Azure Application Gateway (4) 设置URL路由 - PowerShell
<Windows Azure Platform 系列文章目录> 本文将介绍如果使用Azure PowerShell,创建Azure Application Gateway URL Rout ...
- 图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...