一些关于jQuery的使用方法

标签：

　　在web前端这个职业当中，面对html,css,javascript已经再熟悉不过了，html是对网页文档的编写，css是对网页样式的编写，javascript是对网页里面的元素的节点或图片进行行为的操作。在面对html和css的时候我们都认为还比较简单，但是在面对javascript的时候，对于我们这些菜鸟来说可能就有点欲哭无泪了。因为javascript里面还包含了很多高级的部分，所以对于我们来说还需要很长一段时间才能掌握这个要领。因此，jQuery的使用就让我们在面对这些问题的时候能够很简单的去处理这些问题。下面我就来简单的介绍一下jQuery的一些知识。

　　在讲jQuery的时候，我们还是先对jQuery做一些基本知识的了解。jQuery是一个javascript函数库，它极大的简化了javascript编程，为我们提供了很大的方便。jQuery库可以通过一行简单的标记被添加到网页当中。jQuery的库包含了很多的特性，其中包括：1.html元素的选取。2.html元素的操作。3.css的操作。4.html的事件函数。5.javascript的特效和动画。6.html DOM的遍历和修改。7.Ajax和Utilities.

　　jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。jQuery语法是为html元素的选取编制，可以对元素执行某些操作。jQuery的基本语法：$(selector).action()。1.使用$符号定义jQuery.2.选择符（select）“查询”和“查找”html元素。3.jQuery  action()执行对元素的操作。

例如：

         $(this).hide()-隐藏当前元素

         $("p").hide()-隐藏所有段落

         $("p.test").hide()-隐藏所有class="test"的段落

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

　　当然，在执行这些函数的时候，都需要在document ready函数中执行，这是为了防止文档在完全加在完成之前运行jQuery代码。

　　jQuery的选择器：

      　　jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。在 HTML DOM 术语中：选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

　　　　　　（1）jQuery的元素选择器：

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

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

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

　　　　　　　　　　$("p#demo") 选取 id="demo" 的第一个 <p> 元素。      

     　　　　（2）jQuery 属性选择器：

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

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

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

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

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

          　　（3）jQuery CSS 选择器：

　　　　　　　　　jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

　　　　　　例如：

　　　　除了以上这些选择器的用法的介绍以外，还有以下的一些介绍，希望对大家有所帮助和理解，对于这些基本的jQuery，我没问你要好好的掌握。

　　　　下面我将介绍一些关于我们将常用到的选择器的介绍和使用的方法：

1. 1. Parent的用法的介绍：

　　　　　　　　其表示的意义是：匹配含有子元素或者文本的元素。

　　　　　　示例

　　　　　　描述:

　　　　　　　　查找所有含有子元素或者文本的 td 元素

　　　　　　HTML 代码:

　　　　　　　　<table>

  　　　　　　　　　　<tr><td>Value 1</td><td></td></tr>

  　　　　　　　　　　<tr><td>Value 2</td><td></td></tr>

　　　　　　　　</table>

　　　　　　jQuery 代码:

　　　　　　　　$("td:parent")

　　　　　　结果:

　　　　　　　　[ <td>Value 1</td>, <td>Value 2</td> ]

　　　　2.parent>child的用法的介绍：

　　　　　　其表示的意义是：在给定的父元素下匹配所有的子元素。

　　　　　　示例

　　　　　　描述:

　　　　　　　　匹配表单中所有的子级input元素。

　　　　　　HTML 代码:

　　　　　　　　<form>

  　　　　　　　　　　<label>Name:</label>

  　　　　　　　　　　<input name="name" />

  　　　　　　　　<fieldset>

     　　　　　　　　 <label>Newsletter:</label>

      　　　　　　　　<input name="newsletter" />

 　　　　　　　　</fieldset>

　　　　　　</form>

　　　　　　<input name="none" />

　　　　　jQuery 代码:

　　　　　　$("form > input")

　　　　　结果:

　　　　　　　[ <input name="name" /> ]

　　　3.first的用法的介绍：

　　　　　其表示的意义是：获取第一个元素。

　　　　　　示例

　　　　　　描述:

        　　　　 获取匹配的第一个元素

　　　　　　HTML 代码:

         　　　　<ul>

            　　　　 <li>list item 1</li>

             　　　　<li>list item 2</li>

             　　　　<li>list item 3</li>

           　　　　　<li>list item 4</li>

          　　　　　 <li>list item 5</li>

         　　　</ul>

　　　　　jQuery 代码:

         　　　　$(‘li:first‘);

　　　　　结果:

                 　 [ <li>list item 1</li> ]

　　　4.last的用法的介绍：

　　　　　　其表示的意义是：获取最后个元素

　　　　　　示例

　　　　　　描述:

　　　　　　　　获取匹配的最后个元素。

　　　　　　HTML 代码:

　　　　　　　　<ul>

    　　　　　　　　<li>list item 1</li>

    　　　　　　　　<li>list item 2</li>

    　　　　　　　　<li>list item 3</li>

    　　　　　　　　<li>list item 4</li>

    　　　　　　　　<li>list item 5</li>

　　　　　　　　</ul>

　　　　　　jQuery 代码:

　　　　　　　　$(‘li:last‘)

　　　　　　结果:

