Jquery 通配选择符

今天逛Q群遇到一个网友请教问题:

问题如下,他需要在查找ID为sch开头的元素中分别查找出各自包含sub001的数量,

如:ID:sch002、sch033 DIv元素等等后面的数字是随机的,里面都会包含sub001元素,数量不一;一开始网友是想打算使用for循环来解决,无疑会中招;因为第一循环量大(因为你无法预计sch后的数字有多小位需要设定一个)造成运行损耗内存大,运行速度慢,而且查找到没有元素操作时会报错。

所以我介绍他使用^= Jquery的统配选择符,确实好使好用立马解决他的问题;解决原一后他又提了一个问题,他需要分别获取sch后面那个数字需要怎么做? 其实来到这一步思路都清晰的,直接获取一下是sch开头的元素,然后$(this) attr一下ID属性,再利用js截取一下字符,OK搞掂 !!

下面就是一个小例子:

$(function(){

$("div[id^=‘sch‘]").each(function(){

var schsize = $(this).find(‘#sub001‘).size();

var thisId = $(this).attr(‘class‘);

alert(thisId+"含#d1的数量为"+schsize );

//利用substring截取sch后的数字

alert(thisId.substring(3) )

})

})

<div id="sch002">

<div id="sub001"></div>

<div id="sub001"></div>

<div id="sub001"></div>

<div id="sub002"></div>

</div>

<div id="sch033">

<div id="sub001"></div>

<div id="sub002"></div>

<div id="sub001"></div>

<div id="sub002"></div>

</div>

普及一下:

1.选择器

(1)通配符:

$("input[id^=‘code‘]");//id属性以code开始的所有input标签

$("input[id$=‘code‘]");//id属性以code结束的所有input标签

$("input[id*=‘code‘]");//id属性包含code的所有input标签

(2)根据索引选择

$("tbody tr:even"); //选择索引为偶数的所有tr标签

$("tbody tr:odd"); //选择索引为奇数的所有tr标签

(3)获得jqueryObj下一级节点的input个数

jqueryObj.children("input").length;

(4)获得class为main的标签的子节点下所有<a>标签

$(".main > a");

(5)选择紧邻标签

jqueryObj.next("div");//获取jqueryObj标签的后面紧邻的一个div,nextAll获取所有

2.筛选器

//not

$("#code input:not([id^=‘code‘])");//id为code标签内不包含id以code开始的所有input标签

3.事件

//处理文本框上的键盘操作

jqueryObj.keyup(function(event){

var keyCode = event.which;//获取当前按下键盘的键值,回车键为13

}

4.工具函数

$(‘#someField‘).val($.trim($(‘#someField‘).val()));//消除空格,语法:$.trim(value)

不会到会,只是一个过程!

时间: 2024-11-06 09:35:04

Jquery 通配选择符的相关文章

css之通配选择符

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ font-size: 30px; font-family: "微软雅黑"; color: black; text-

简单入门JavaScript库jQuery:用选择符创建jQuery对象并应用方法

jQuery,顾名思义,也就是JavaScript和查询(Query),是一个辅助JavaScript开发的库. jQuery 能极大地简化 JavaScript 编程. 目录1 jQuery库包含的特性2 jQuery与JS3 获取页面元素4 DOM事件与jQuery方法5 简易操作DOM元素6 处理尺寸7 遍历操作8 过滤操作9 jQuery对JS的增强10 为页面添加动态效果11 jQuery与Ajax12 jQuery工具 通过jQuery,您可以选取(查询,query) HTML元素,

JQuery选择符的理解与应用

JQuery强大的选择符可以让我们获得页面中任何元素进行操作,并且使用简单方便,可读性强.本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始. CSS选择符包括通配选择符.ID选择符.属性选择符.包含选择符.类选择符等,他们的基本格式为: 通配选择符:$("#ID *") 表示该元素下的所有元素. ID选择符:$("#ID") 表示获得指定ID的元素.嫩江县海洋局 属

CSS之选择符、链接、盒子模型、显示隐藏元素

<html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素</title> <style> a:link{ color:red; } a:visited{ color:black; } a:hover{ color:blue; } a:active{ color:green; } </style> </head> <bo

CSS_css选择符

1.通配选择符语法: * { sRules } 说明:通配选择符.选定文档目录树(DOM)中的所有类型的单一对象.假如通配选择符不是单一选择符中的唯一组成,"*"可以省略. 示例: *[lang=fr] { font-size:14px; width:120px; } *.div { text-decoration:none; } 2.类型选择符语法: E { sRules } 说明:类型选择符.以文档语言对象(Element)类型作为选择符. 示例: td { font-size:1

CSS那些事儿-阅读随笔1(CSS简介与选择符)

最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style Sheet(层叠样式表),是一种不需要编译的标记性语言,用于增强控制网页样式并允许将样式信息与网页内容分离.可以使用如何一种文本编辑器对其进行编辑. 2.CSS的作用 a.修饰页面文本.图片等元素,避免使用不必要的HTML元素. b.更有效地控制页面结构.页面布局(DIV+CSS). c.提高开发和维护效率

一天一点css 2 选择符语法

css用于控制元素样式,css语法为 选择符{属性:值}方式进行设置 1 类型选择符 就是将标签作为选择符,如body div h1 span等 2 群组选择符 如 h1,h2h3{padding:5px;}中间使用,分隔符,由多个选择符组成,表示这一组选择符均采用一致样式 3 包含选择符 包含主要用于父级内部字集节点的设置,就像xpath路径一样,语法为选择符之间使用 空格作为分隔符 如 h1 span{font-weight:bold} 意思是h1内部所有span节点使用字体加粗样式 4 i

转发-css 选择符

此文章仅为转发,非原创,原文 css 选择符   请支持原创 css参考手册:css.doyoe.com 在css3中,不同的浏览器可能需要不同的前缀,它表示该css属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的 -webkit 代表chrome.safari私有属性 -moz 代表firefox浏览器私有属性 -ms 代表IE浏览器私有属性 -o 代表opera浏览器私有属性 css语法结构 css语法由

CSS选择符总结(Selectors)

一.通配选择符(Universal Selector): 语法:* 说明:1.*表示通配符,表示所有的            2.格式:*{样式列表}            3.用于整个页面或网站字体.边距.背景等 例子: 1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type&