jQuery第二讲
过滤元素
- filter():过滤元素
- hasClass():检查有没有指定的类
- is():检查有没有指定的选择器
在元素集合中查找
- find():在子元素中查找
- children():匹配子元素集合
- next():查找下一个元素
- nextAll():后面所有元素
- prev():前面的元素
- prevAll():前面所有元素
- siblings():所有同辈元素
- parent():元素的父节点
- 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操作
在元素的内部添加内容
-
在内部的后面添加内容
- A. append(B):将B添加到A里面的后面
- A. appendTo(B):将A添加到B里面的后面
-
在内部的前面添加内容
- A.prepend(B):在A的内部的前面添加B的内容
- A.prependTo(B):将A添加到B的内部的前面
在元素的外部添加内容
-
在元素外部的后面
- A.after(B):将B插入到A外部的后面
- A.insertAfter(B):将A插入到B的外部的后面
-
在元素外部的前面
- A.before(B):将B插入到A的外部的前面
- 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元素
- replaceAll(选择器)
- 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元素
- empty():清空节点中的内容
- remove():删除节点
克隆DOM元素
- clone():只复制对象节点
- clone(true):复制对象节点及对应的事件
获取对象的长度和对象的索引
获取长度的方法
- length
- size()
获取元素的索引
index():索引号从0开始
DOM对象和jQuery对象互换
如果要用jQuery的方法就必须要转成jQuery对象
如果要用JS方法必须转成DOM对象
实现转换:
- 将DOM对象转成JQuery对象:通过$()或jQuery()
- 将JQuery对象转成DOM对象:通过get()或数组的方式
缓存数据
- data(name):获取缓存数据
- data(name,value):缓存数据
几个常用的方法
1、$.merge()
2、$.trim()
- 能够解释dom对象和jQuery对象的区别
- 能够将dom对象和jQuery对象相互转换
- 能够将内容插入到元素内部或外部
- 能够清空元素内容或删除元素本身
- 能够使用replaceWith()替换元素
- 能够复制指定元素
- 能够把内容从外面包裹上新元素
- 能够使用元素查找或匹配的多个方法
- 能够使用bind()方法绑定事件
- 能够熟练使用jQuery的常规事件绑定语法
- 能够使用事件切换方法hover(),toggle()
- 能够使用jQuery的基本特效方法 show(),hide(),toggle()
- 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
- 能够使用jQuery的淡入淡出特效方法
- 能够理解jQuery中插件的作用
- 能够制作自定义插件
- 能够使用jQuery实现ajax的get请求
- 能够使用jQuery实现ajax的post请求