200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > jq查找字段忽略html标签 jquery内容过滤选择器有哪些?

jq查找字段忽略html标签 jquery内容过滤选择器有哪些?

时间:2022-05-12 15:14:17

相关推荐

jq查找字段忽略html标签 jquery内容过滤选择器有哪些?

jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括四种过滤方法: :contains(text)、:empty 、:has(seletor) 、:parent。

先写几个DOM元素的HTML结构:

John ResignGeorge MartinMalcom John SinclairJ.Ohn

Has p

:contains(text)E:contains(text) //E是指DOM元素,:contains(text)包含的文本,text是指定查找的字符串

描述:

选取含有文本内容为“text”的元素

返回值:集合元素

实例:

$(document).ready(function(){

$('div:contains(John)').css('background','#f36');

});

功能:

改变含有文本为“John”的div元素的背景色

效果:

回到前面的HTML结构中我们可以看出其中有两个div元素中包含了"John"文本,因为我们这里主要是改变了包含文本“John”的div的背景色,因此大家在效果中可以看出我们其中第一个和第三个div的背景色变成了"#f36",为了更能体会从中的变化,大家可以通过Firefox中的Firebug工具看出HTML的变化:

:emptyE:empty //其中E为DOM元素,:empty是指DOM元素中不包含任何子元素或文本

描述:

选取不含任何子元素或文本的空元素

返回值:集合元素

实例:

$(document).ready(function(){

$('div:empty').css('background','#f36');

});

功能:

改变不含子元素(包括不含文本元素)的div的背景色,换句话说,就是改变不包含任何东西的div的背景色

效果:

虽然我们前面的html中所有元素中不包含子元素,但有一些包含了文本元素,只有一个div和一个p元素具没有子元素也没有文本内容。加上我们这个例子中,我们只对不包含子元素和文本内容的div进行了改变背景色的设置,所以我们的效果中只有div加上了“#f36”的背景色,同样我们来看看HTML的变化吧:

:has(selector)E:has(selector) //其中E为有效果DOM元素标签,:has(selector)含有一个选择器,selector用于筛选的选择器

描述:

选取含有选择器所匹配的元素的元素

返回值:集合元素

实例:

$(document).ready(function(){

$('div:has(p)').css('background','#f36');

});

功能:

改变含有子元素P的div元素的背景色

效果:

在我们这个实例中,只有一个div中包含了子元素P,所以包含了符合这个要求的div元素其背景色被设置为“#f36”,改变后的HTML:

:parentE:parent //E为有效的DOM元素标签,:parent含有子元素或文本内容

描述:

选取含有子元素或者文本的元素标签

返回值:集合元素

实例:

$(document).ready(function(){

$('div:parent').css('background','#f36');

});

功能:

改变含有子元素或文本内容的div的背景色。换句话说只在div包含了任何一个子元素或者任何内容,其背景色都将会改变。

效果:

本例子,只有一个div和一个p元素中不包含任何子元素和文本内容,因为我们这里是对div进行设置,所以效果中显示,除了这两个不含有子元素和任何内容的div的背景色都变成了“#f36”,变化后的HTML:

更多jQuery相关技术文章,请访问 jQuery答疑 栏目进行学习!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。