　　　　　　　　[ <li>list item 5</li>]

　　　　5.even的用法的介绍：

　　　　　　其表示的意义是：匹配所有索引值为偶数的元素，从 0 开始计数。（你也可以认为是所有的单数行，例如：1.3.5…..因为它们的索引值是等于偶数的，从0开始，可能对于你们不是很好理解，就可以记成寻找单数行。）

　　　　　　示例

　　　　　　描述:

　　　　　　　　查找表格的1、3、5...行（即索引值0、2、4...）

　　　　　　HTML 代码:

　　　　　　　　<table>

  　　　　　　　　　　<tr><td>Header 1</td></tr>

  　　　　　　　　　　<tr><td>Value 1</td></tr>

  　　　　　　　　　　<tr><td>Value 2</td></tr>

　　　　　　　　</table>

　　　　　　jQuery 代码:

　　　　　　　　$("tr:even")

　　　　　　结果:

　　　　　　　　[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

　　　　6.odd的用法的介绍：

　　　　　　其表示的意义是：匹配所有索引值为奇数的元素，从 0 开始计数。（你也可以认为是所有的偶数行，例如：0.2.4…..因为它们的索引值是等于奇数的，从1开始，可能对于你们不是很好理解，就可以记成寻找偶数行。）

　　　　　　示例

　　　　　　描述:

　　　　　　　　查找表格的2、4、6行（即索引值1、3、5...）

　　　　　　HTML 代码:

　　　　　　　　<table>

  　　　　　　　　　　<tr><td>Header 1</td></tr>

  　　　　　　　　　　<tr><td>Value 1</td></tr>

  　　　　　　　　　　<tr><td>Value 2</td></tr>

　　　　　　　　</table>

　　　　　　jQuery 代码:

　　　　　　　　$("tr:odd")

　　　　　　结果:

　　　　　　　　[ <tr><td>Value 1</td></tr> ]

　　　　7.eq 的用法的介绍：

                 其表示的意义是：匹配一个给定索引值的元素。（eq与数组有点类似，eq(0)就表示的是第一个，也就是第一行。）

　　　　　　示例

　　　　　　描述:

　　　　　　　　查找第二行

　　　　　　HTML 代码:

　　　　　　　　<table>

  　　　　　　　　　　<tr><td>Header 1</td></tr>

  　　　　　　　　　　<tr><td>Value 1</td></tr>

  　　　　　　　　　　<tr><td>Value 2</td></tr>

　　　　　　　　</table>

　　　　　　jQuery 代码:

　　　　　　　　$("tr:eq(1)")

　　　　　　结果:

　　　　　　　　[ <tr><td>Value 1</td></tr> ]

　　　　8.gt的用法的介绍：

　　　　　　其表示的意义是：匹配所有大于给定索引值的元素。

　　　　　　示例

　　　　　　描述:

　　　　　　　　查找第二第三行，即索引值是1和2，也就是比0大。(因为索引值是从0开始的，它表示着第一行)

　　　　　　HTML 代码:

　　　　　　　　<table>

  　　　　　　　　　　<tr><td>Header 1</td></tr>

  　　　　　　　　　　<tr><td>Value 1</td></tr>

  　　　　　　　　　　<tr><td>Value 2</td></tr>

　　　　　　　　</table>

　　　　　　jQuery 代码:

　　　　　　　　$("tr:gt(0)")(这里的‘0’表示的方法和数组有点类似，代表着第一个或者第一行，gt是表示大于给定的元素的索引值，所以就是大于第一行的所有)

　　　　　　结果:

　　　　　　　　[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

　　　　9.lt的用法的介绍：

　　　　　　其表示的意义是：匹配所有小于给定索引值的元素。

　　　　　　示例

　　　　　　描述:

　　　　　　　　查找第一第二行，即索引值是0和1，也就是比2小

　　　　　　HTML 代码:

　　　　　　　　<table>

  　　　　　　　　　　<tr><td>Header 1</td></tr>

  　　　　　　　　　　<tr><td>Value 1</td></tr>

  　　　　　　　　　　<tr><td>Value 2</td></tr>

　　　　　　　　</table>

　　　　　　jQuery 代码:

　　　　　　　　$("tr:lt(2)")(这里的‘2’表示的方法和数组有点类似，代表着第三个或者第三行，lt是表示小于给定的元素的索引值，所以就是小于第三行的所有)

　　　　　　结果:

　　　　　　　　[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

　　　　10.empty的用法的介绍：

　　　　　　其表示的意义是：匹配所有不包含子元素或者文本的空元素。

　　　　　　示例

　　　　　　描述:

　　　　　　　　查找所有不包含子元素或者文本的空元素

　　　　　　HTML 代码:

　　　　　　　　<table>

  　　　　　　　　　　<tr><td>Value 1</td><td></td></tr>

 　　　　　　　　　　 <tr><td>Value 2</td><td></td></tr>

　　　　　　　　</table>

　　　　　　jQuery 代码:

　　　　　　　　$("td:empty")

　　　　　　结果:

　　　　　　　　[ <td></td>, <td></td> ]

一些关于jQuery的使用方法

标签：

原文地址：http://www.cnblogs.com/yi-an/p/4544720.html