jQuery第二讲

过滤元素

1. filter()：过滤元素
2. hasClass()：检查有没有指定的类
3. is()：检查有没有指定的选择器

在元素集合中查找

1. find()：在子元素中查找
2. children()：匹配子元素集合
3. next()：查找下一个元素
4. nextAll()：后面所有元素
5. prev()：前面的元素
6. prevAll()：前面所有元素
7. siblings()：所有同辈元素
8. parent()：元素的父节点
9. parents()：元素的父节点的集合

<script type=”text/javascript”>

$(document).ready(function(e) {

$(“:button”).click(function(e) {

//$(‘form’).find(‘:text’).css(‘background-color’,’#930′); //在子元素中查找

/*

$(‘form>fieldset’).children(‘input’).each(function(index, element) { //获取子元素

console.log($(this));

});

*/

//$(‘#firstname’).next().next().css(‘background-color’,’#930′);

//$(‘#firstname’).nextAll().css(‘background-color’,’#930′);

//$(‘#city’).prev().prev().css(‘background-color’,’#930′);

//$(‘#city’).prevAll().css(‘background-color’,’#930′);

//$(‘#lastname’).siblings().css(‘background-color’,’#930′);

//$(‘#lastname’).parent().css(‘background-color’,’#930′);

$(‘#lastname’).parents(‘body’).css(‘background-color’,’#930′);

});

});

</script>

<p>锄禾日当午</p>

<form>

<fieldset>

<legend>在元素中查找</legend>

姓：<input type=”text” id=”firstname” value=”张” /><br />

名：<input type=”text” id=”lastname” value=”三峰” /><br />

城市：<input type=”text” id=”city” value=”上海” /><br>

<input type=”button” value=”点击” id=”btn” />

</fieldset>

</form>

链式操作

把多个操作用“.”连成一行，用来简化操作。

原理：每个方法执行完毕后，将当前对象返回出来。

例题

DOM操作

在元素的内部添加内容

1. 在内部的后面添加内容
   1. A. append(B)：将B添加到A里面的后面
   2. A. appendTo(B)：将A添加到B里面的后面

1. 在内部的前面添加内容
   1. A.prepend(B)：在A的内部的前面添加B的内容
   2. A.prependTo(B)：将A添加到B的内部的前面

在元素的外部添加内容

1. 在元素外部的后面
   1. A.after(B)：将B插入到A外部的后面
   2. A.insertAfter(B)：将A插入到B的外部的后面

1. 在元素外部的前面
   1. A.before(B)：将B插入到A的外部的前面
   2. A.insert Before(B)：将A插入到B的外部的前面

例题（年月日）

效果：选择年和月，自动显示对应的天数

<script type=”text/javascript”>

//添加option标签

function insertOption(end,target){

for(var i=1;i<=end;i++){

$(‘<option>’).html(i).attr(‘value’,i).appendTo($(‘#’+target));

}

}

//添加年

function addYear(){

var yy=<?php echo date(‘Y’)?>;

for(var i=yy;i>=yy-100;i–){

$(‘<option>’).html(i).attr(‘value’,i).appendTo($(‘#year’));

}

}

//添加月

function addMonth(){

insertOption(12,’month’)

}

//添加日

function addDay(){

$(‘#day’).html(”);

var yy=$(‘#year’).val();

var mm=$(‘#month’).val();

if(mm==1||mm==3||mm==5||mm==7||mm==8||mm==10||mm==12){

insertOption(31,’day’);

}else if(mm==2){

if(yy%4==0 && yy%100!=0 || yy%400==0){

insertOption(29,’day’)

}else{

insertOption(28,’day’);

}

}

else

insertOption(30,’day’);

}

$(document).ready(function(e) {

addYear();

addMonth();

addDay();

$(‘#year,#month’).change(function(e) {

addDay();

});

});

</script>

<form id=”form1″ name=”form1″ method=”post” action=””>

<select name=”year” id=”year”></select>年

<select name=”month” id=”month”></select>月

<select name=”day” id=”day”></select>日

</form>

运行结果

例题（模拟126邮箱注册效果）

Sprits技术

将页面用到的许多小图拼到一个大图上，通过CSS来显示不同的区域。可以有效的减少往返次数。

<style type=”text/css”>

/*按钮的样式*/

.btn{

width:119px;

height:37px;

background-image:url(images/glb_v2.png);

background-repeat:no-repeat;

background-position:-146px -362px;

cursor:pointer;

}

/*鼠标移动到按钮上*/

.btn:hover{

background-position:-289px -362px;

}

</style>

用户名：<input type=”text” /><br />

<input type=”button” value=”返回” class=”btn” />

<input type=”button” value=”提交” class=”btn” />

运行结果

模仿126邮箱注册

<style type=”text/css”>

*{

margin:0px;

padding:0px;

font-size:14px;

font-family:’微软雅黑’;

}

dt,dd{

float:left;

}

.txt{

width:300px;

height:17px;

border:#7B7B7B solid 1xp;

}

.bg>span,.span{

width:14px;

height:14px;

display:inline-block;

background:url(images/glb_v2.png) no-repeat -36px -288px;

}

.bg{

color:#C00;

display:none;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//设置样式

$(‘#pwd’).blur(function(e) {

var pwd=$(this).val();

if(!(pwd.length>=6 && pwd.length<=16)){

//方法一：

/*

$(‘dd>div:first’).hide(); //隐藏

$(‘dd>div:last’).show(); //显示

*/

//方法二

var span=$(‘<span>’).addClass(‘span’);

$(‘dd>div:first’).html(‘密码长度是6~16个字符’).prepend(span)

}

});

});

</script>

</head>

<body>

<form>

<dl>

<dt>密码：</dt>

<dd>

<input type=”password” id=”pwd” class=”txt” />

<div>6~16个字符，区分大小写</div>

<!–<div class=”bg”><span></span>密码长度是6~16个字符</div> –>

</dd>

</dl>

</form>

替换DOM元素

1. replaceAll(选择器)
2. replaceWith(内容)

例题

<style type=”text/css”>

.light{

color:#F00;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#key’).blur(function(e) {

if($(this).val()==”)

return;

//清空样式

$(‘.light’).each(function(index, element) {

$(this).replaceWith($(this).text()); //通过自己的文本替换自己节点

});

//添加样式

var reg=new RegExp($(this).val(),’g’); //实例化正则表达式而

var str=$(‘#content’).html().replace(reg,'<span class=”light”>’+$(this).val()+'</span>’); //内容替换

$(‘#content’).html(str);

});

});

</script>

</head>

<body>

<input type=”text” id=”key” />

<div id=”content”>

<h3>月饼机_月饼机价格月饼机老品牌值得信赖</h3>

杭州旭众新型小型月饼机厂家 出面出馅更加稳定,小型月饼机厂家 一机多用,价格实惠!老品牌小型月饼机厂家 值得信赖.更有服务到家,全国联保.购机无忧!小型月饼机厂家

</div>

运行结果

删除DOM元素

1. empty()：清空节点中的内容
2. remove()：删除节点

克隆DOM元素

1. clone()：只复制对象节点
2. clone(true)：复制对象节点及对应的事件

获取对象的长度和对象的索引

获取长度的方法

1. length
2. size()

获取元素的索引

index()：索引号从0开始

DOM对象和jQuery对象互换

如果要用jQuery的方法就必须要转成jQuery对象

如果要用JS方法必须转成DOM对象

实现转换：

1. 将DOM对象转成JQuery对象：通过$()或jQuery()
2. 将JQuery对象转成DOM对象：通过get()或数组的方式

缓存数据

1. data(name)：获取缓存数据
2. data(name,value)：缓存数据

几个常用的方法

1、$.merge()

2、$.trim()

1. 能够解释dom对象和jQuery对象的区别
2. 能够将dom对象和jQuery对象相互转换
3. 能够将内容插入到元素内部或外部
4. 能够清空元素内容或删除元素本身
5. 能够使用replaceWith()替换元素
6. 能够复制指定元素
7. 能够把内容从外面包裹上新元素
8. 能够使用元素查找或匹配的多个方法
9. 能够使用bind()方法绑定事件
10. 能够熟练使用jQuery的常规事件绑定语法
11. 能够使用事件切换方法hover(),toggle()
12. 能够使用jQuery的基本特效方法 show(),hide(),toggle()
13. 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
14. 能够使用jQuery的淡入淡出特效方法
15. 能够理解jQuery中插件的作用
16. 能够制作自定义插件
17. 能够使用jQuery实现ajax的get请求
18. 能够使用jQuery实现ajax的post请求