一些关于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> ]