jQuery简介
一、jQuery概述
1、jQuery是一个优秀的JavaScript框架,主要提供如下功能:
(1)访问页面框架的局部
(2)修改页面的表现
(3)更改页面的内容
(4)响应事件
(5)为页面添加动画
(6)与服务器异步交互
(7)简化常用的JavaScript操作
2、下载并使用jQuery
(1)(jquery/)
(2)不需要任何安装过程
<script src="js/jquery- 1.7.2.js" type="text/javascript"></script>
二、jQuery选择器
选择器包括:基本选择器、子选择器、特征选择器、位置选择器
1、基本选择器
$(‘a’); //这个选择器匹配所有超链接元素
$(‘#specialID’); //这个选择器匹配id为specialID的元素
$(‘.specialClass’); //这个选择器匹配拥有CSS类specialClass的元素
$(‘a#specialID.specialClass ’); //匹配id为specialID、拥有CSS类specialClass的超链接元素
$(‘p a.specialClass’); //这个选择器匹配拥有CSS类specialClass、在<p>元素中声明的超链接元素。
2、子选择器
有时我们只想选择某元素的子节点。
例如,现在有这样一段HTML代码:
<ul><a href=”#”>link1</a><li><a href=”#”>link2</a></li></ul>
我们想要选择<ul>标记下的“link1”超链接。利用基本CSS选择器,我们尝试选择器:$(‘ul a’);
不幸的是,“link1”与“link2”超链接都会被选中,因为“link2”也是<ul>的后代节点。
更高级的解决办法是利用“子选择器”,父节点与直接子节以“>”符号隔开,如下所示:
$(‘ul > a’); 这个选择器只匹配<ul>标记下的“link1”超链接。
3、特征选择器
如果我们写了这么一段HTML代码:
<a href=’index.jsp’>返回首页</a>
<a href=’www.sina’>新浪</a>
<a href=’www.163’>网易</a>
假设我们指向绑定特殊行为到执行本网站之外的地址链接,在href属性中以“”开头的超链接我们便可以认为是外部链接。利用特征选择器,我们可以这么写: $('a[href^=]');
特征选择器还可以这么写:
$('a[href$=]'); //匹配所有以“”作为href属性结尾的超链接。
$(‘a[href*=sina]’); //匹配所有href属性包含“sina”字符串的超链接
$(‘form[method]’);//获取所有包含method属性的表单
$(‘input[type=text]’);//获取所有文本框
4、位置选择器
有时候必须根据元素在页面上的位置或者其他元素的关系去选择元素。也许你想要选择页面上的第一个链接、奇数或偶数的段落,或者每个列表的最后一项。jQuery支持实现这个具体选择的机制。
$('a:first');
$('p:odd'); //代表选择器匹配所有序数为奇数的段落元素
$('p:even'); //代表选择器匹配所有序数为偶数的段落元素
$('li:last-child'); //选择li父节点的最后一个子元素
位置选择器语法表
选择器 | 描述 |
:first | 匹配指定的第一个元素 |
:last | 匹配指定的最后一个元素 |
:first-child | 匹配指定元素的父元素的第一子元素 |
:last-child | 匹配指定元素的父元素的最后一个子元素 |
:only-child | 返回没有兄弟节点的所有元素 |
:nth-child(n) | 第n个子节点(n从1开始)。li:nth-child(2)返回每个列表的第二个<li>元素 |
:nth-child(even|odd) | 奇数或偶数的子节点。li:nth-child(even)返回每个序列的偶数子结点 |
:nth-child(Xn+Y) | 根据传入的公式计算第n个子节点。如果Y为0,则忽略Y,n从0开始,且X不等于0。li:nth-child(3n)返回位置在3的整数倍数的元素,而li:nth-child(5n+1)返回5的倍数的元素的下一项 |
:even或 :odd | 页面范围内偶数或奇数的匹配元素。li:even返回全部偶数<li>项 |
:eq(n) | 第n个匹配元素(n从0开始) |
:gt(n) | 匹配从第n(不包括n)个元素之后的所有元素 |
:lt(n) | 匹配从第n(不包括n)个元素之前的所有元素 |
三、利用元素关系获取元素集合
jQuery提供了一系列方法允许根据元素集合中某元素与其他元素的层次关系获取新的元素集合
方法 | 描述 |
children() | 返回指定包装集每个元素的所有子节点的包装集。 |
content() | 查匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查文档内容。 |
next() | 返回包装集中每个元素紧邻的后面的同辈元素的包装集。 |
nextAll() | 返回当前元素之后所有的同辈元素。 |
parent() | 取得一个包含着所有匹配元素的唯一父元素的包装集。 |
parents() | 取得一个包含着所有匹配元素的祖先元素的包装集(不包含根元素)。 |
prev() | 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的包装集。 |
prevAll() | 查当前元素之前所有的同辈元素。 |
siblings() | 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。 |
Jquery表单验证
方法一:
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
function check(){
var name=$("#f1").val();
var password=$("#f2").val();
var rpassword=$("#f3").val();
var email=$("#f4").val();
if(name.length==0){
alert("用户名不能为空!!!");
return false;
}
if(password.length==0){
alert("密码不能为空!!!");
jquery是什么选择器 return false;
}
if(rpassword != password){
alert("密码不一致!!!");
return false;
}
if(email.length==0){
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论