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)的更多相关文章

  1. 恶补web之八:jQuery(3)

    jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...

  2. 恶补web之八:jQuery(2)

    jquery中非常重要的部分,就是操作dom的能力: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括html标记) val() - 设置或返回表单字段 ...

  3. 恶补web之一:html学习(1)

    发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦! html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),h ...

  4. 恶补web之六:javascript知识(2)

    若要向html添加新元素,必须首先创建该元素,然后向一个已存在的元素追加该元素 <div id="div1"> <p id="p1">这 ...

  5. 恶补web之三:http学习

    http是超文本传输协议的简称,该协议设计目的是保证客户机与服务器之间的通信.http的工作方式为客户机与服务器之间的请求-应答协议. 一般来说web浏览器是客户端,计算机上的网络应用程序可能作为服务 ...

  6. 恶补web之一:html学习(2)

    iframe用于在网页内显示网页:<iframe src="URL"></iframe>,iframe可用作链接的目标: <!DOCTYPE html ...

  7. 恶补web之二:css知识(3)

    css有3种定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定. 通过使用position属性,可以选择4种不同类型的 ...

  8. 恶补web之二:css知识(2)

    css字体属性定义文本的字体系列,大小,加粗,风格和变形等. css中包含两种字体系列:通用字体系列和特定字体系列. font-family属性定义文本的字体系列: body {font-family ...

  9. 恶补web之七:html DOM知识

    html DOM定义了访问和操作html文档的标准;dom是w3c的标准,dom定义了访问html和xml文档的标准: w3c文档对象模型(dom)是中立平台和语言的接口,它允许程序和脚本动态访问和更 ...

随机推荐

  1. UNIX网络编程——利用recv和readn函数实现readline函数

    在前面的文章中,我们为了避免粘包问题,实现了一个readn函数读取固定字节的数据.如果应用层协议的各字段长度固定,用readn来读是非常方便的.例如设计一种客户端上传文件的协议,规定前12字节表示文件 ...

  2. 简单RPC之Socket实现

    最近看到Dubbo大神写得使用Socket实现的简单的RPC调用,对RPC的理解更简单了,然后根据大神的代码自己也重构了一下. RPC Server端代码,主要是使用ServerSocket获得rpc ...

  3. 【java集合框架源码剖析系列】java源码剖析之ArrayList

    注:博主java集合框架源码剖析系列的源码全部基于JDK1.8.0版本. 本博客将从源码角度带领大家学习关于ArrayList的知识. 一ArrayList类的定义: public class Arr ...

  4. 深入剖析Tomcat类加载机制

    1JVM类加载机制 JVM的ClassLoader通过Parent属性定义父子关系,可以形成树状结构.其中引导类.扩展类.系统类三个加载器是JVM内置的. 它们的作用分别是: 1)引导类加载器:使用n ...

  5. A*寻路算法入门(三)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  6. 字符串的n位左旋

    要求:将主串的某一段(n位)翻转到主串的最后,如:abcdef以2位翻转则结果为:cdefab.要求时间复杂度为O(n),空间复杂度为O(1) 思路一:可以重新定义一个与原串相同大小的字符数组resu ...

  7. EBS Form个性化的工作原理

    Form的个性化是EBS的比较好用的一个东西.好像很少人研究它的工作原理,都是直接用.最近有个同事问我问题,说他在个性化编写的代码无效果.解决之后,才发现,原来传说中的EBS的Form的个性化是这样子 ...

  8. JAVA 继承基本类、抽象类、接口

    Java是一个面向对象的语言,java面向对象一般有三大特征:封装.继承.多态. 封装:就是把一些属性和方法封装到一个类里. 继承:就如子类继承父类的一些属性和方法. 多态:就如一个父类有多个不同特色 ...

  9. Android实训案例（九）——答题系统的思绪，自己设计一个题库的体验，一个思路清晰的答题软件制作过程

    Android实训案例(九)--答题系统的思绪,自己设计一个题库的体验,一个思路清晰的答题软件制作过程 项目也是偷师的,决心研究一下数据库.所以写的还是很详细的,各位看官,耐着性子看完,实现结果不重要 ...

  10. Android 官方命令深入分析之Android Debug Bridge（adb）

    作者:宋志辉 Android Debug Brideg(adb)是一个多用途的命令行工具.可以与Android虚拟机进行通信或连接真机.它同样提供了访问设备shell的高级命令行操作的权限.它是一个包 ...