恶补web之八:jQuery(1)
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(3)
jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...
- 恶补web之八:jQuery(2)
jquery中非常重要的部分,就是操作dom的能力: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括html标记) val() - 设置或返回表单字段 ...
- 恶补web之一:html学习(1)
发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦! html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),h ...
- 恶补web之六:javascript知识(2)
若要向html添加新元素,必须首先创建该元素,然后向一个已存在的元素追加该元素 <div id="div1"> <p id="p1">这 ...
- 恶补web之三:http学习
http是超文本传输协议的简称,该协议设计目的是保证客户机与服务器之间的通信.http的工作方式为客户机与服务器之间的请求-应答协议. 一般来说web浏览器是客户端,计算机上的网络应用程序可能作为服务 ...
- 恶补web之一:html学习(2)
iframe用于在网页内显示网页:<iframe src="URL"></iframe>,iframe可用作链接的目标: <!DOCTYPE html ...
- 恶补web之二:css知识(3)
css有3种定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定. 通过使用position属性,可以选择4种不同类型的 ...
- 恶补web之二:css知识(2)
css字体属性定义文本的字体系列,大小,加粗,风格和变形等. css中包含两种字体系列:通用字体系列和特定字体系列. font-family属性定义文本的字体系列: body {font-family ...
- 恶补web之七:html DOM知识
html DOM定义了访问和操作html文档的标准;dom是w3c的标准,dom定义了访问html和xml文档的标准: w3c文档对象模型(dom)是中立平台和语言的接口,它允许程序和脚本动态访问和更 ...
随机推荐
- shell-----sed命令详解
Table of Contents 1. Sed简介 2. 定址 3. Sed命令 4. 选项 5. 元字符集 6. 实例 7. 脚本 1. Sed简介 sed是一种在线编辑器,它一次处理 ...
- UNIX网络编程——原始套接字的魔力【下】
可以接收链路层MAC帧的原始套接字 前面我们介绍过了通过原始套接字socket(AF_INET, SOCK_RAW, protocol)我们可以直接实现自行构造整个IP报文,然后对其收发.提醒一点,在 ...
- Android必知必会-获取视频文件的截图、缩略图
背景 公司最近要求给我负责的APP加上视频录制和发布的功能,我简单的完成了基本的录制和视频压缩功能,后来发现发布接口需要上传视频的截图,网上搜索了一下资料,在这里整理一下. 代码实现 /** * 获取 ...
- C语言函数--atoi
在Java语言中,由于面向对象的思想,它对基本数据类型也进行了相应的封装,例如 int 就封装成了 Integer 类,这无疑会使我们的操作方便了许多,例如,有一个字符串,我想把它转换为i ...
- 插件开发之360 DroidPlugin源码分析（二）Hook机制
转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52124397 前言:新插件的开发,可以说是为插件开发者带来了福音,虽然还很多坑要填补, ...
- C++中所有的变量和函数都必须有类型
/* C++中所有的变量和函数都必须有类型 C语言中的默认类型在C++中是不合法的 函数f的返回值是什么类型,参数又是什么类型? 函数g可以接受多少个参数? */ //更换成.cpp就会报错 f(i) ...
- UNIX网络编程——带外数据
许多传输层有带外数据的概念,它有时也称为经加速数据.其想法是一个连接的某端发生了重要的事情,而且该端希望迅速通告其对端.这里"迅速"意味着这种通知应该在已排队等待发送的任何&quo ...
- 【Unity Shaders】Vertex & Fragment Shader入门
写在前面 三个月以前,在一篇讲卡通风格的Shader的最后,我们说到在Surface Shader中实现描边效果的弊端,也就是只对表面平缓的模型有效.这是因为我们是依赖法线和视角的点乘结果来进行描边判 ...
- LPSTR、LPWSTR、LPCSTR、LPCWSTR、LPTSTR、LPCTSTR的区分与转化
首先在编译程序时经常会遇到这种问题: 错误 1 error C2664: "CWnd::MessageBoxW": 不能将参数 1 从"const char [3]&qu ...
- 单元测试junit框架详解
首先在给出一个类Operator,加入如下代码: public class Operator { // 加法 运算 public int add(int i,int j){ return i+j; } ...