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

时间： 2024-10-06 09:18:23

一些关于jQuery的使用方法的相关文章

使用jQuery的data方法来为页面中的某个元素存储数据,（获取焦点，清除默认值）

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据: 使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的. 我们可以使用jQuery的data方法来为页面中的某个元素存储数据: html部分: 1 <form id="testform"> 2 <input type="text" class="clear" value="Always cleared&qu

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

Jquery插件使用方法

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

ajax系列之用jQuery的ajax方法向服务器发出get和post请求

打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax. 1,前端的html和javascript代码 页面html 1 <main style="text-align: center; margin: 200px a

jquery中$.ajax方法提交表单

function postdata(){                        //提交数据函数 $.ajax({                                //调用jquery的ajax方法 type: "POST",                       //设置ajax方法提交数据的形式 url: "ok.php",                      //把数据提交到ok.php data: "writer=

Jquery自定义扩展方法（二）--HTML日历控件

一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看看效果图吧 效果图很简单,代码封装在JQuery中,网页端只需要要调用即可: 二.Jquery自定义实体对象 Jquery可以自定义函数function,有没有可以定义实体对象,里面封装方法那?查询了一下资料发现,是可以的,不仅能够封装属性,还可以写自己的方法,调用模板代码如下: $.Calende

2016 系统设计第一期 （档案一）jQuery ajax serialize()方法form提交数据

jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(function () { var UserId = $('#UserId').val(); if (UserId == "") { $.ajax({ type: "POST", url: '/Users/Create/', data: $("#SaveUserFo

jQuery中extend方法

$.extend 用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 参数类型1:只传入一个对象就是对jQuery的工具方法进行扩展. 1 $(function(){ 2 $.extend({ 3 console: function(sMsg){ 4 console.log(sMsg); 5 } 6 }); 7 $.console('jQuery');// jQuery 8 }); 参数类型2:传入多个对象就是对第一个对象进行扩展. 1 $(function(){ 2 var oTarget

Jquery在unload中成功调用Jquery的.ajax方法

因为页面要求,需要在页面跳转的时候做一些数据的保存工作,试了很多次,发现Jquery的unload事件中调用.ajax方法,在FireFox中可以顺利执行,但是在Chromium下却返回了textStatus为error的消息.试验过很多方法,例如在页面离开时弹出确认框,这样虽然返回了error消息,但是数据库显示操作执行完毕.将确认框除去后,数据库依然没有响应. 查阅多方资料后,发现是以为.ajax的异步响应问题,把ajax请求改为同步的,问题解决. 代码如下: 1 $(window).unl

“jquery中each方法和选择器”的学习笔记

<head> <title></title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //alert($("div").text()); //对数组元素使用匿名函数进行逐个处理.