jQuery 是一个 JavaScript 库,位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。在平常的使用过程中，会常常与JavaScript，配合css使用，能够令网页产生很好的动态效果实现。

　　通常的，可以通过下面的标记把 jQuery 添加到网页中：

<head>

<script type="text/javascript" src="jquery.js"></script>

</head>

调用：

　　其中最基本的，是jQuery 对于css的调用，可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

	$(this).hide()        //隐藏当前的 HTML 元素。

	$("p").hide()         //隐藏所有 <p> 元素。

	$(".test").hide()     //隐藏所有 class="test" 的元素。

	$("#test").hide()     //隐藏所有 id="test" 的元素

　　jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

　　jQuery 元素选择器: jQuery 使用 CSS 选择器来选取 HTML 元素。

　　　　　　　　$("p") 选取 <p> 元素。

　　　　　　　　$("p.intro") 选取所有 class="intro" 的 <p> 元素。

　　　　　　　　$("p#demo") 选取所有 id="demo" 的 <p> 元素。

　　jQuery 属性选择器: jQuery 使用 XPath 表达式来选择带有给定属性的元素。

　　　　　　　　$("[href]")           //选取所有带有 href 属性的元素。

　　　　　　　　$("[href='#']")       //选取所有带有 href 值等于 "#" 的元素。

　　　　　　　　$("[href!='#']")      //选取所有带有 href 值不等于 "#" 的元素。

　　　　　　　　$("[href$='.jpg']")   //选取所有 href 值以 ".jpg" 结尾的元素。

