如何理解和运用jquery属性选择器

2024-10-27 18:13:15

1、第一步我们看属性选择器多与少的的用法<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>高级选择器</title><script type="text/javascript" src="..\jquery-1.10.2\jquery.js"></script><script type="text/javascript" src="demo.js"></script><link rel="stylesheet" href="style.css" type="text/css"/></head><body><a title="num1">num1</a><a >num2</a><a title="num3">num3</a><a bbb="aaa" title="num1">num123</a><a title='no' >num4</a><a title="num5">num5</a></body></html>少的demo.js代码如下：$(function(){$('a[title]').css('color','red');});输出的结果：所有的a只有title属性它就会变红多的demo.js代码如下：$(function(){$('a[title=num1][bbb=aaa]').css('color','red');});输出的结果：num123变红所有a的title属性等于num1并且a的bbb属性等于aaa才会变红评论：少（代码少）在一定条件可以转化为多（变红多），多（代码多）在一定条件下可以转化少（变红少）

2、第二我们再看首尾的用法我们改一下上面代码：<a title="num1">num1</a><a title="1num" >num2</a><a title="nu3">num3</a><a title="2num">num123</a><a title='no' >num4</a><a title="num5">num5</a>我们先看首demo.js$(function(){$('a[title^=num]').css('color','red');});输出结果：num1 num5变成红色,a的title属性值的开头等于num都会变红再看尾demo.js$(function(){$('a[title$=num]').css('color','red');});输出结果：num2 num123变红,a的title属性值的结尾等于num都会变红评论：我猜中了故事的开头,却猜不中故事的结局.

3、等与不等<a title="num1">num1</a><a title="1num" >num2</a><a title="nu3">num3</a><a title="2num">num123</a><a title='no' >num4</a><a title="num5">num5</a>等的代码：$('a[title=num1] ').css('color','red');输出结果： num1变红，a的属性title等于num1变成红色不等的代码：$('a[title！=num1] ').css('color','red');输出结果：num2 num3 num123 num4 num5变红，a的属性title不是num1变红评论：等与不等，我都等了。在与不在乎，我都已经在乎了：

4、空与定<a title="num1">num1</a><a title="1num" >num2</a><a title="nu3">num3</a><a title="2num aaa">num123</a><a title='no' >num4</a><a title="xzcwhuiediwenum5">num5</a>空的demo.js代码$('a[title~=aaa]').css('color','red');输出结果：num123变红，它其实指的是虽空出一个位子，但有aaa就能变红定的demo.js代码$('a[title*=num5]').css('color','red');输出结果： num5变红，它其实指的是只要num5在就可以变红评论：只要功夫深，铁杵磨成针