jQuery实践树(2)
2015-12-21 14:30
716 查看
上一个实践主要对jquery的ready事件进行。本实践要来使用jQuery改变页面的背景图片。
可以先试试效果:http://hovertree.com/texiao/jquerytree/2/
当你打开页面时,会看到一闪一闪的雪花效果。
这不是使用jQuery的效果,只是用CSS设置了背景图片为动态图而已。
本实践将要用jquery改变页面的背景图。
代码如下:
其中的$(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前端: /article/4797642.html
可以先试试效果: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前端: /article/4797642.html
相关文章推荐
- 七个不允许错过的jQuery小技巧
- Jquery easyui中的有效性检查
- JQuery获取Checkbox组的值
- jquery获取地址栏的get参数
- 用JQuery操作元素的style属性
- BBOSS框架使用jquery方式传參到后台的时候,要注意的事项
- Js/Jquery获取iframe中的元素
- jQuery焦点图插件SaySlide
- jquery 插件扩展2
- jquery 插件扩展
- jQuery学习笔记(三)
- jquery实现删除一个元素后面的所有元素功能
- jQuery Validate 表单验证
- jquery中attr和prop的区别
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
- jQuery中的mouseleave和mouseout的区别
- jqueryEasyUI中给accordion伸缩面板动态赋title值
- 抛弃jQuery,拥抱原生JavaScript
- placeholder的兼容处理(jQuery下)
- placeholder的兼容处理(jQuery下)