　　　　　　　　$("div#intro .head"）  //id="intro" 的 <div> 元素中的所有 class="head" 的元素

　　　　　　　　$("ul li:first")	    //每个 <ul> 的第一个 <li> 元素

　　

效果：

　　通过 jQuery，可以实现各种效果：

　　显示/隐藏：
　　　　使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,语法：

　　　　　　$(selector).hide(speed,callback); //可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

　　　　　　$(selector).show(speed,callback); //可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

　　　　使用 toggle() 方法可以切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：

　　　　　　$("button").click(function(){

　　　　　　　　$("p").toggle();

　　　　　　});

　　淡入/淡出：

　　　　　　$(selector).fadeIn(speed,callback); //用于淡入已隐藏的元素。

　　　　　　$(selector).fadeOut(speed,callback); //用于淡出可见元素。

　　　　　　$(selector).fadeToggle(speed,callback); //可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

　　　　　　$(selector).fadeTo(speed,opacity,callback); //允许渐变为给定的不透明度（值介于 0 与 1 之间）。

　　　　　　//opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

　　滑动：

　　　　　　$(selector).slideDown(speed,callback); //用于向下滑动元素。

　　　　　　$(selector).slideUp(speed,callback);

　　　　　　$(selector).slideToggle(speed,callback);

　　动画：
　　　　animate() 方法用于创建自定义动画

　　　　　　$(selector).animate({params},speed,callback); //必需的 params 参数定义形成动画的 CSS 属性。

　　　　　　$("button").click(function(){

　　　　　　　　$("div").animate({

　　　　　　　　　　left:'250px',

　　　　　　　　　　opacity:'0.5',

　　　　　　　　　　height:'150px',

　　　　　　　　　　width:'150px'

　　　　　　　　});

　　　　　　});

　　stop() 方法：

　　　　用于在动画或效果完成前对它们进行停止，它适用于所有 jQuery 效果函数

　　　　　　　　$(selector).stop(stopAll,goToEnd); //可选的 stopAll 参数规定是否应该清除动画队列。

　　　　　　　　　　　　　　　　　　　　　　　　　　//默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

　　　　　　　　　　　　　　　　　　　　　　　　　　//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

对DOM操作：

　　三个简单实用的用于 DOM 操作的 jQuery 方法：

　　　　　　text() - 设置或返回所选元素的文本内容

　　　　　　html() - 设置或返回所选元素的内容（包括 HTML 标记）

　　　　　　val() - 设置或返回表单字段的值

　　attr() 方法用于获取属性值。

　　　　　　$("button").click(function(){

　　　　　　　　alert($("#w3s").attr("href"));

　　　　　　});

　　append() - 在被选元素的结尾插入内容
　　prepend() - 在被选元素的开头插入内容

　　　　　　$("#btn1").click(function(){

　　　　　　　　$("p").append(" <b>Appended text</b>.");

　　　　　　});

　　　　　　var txt1="<p>Text.</p>"; // 以 HTML 创建新元素

　　　　　　var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素

　　　　　　var txt3=document.createElement("p");

　　　　　　txt3.innerHTML="Text."; // 通过 DOM 来创建文本

　　　　　　$("body").append(txt1,txt2,txt3); // 追加新元素

　　after() 方法在被选元素之后插入内容。
　　before() 方法在被选元素之前插入内容。

　　　　　　$("img").before("<b>Before</b>");

　　　　　　$("img").after("<i>After</i>");

　　remove() 方法删除被选元素及其子元素。remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

　　　　删除 class="italic" 的所有 <p> 元素：

　　　　　　$("p").remove(".italic");

　　若干进行 CSS 操作的方法:

　　　　　　addClass() - 向被选元素添加一个或多个类

　　　　　　removeClass() - 从被选元素删除一个或多个类

　　　　　　toggleClass() - 对被选元素进行添加/删除类的切换操作

　　　　　　css() - 设置或返回样式属性

遍历：

　　jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。通过 jQuery 遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

  • <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
  • <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
  • 左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
  • <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
  • 两个 <li> 元素是同胞（拥有相同的父元素）。
  • 右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
  • <b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

向上遍历 DOM 树：

　　　　　　　　parent()                                  //返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

　　　　　　　　parents()                                //返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

　　　　　　　　parentsUntil()                          //返回介于两个给定元素之间的所有祖先元素。中间可包含数个元素

　　

向下遍历 DOM 树：

　　　　　　　　children()                                //返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

　　　　　　　　find()                                     //返回被选元素的后代元素，一路向下直到最后一个后代。

　　

水平遍历DOM树：

siblings() //返回被选元素的所有同胞*元素。 $("h2").siblings("p");

next() //返回被选元素的下一个同胞元素。该方法只返回一个元素。 $("h2").next();

nextAll() //返回被选元素的所有跟随的同胞元素。 $("h2").nextAll();

nextUntil() //返回介于两个给定参数之间的所有跟随的同胞元素。 $("h2").nextUntil("h6");

prev()

prevAll()

prevUntil()

　　

过滤：

　　　　三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

　　　　其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first()     返回被选元素的首个元素                                                 $("div p").first();        选取首个 <div> 元素内部的第一个 <p> 元素

last()      返回被选元素的最后一个元素                                              $("div p").last();         选择最后一个 <div> 元素中的最后一个 <p> 元素

eq()        返回被选元素中带有指定索引号的元素。

				索引号从 0 开始，因此首个元素的索引号是 0 而不是 1                    $("p").eq(1);              选取第二个 <p> 元素（索引号 1）

filter()    允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

											                                    $("p").filter(".intro");   返回带有类名 "intro" 的所有 <p> 元素

not()       返回不匹配标准的所有元素。  							                   $("p").not(".intro");      返回不带有类名 "intro" 的所有 <p> 元素

　　

jQuery 第一阶段 学习使用总结的更多相关文章

  1. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

  2. PHP四个阶段目标以及第一阶段学习内容

    PHP课程体系主要分为四个阶段,第一阶段讲的是网页HTML和数据库MySQL,第一阶段要学会网页制作的基础知识,熟用各种基本标签,对数据库进行操作,各项考核都能够达标,拿出出众的项目展示. 在第二个阶 ...

  3. JavaScript第一阶段学习心得

    开始接触JavaScript是从慕课网开始的,基础篇学完.懵了一逼,可能是自己太蠢.感觉跟没学差不多,属性,方法,对象,什么都不懂.有的方法知道起的是什么效果,但是原理什么的都不知道. 还好,基础篇学 ...

  4. 面向对象(OO)第一阶段学习总结

    前言:对OO本阶段作业情况说明 本阶段一共完成三次作业,第一次主要是在主方法里面进行编程,也就是和之前C差不多,而随着学习的深入,慢慢了解到面向对象与面向过程的区别.作业的难度也在慢慢增大,后两次都用 ...

  5. Javascript 第一阶段 学习使用总结

    JavaScript 是一种轻量级的编程语言.JavaScript 是可插入 HTML 页面的编程代码.脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中 ...

  6. html 第一阶段 学习使用总结

    基本使用内容: <html> <head> <title>Title of the document</title> <link rel=&quo ...

  7. ACM第一阶段学习内容

    一.知识目录 字符串处理 ................................................................. 3 1.KMP 算法 .......... ...

  8. 自我总结（六）---(学习j2ee+j2ee第一阶段项目)

    自我完善的过程就是在不断的自我总结不断的改进. 学习了Struts2 Spring Hibernate. 十天前结束了这个课程.也考试了.这次考试老师说机试考的还不错.其实就是一个简单的用户登录,进行 ...

  9. 坚持：学习Java后台的第一阶段，我学习了那些知识

    最近的计划是业余时间学习Java后台方面的知识,发现学习的过程中,要学的东西真多啊,让我一下子感觉很遥远.但是还好我制定了计划,自己选择的路,跪着也要走完!关于计划是<终于,我还是下决心学Jav ...

随机推荐

  1. PHP json的插入和解析在数据库中的操作

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. PHP中往数据库中存储json数据在项目开发中也经常遇到,下面我就 ...

  2. hdu 4631（最近点对，容器）

    点击打开链接 题意: 给你一个平面,每次加入一个点,当点数>=2时,求最近点对距离的平方,最后输出所有的平方和. 给你a,b,c x[0]=0;x[i]=(x[i-1]*a+b)%c 如果按照平 ...

  3. winform 剔除空格与换行显示

    string strTeachingPlan = this.txtTeachingPlan.Text.ToString().Trim();  string[] maarr = strTeachingP ...

  4. python中read、readline和readlines的区别

    read        读取整个文件 readline    读取下一行 readlines   读取整个文件到一个迭代器以供我们遍历(读取到一个list中,以供使用,比较方便). 123.txt内容 ...

  5. Scut：Redis 资源管理器

    核心文件是:RedisConnectionPool.cs 对象池类的通用泛型封装:ObjectPoolWithExpire<T> 1. 主要变量 private static ICache ...

  6. asp.net(C#)禁止缓存文件

    IIS会按文件地址及参数将文件缓存到客户端,以便再次访问该内容时速度更快.如果要取消这种机制则需要禁止缓存文件. 一.编程方式 Response.Buffer = true; Response.Exp ...

  7. h.264 率失真优化

    Rate Distortion Optimization 搜索时,一个不可避免的问题就是如何对mv进行比较,从而得到最优 对于同一压缩算法来说,码率越高表示图像质量越好.失真越小,但是码率越高要求更大 ...

  8. QWaitCondition（和Java的Notify机制非常相像）

    QT通过三种形式提供了对线程的支持.它们分别是,一.平台无关的线程类,二.线程安全的事件投递,三.跨线程的信号-槽连接.这使得开发轻巧的多线程Qt程序更为容易,并能充分利用多处理器机器的优势.多线程编 ...

  9. magento 修改 paypal order product name

    app/code/core/Mage/Sales/Model/Quote  Item.php public function setProduct($product) { if ($this-> ...

  10. MFC自定义消息

    本文地址:http://blog.163.com/strive_only/blog/static/893801682010101911467765/ 消息机制是windows的典型运行机制,在MFC中 ...