恶补web之八:jQuery(1)
来源:互联网 发布:淘宝地区下拉选择 编辑:程序博客网 时间:2024/06/16 12:26
jquery是一个js库,极大的简化了js编程.jquery是一个写的更少,但做的更多的轻量级js库.
jquery位于一个js文件中,其中包含了所有jquery函数,可以用如下标记把jquery添加到网页中:
<head>
<script src="jquery.js"></script>
</head>
有2个版本的jquery可供下载,一个精简过的(production version),另一份是未压缩的(development version)供调试和阅读.都可以从jquery.com下载.
如果不想在本地存放jquery库,可以从google或microsoft加载cdn jquery核心文件:
使用 Google 的 CDN
<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script></head>
使用 Microsoft 的 CDN
<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script></head>
jquery语法实例:
$(this).hide() 隐藏当前html元素,$("#test").hide()隐藏id="test"的元素;
$("p").hide() 隐藏所有<p>元素, $(".test").hide()隐藏所有class="test"元素
其中美元符号$定义jQuery.
为了防止在完全加载文档之前就运行jquery代码,可以将jquery代码放置在document ready函数中:
$(document).ready(function(){
....
});
jquery选择器:
使用XPath来选择给定属性的元素:$("[href]") 选取所有带有href属性的元素,$("[href='X']")选取所有带有href值等于"#"的元素,$("[href$='.jpg']")选取所有href值以'.jpg'结尾的元素;
css选择器可以用以改变html元素的css属性:
$("p").css("background-color","red)
如果网页中含有多个页面,希望共享js代码便于DRY或重构,可以吧jquery函数放到独立的.js文件中:
<script type="text/javascript" src="share.js"></script>
jquery使用$作为jQuery的简写方式,为了避免和其他js库冲突(prototype也是用$),可以使用noConflict方法来解决该问题. var jq = jQuery.noConflict();
当遵循如下原则时,代码更便于维护:
1.把所有jquery代码放置于事件处理函数中
2.把所有事件处理函数放置于文档就绪事件处理器中
3.把jquery代码放置于单独的js文件中
4.如果存在名称冲突,则重命名jquery库
hide和show隐藏和显示节点
toggle切换hide和show,显示被隐藏的元素,并隐藏已显示的元素;
fadeIn用于淡入已隐藏的元素
fadeOut用于淡出可见元素
fadeToggle和toggle类似
fadeTo方法允许渐变为给定的不透明度
slideDown和slideUp用于向下和向上滑动元素
slideToggle类似
animate方法用于创建自定义动画
stop用于停止动画或效果
以上大部分方法都可以带一个callback函数,该函数将在当前动画100%完成之后执行;
可以用链接(chaining)技术,允许我们在相同的元素上运行多条jquery命名,一条接着另一条,如果要链接一个动作,只需要简单地把该动作追加到之前的动作上.
- 恶补web之八:jQuery(1)
- 恶补web之八:jQuery(2)
- 恶补web之八:jQuery(3)
- 恶补web之二:css知识(1)
- 恶补web之六:javascript知识(1)
- 对文件的输入输出----恶补之八
- 恶补web之三:http学习
- 恶补web之四:xhtml学习
- 恶补web之五:dhtml学习
- 恶补web之七:html DOM知识
- 恶补web之二:css知识(2)
- 恶补web之二:css知识(3)
- 恶补web之六:javascript知识(2)
- 恶补web之一:html学习(1)
- 恶补jquery(一)jquery简介
- web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)
- 恶补jquery(二)jquery常用选择器
- 恶补jquery(三)jquery操作DOM
- unity3d android 插件
- Sparse Representation
- Google Protocol Buffer 的使用和原理
- ModSecurity Advanced Topic of the Week: Detecting Malware with Fuzzy Hashing
- Android中用Application类
- 恶补web之八:jQuery(1)
- 黑马程序员_读取键盘录入和转换流(InputStreamReader类和OutputStreamWriter类)
- LeetCode--Symmetric Tree
- 编译型语言、解释型语言、静态类型语言、动态类型语言概念与区别
- 【Linux】在linux中部署java项目
- 使用clang编译Object-C程序
- C++打开指定文件夹,并选中文件
- Java数组初步
- 制作ARM chroot 编译环境