- 浏览: 139861 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
ling凌yue月:
Yes,it's good!
JavaScript实现ReplaceAll 方法 -
lj1214388:
请问楼主,我导入了struts-jquery-plugin 的 ...
Jquery Ui 日期控件
基本过滤选择器
$(document).ready(function(){
//选择第一个div元素.
$('#btn1').click(function(){
$('div:first').css("background","#bfa");
})
//选择最后一个div元素.
$('#btn2').click(function(){
$('div:last').css("background","#bfa");
})
//选择class不为one的 所有div元素.
$('#btn3').click(function(){
$('div:not(.one)').css("background","#bfa");
})
//选择 索引值为偶数 的div元素。
$('#btn4').click(function(){
$('div:even').css("background","#bfa");
})
//选择 索引值为奇数 的div元素。
$('#btn5').click(function(){
$('div:odd').css("background","#bfa");
})
//选择 索引等于 3 的元素
$('#btn6').click(function(){
$('div:eq(3)').css("background","#bfa");
})
//选择 索引大于 3 的元素
$('#btn7').click(function(){
$('div:gt(3)').css("background","#bfa");
})
//选择 索引小于 3 的元素
$('#btn8').click(function(){
$('div:lt(3)').css("background","#bfa");
})
//选择 所有的标题元素.比如h1, h2, h3等等...
$('#btn9').click(function(){
$(':header').css("background","#bfa");
})
//选择 当前正在执行动画的所有元素.
$('#btn10').click(function(){
$(':animated').css("background","#bfa");
});
});
内容过滤器
$(document).ready(function(){
//选取含有文本"di"的div元素.
$('#btn1').click(function(){
$('div:contains(di)').css("background","#bbffaa");
})
//选取不包含子元素(或者文本元素)的div空元素.
$('#btn2').click(function(){
$('div:empty').css("background","#bbffaa");
})
//选取含有class为mini元素 的div元素.
$('#btn3').click(function(){
$('div:has(.mini)').css("background","#bbffaa");
})
//选取含有子元素(或者文本元素)的div元素.
$('#btn4').click(function(){
$('div:parent').css("background","#bbffaa");
})
});
可见元素过滤器
$(document).ready(function(){
$('#reset').click(function(){
window.location.reload();
})
//给id为mover的元素添加动画.
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
//选取所有不可见的元素.包括<input type="hidden"/>.
$('#btn_hidden').click(function(){
alert( "不可见的元素有:"+$('body :hidden').length +"个!\n"+
"其中不可见的div元素有:"+$('div:hidden').length+"个!\n"+
"其中文本隐藏域有:"+$('input:hidden').length+"个!");
$('div:hidden').show(3000).css("background","#bbffaa");
})
//选取所有可见的元素.
$('#btn_visible').click(function(){
$('div:visible').css("background","#FF6500");
})
});
hidden有三种形式
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
子元素过滤器
$(document).ready(function(){
//选取每个父元素下的第2个子元素
$('#btn1').click(function(){
$('div.one :nth-child(2)').css("background","#bbffaa");
})
//选取每个父元素下的第一个子元素
$('#btn2').click(function(){
$('div.one :first-child').css("background","#bbffaa");
})
//选取每个父元素下的最后一个子元素
$('#btn3').click(function(){
$('div.one :last-child').css("background","#bbffaa");
})
//如果父元素下的仅仅只有一个子元素,那么选中这个子元素
$('#btn4').click(function(){
$('div.onenly-child').css("background","#bbffaa");
})
});
表单对象属性过滤选择器
$(document).ready(function(){
//重置表单元素
$(":reset").click(function(){
setTimeout(function() {
countChecked();
$("select").change();
},0);
});
//对表单内 可用input 赋值操作.
$('#btn1').click(function(){
$("#form1 input:enabled").val("这里变化了!");
return false;
})
//对表单内 不可用input 赋值操作.
$('#btn2').click(function(){
$("#form1 input:disabled").val("这里变化了!");
return false;
})
//使用:checked选择器,来操作多选框.
$(":checkbox").click(countChecked);
function countChecked() {
var n = $("input:checked").length;
$("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
}
countChecked();//进入页面就调用.
//使用:selected选择器,来操作下拉列表.
$("select").change(function () {
var str = "";
$("select :selected").each(function () {
str += $(this).text() + ",";
});
$("div").eq(1).html("<strong>你选中的是:"+str+"</strong>");
}).trigger('change');
// trigger('change') 在这里的意思是:
// select加载后,马上执行onchange.
// 也可以用.change()代替.
});
表单选择器
$(document).ready(function(){
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div").append(" 有" + $alltext.length + " 个( :text 元素)<br/>")
.append(" 有" + $allpassword.length + " 个( :password 元素)<br/>")
.append(" 有" + $allradio.length + " 个( :radio 元素)<br/>")
.append(" 有" + $allcheckbox.length + " 个( :checkbox 元素)<br/>")
.append(" 有" + $allsubmit.length + " 个( :submit 元素)<br/>")
.append(" 有" + $allimage.length + " 个( :image 元素)<br/>")
.append(" 有" + $allreset.length + " 个( :reset 元素)<br/>")
.append(" 有" + $allbutton.length + " 个( :button 元素)<br/>")
.append(" 有" + $allfile.length + " 个( :file 元素)<br/>")
.append(" 有" + $allhidden.length + " 个( :hidden 元素)<br/>")
.append(" 有" + $allselect.length + " 个( select 元素)<br/>")
.append(" 有" + $alltextarea.length + " 个( textarea 元素)<br/>")
.append(" 表单有 " + $inputs.length + " 个(input)元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")
$("form").submit(function () { return false; }); // return false;不能提交.
$(document).ready(function(){
//选择第一个div元素.
$('#btn1').click(function(){
$('div:first').css("background","#bfa");
})
//选择最后一个div元素.
$('#btn2').click(function(){
$('div:last').css("background","#bfa");
})
//选择class不为one的 所有div元素.
$('#btn3').click(function(){
$('div:not(.one)').css("background","#bfa");
})
//选择 索引值为偶数 的div元素。
$('#btn4').click(function(){
$('div:even').css("background","#bfa");
})
//选择 索引值为奇数 的div元素。
$('#btn5').click(function(){
$('div:odd').css("background","#bfa");
})
//选择 索引等于 3 的元素
$('#btn6').click(function(){
$('div:eq(3)').css("background","#bfa");
})
//选择 索引大于 3 的元素
$('#btn7').click(function(){
$('div:gt(3)').css("background","#bfa");
})
//选择 索引小于 3 的元素
$('#btn8').click(function(){
$('div:lt(3)').css("background","#bfa");
})
//选择 所有的标题元素.比如h1, h2, h3等等...
$('#btn9').click(function(){
$(':header').css("background","#bfa");
})
//选择 当前正在执行动画的所有元素.
$('#btn10').click(function(){
$(':animated').css("background","#bfa");
});
});
内容过滤器
$(document).ready(function(){
//选取含有文本"di"的div元素.
$('#btn1').click(function(){
$('div:contains(di)').css("background","#bbffaa");
})
//选取不包含子元素(或者文本元素)的div空元素.
$('#btn2').click(function(){
$('div:empty').css("background","#bbffaa");
})
//选取含有class为mini元素 的div元素.
$('#btn3').click(function(){
$('div:has(.mini)').css("background","#bbffaa");
})
//选取含有子元素(或者文本元素)的div元素.
$('#btn4').click(function(){
$('div:parent').css("background","#bbffaa");
})
});
可见元素过滤器
$(document).ready(function(){
$('#reset').click(function(){
window.location.reload();
})
//给id为mover的元素添加动画.
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
//选取所有不可见的元素.包括<input type="hidden"/>.
$('#btn_hidden').click(function(){
alert( "不可见的元素有:"+$('body :hidden').length +"个!\n"+
"其中不可见的div元素有:"+$('div:hidden').length+"个!\n"+
"其中文本隐藏域有:"+$('input:hidden').length+"个!");
$('div:hidden').show(3000).css("background","#bbffaa");
})
//选取所有可见的元素.
$('#btn_visible').click(function(){
$('div:visible').css("background","#FF6500");
})
});
hidden有三种形式
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
子元素过滤器
$(document).ready(function(){
//选取每个父元素下的第2个子元素
$('#btn1').click(function(){
$('div.one :nth-child(2)').css("background","#bbffaa");
})
//选取每个父元素下的第一个子元素
$('#btn2').click(function(){
$('div.one :first-child').css("background","#bbffaa");
})
//选取每个父元素下的最后一个子元素
$('#btn3').click(function(){
$('div.one :last-child').css("background","#bbffaa");
})
//如果父元素下的仅仅只有一个子元素,那么选中这个子元素
$('#btn4').click(function(){
$('div.onenly-child').css("background","#bbffaa");
})
});
表单对象属性过滤选择器
$(document).ready(function(){
//重置表单元素
$(":reset").click(function(){
setTimeout(function() {
countChecked();
$("select").change();
},0);
});
//对表单内 可用input 赋值操作.
$('#btn1').click(function(){
$("#form1 input:enabled").val("这里变化了!");
return false;
})
//对表单内 不可用input 赋值操作.
$('#btn2').click(function(){
$("#form1 input:disabled").val("这里变化了!");
return false;
})
//使用:checked选择器,来操作多选框.
$(":checkbox").click(countChecked);
function countChecked() {
var n = $("input:checked").length;
$("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
}
countChecked();//进入页面就调用.
//使用:selected选择器,来操作下拉列表.
$("select").change(function () {
var str = "";
$("select :selected").each(function () {
str += $(this).text() + ",";
});
$("div").eq(1).html("<strong>你选中的是:"+str+"</strong>");
}).trigger('change');
// trigger('change') 在这里的意思是:
// select加载后,马上执行onchange.
// 也可以用.change()代替.
});
表单选择器
$(document).ready(function(){
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div").append(" 有" + $alltext.length + " 个( :text 元素)<br/>")
.append(" 有" + $allpassword.length + " 个( :password 元素)<br/>")
.append(" 有" + $allradio.length + " 个( :radio 元素)<br/>")
.append(" 有" + $allcheckbox.length + " 个( :checkbox 元素)<br/>")
.append(" 有" + $allsubmit.length + " 个( :submit 元素)<br/>")
.append(" 有" + $allimage.length + " 个( :image 元素)<br/>")
.append(" 有" + $allreset.length + " 个( :reset 元素)<br/>")
.append(" 有" + $allbutton.length + " 个( :button 元素)<br/>")
.append(" 有" + $allfile.length + " 个( :file 元素)<br/>")
.append(" 有" + $allhidden.length + " 个( :hidden 元素)<br/>")
.append(" 有" + $allselect.length + " 个( select 元素)<br/>")
.append(" 有" + $alltextarea.length + " 个( textarea 元素)<br/>")
.append(" 表单有 " + $inputs.length + " 个(input)元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")
$("form").submit(function () { return false; }); // return false;不能提交.
发表评论
-
鼠标放上去图片变大
2011-10-14 00:46 1234<!DOCTYPE html><html l ... -
Jquery UI sortable.html
2011-10-14 00:38 999<!DOCTYPE html><html l ... -
Jquery Ui 日期控件
2011-10-14 00:28 4109<!DOCTYPE html><html l ... -
Jquery Ui 自动完成
2011-10-13 23:40 1096<!DOCTYPE html><html l ... -
Jquery UI 封装 Alert框
2011-10-13 23:36 1129<!DOCTYPE html><html l ... -
Jquery 动态发送Ajax请求,接受Jason格式的数据
2011-09-28 15:31 2636Jason数据格式: [{"title" ... -
JQuery 生成标签效果
2010-09-22 09:26 1104ul,li{ margin: 0; padding: 0; ... -
JQuery 选择、过滤器
2010-09-18 20:24 774$(”#myELement”) —— 选择id值等于myEle ... -
JavaScript Tab
2010-09-17 12:19 47<style type="text/css ... -
事件模仿
2010-09-15 23:01 718$(function(){ $('#old').bi ... -
获得事件、对象、属性
2010-09-15 22:52 801<a href='http://google.com'& ... -
点击展开,点击关闭 鼠标滑过
2010-09-15 21:20 1369HTML 代码如下; <body> <div ... -
节点操作 (三)
2010-09-14 23:13 974遍历节点树 $(function(){ var ... -
节点操作(一) 节点的添加、删除、修改、查询
2010-09-14 22:20 944查找节点 $(function(){ var $ ...
相关推荐
按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤、属性过滤、内容过滤、子元素过滤、表单对象属性过滤、可见性过滤等。今天我们主要学习一下其中的“基本过滤选择器”。 一、:first 选
本文实例讲述了jQuery内容过滤选择器与子元素过滤选择器用法。分享给大家供大家参考,具体如下: jQuery的内容过滤选择器 一、:contains(text) 选择器::contains(text) 描述:匹配包含给定文本的元素 返回值:元素...
简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:...
JQ 选择器大全包含:基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
NULL 博文链接:https://onestopweb.iteye.com/blog/2290078
本文实例讲述了jQuery表单元素过滤选择器用法。分享给大家供大家参考,具体如下: 前面jQuery内容过滤选择器与子元素过滤选择器,其中的例子稍微多一些解释也有点绕口,希望能帮助大家理解。今天学习表单元素过滤...
根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单...
主要介绍了jQuery中的子元素过滤选择器,列举了一些操作DOM时获取父元素的一些方法,需要的朋友可以参考下
主要介绍了jQuery子元素过滤选择器用法,结合实例形式分析了jQuery中nth-child、first-child、last-child、only-child等进行子元素过滤操作的相关技巧,需要的朋友可以参考下
其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择...
它由元素Id、Class、元素名、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择...
两个综合案例(图片切割,在线聊天室),118个示例(JavaScript隔行变色,jQuery选择器隔行变色,JavaScript输出文字信息,jQuery输出文字信息,基本选择器选择元素,层次选择器选择元素,基本过滤选择器选择元素,...
按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器. 基本过滤选择器 基本过滤选择器示例 改变第一个 div元素的背景色为 # bbffaa 改变最后一个 div...
jquery子元素过滤选择器在某些特殊的情况下还是比较实用的,下面为大家介绍下具体的使用方法,感兴趣的各位可以参考下哈
#id') id选择器 2) $('.class') css选择器,class类名 3) $('element') 标签选择器,例如p,h1,div ... 5) $('sele1,sele2') 用‘,'逗号隔开可以...10) $('div:first') 过滤选择器,:first用:与父级元
主要为大家详细介绍了jQuery选择器之子元素过滤选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下