您现在的位置是:首页 > Javascript
当前栏目
JQuery入门(3)
2023-03-14 10:25:36 时间
6.属性过滤选择器
<script type="text/javascript">
$(function(){ //显示所有包含id属性的元素 1
$("div[id]").show(3000);
})
$(function(){ //显示所有属性title的值是"A"的元素 2
$("div[title='A']").show(3000);
})
$(function(){ //显示所有属性title的值不是"A"的元素 3
$("div[title!='A']").show(3000);
})
$(function(){ //显示所有属性title的值是"A"开始的元素 4
$("div[title^='A']").show(3000);
})
$(function(){ //显示所有属性title的值是"C"结束的元素 5
$("div[title$='C']").show(3000);
})
$(function(){ //显示所有属性title的值中含有"B"的元素 6
$("div[title*='B']").show(3000);
})
$(function(){ //显示所有属性title的值中含有"B"且属性id的值是“divAB”的元素 7
$("div[id='divAB'][title*='B']").show(3000);
})
</script>
7.子元素过滤选择器
在页面开发中,总是遇到突出指定某行的需求。如果实现单个表格的显示,用基本过滤选择器:eq(index)就能实现;但如果是大量数据的选择需求可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。
<script type="text/javascript">
$(function(){ //增加每个父元素下的第2个子元素类别 1
$("li:nth-child(2)").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的第1个子元素类别 2
$("li:first-child").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的最后一个子元素类别 3
$("li:last-child").addClass("GetFocus");
})
$(function(){ //增加每个父元素下只有一个子元素类别 4
$("li:only-child").addClass("GetFocus");
})
</script>
8.表单对象属性过滤选择器
表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素,如enabled、disabled、checked、selected属性。
<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
$("#divA").show(3000);
$("#form1 input:enabled").addClass("GetFocus");
})
$(function(){ //增加表单中所有属性为不可用的元素类别 2
$("#divA").show(3000);
$("#form1 input:disabled").addClass("GetFocus");
})
$(function(){ //增加表单中所有被选中的元素类别 3
$("#divB").show(3000);
$("#form1 input:disabled").addClass("GetFocus");
})
$(function(){ //显示表单中所有option的元素内容 4
$("#divC").show(3000);
$("#Span2").html("选中项是:" + $("select option:selected").text());
})
</script>
9.表单选择器
在表单中,为了使用更加方便和高效,在jQuery选择器中引入了表单选择器,通过它可以再页面中快速定位某表单对象。
<script type="text/javascript">
$(function(){ //显示input类型元素的总数量 1
$("#form1 div").html("表单共找出input类型元素" +
$("#form1 :input").length);
$("#form1 div").addClass("div");
})
$(function(){ //显示所有文本框对象 2
$("#form1 :text").show(3000);
})
$(function(){ //显示所有密码框对象 3
$("#form1 :password").show(3000);
})
$(function(){ //显示所有单选按钮对象 4
$("#form1 :radio").show(3000);
$("#form1 #span1").show(3000);
})
$(function(){ //显示所有复选框对象 5
$("#form1 :checkbox").show(3000);
$("#form1 #span2").show(3000);
})
$(function(){ //显示所有提交按钮对象 6
$("#form1 :submit").show(3000);
})
$(function(){ //显示所有图片域对象 7
$("#form1 :image").show(3000);
})
$(function(){ //显示所有重置按钮对象 8
$("#form1 :reset").show(3000);
})
$(function(){ //显示所有按钮对象 9
$("#form1 :button").show(3000);
})
$(function(){ //显示所有文件域对象 10
$("#form1 :file").show(3000);
})
</script>
相关文章
- 【转】C#之读取web上的xml
- 博客园的HTTPS网站JS脚本访问问题
- 向搜索引擎提交网站
- 12、Eclipse 创建 XML 文件
- 2023-01-13:joxit/docker-registry-ui是registry的web界面工具之一。请问部署在k3s中,yaml如何写?
- vue3 函数式组件调试报警 Non-function value encountered for default slot
- 关于 Angular 开发时对主流浏览器支持的话题
- 了不起的回调函数
- 重磅!哈啰 Quark Design 正式开源,新一代跨技术栈前端组件库
- 36场面试,通过了33场...
- v-slot匿名插槽、具名插槽及作用域插槽
- JS数组常用方法大全
- vue-cli3构建H5移动应用(vant+rem)
- JS异步加载的三种方式
- Touch 移动设备上的 手势识别 与 Js事件库
- 「 [学习日记] vue的引入与简单使用 」
- 「 [学习日记] vue拦截原理 」
- 前端leaflet框选下载bing遥感图
- VUE路由设置history模式刷新404处理
- vue页面中使用浏览器自带的前进后退功能