Use cases of [attribute=value] selector in jQuery-JS Tutorial-php.cn

Use cases of [attribute=value] selector in jQuery

黄舟

Release： 2017-06-23 13:17:30

Original

1199 people have browsed it

Overview

Matches the given attribute is an element with a specific value

Parameters

attributeStringV1.0

Copy after login

Attribute name

value StringV1.0

Copy after login

Attribute value. Quotes are optional in most cases. But it is used to avoid conflicts when the attribute value contains "]".

Example

Description:

Find all input elements whose name attribute is newsletter

HTML code:

<input type="checkbox" name="newsletter" value="Hot Fuzz" /> 
<input type="checkbox" name="newsletter" value="Cold Fusion" /> 
<input type="checkbox" name="accept" value="Evil Plans" />

Copy after login

jQuery Code:

$("input[name=&#39;newsletter&#39;]").attr("checked", true);

Copy after login

Result:

[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, 
<input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

Copy after login

This selector matches elements with the given attribute and attribute value.

Syntax structure:

$("[attribute=value]")

Copy after login

Example code:

Example 1:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>[attribute=value]选择器</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li[id=third]").css("color","blue");
  })
})
</script>
</head>
<body>
<ul>
  <li id="first">html专区</li>
  <li id="second">Jquery专区</li>
</ul>
<ul>
  <li id="third">欢迎来到PHP中文网</li>
  <li>PHP中文网欢迎您</li>
</ul>
<button>点击查看效果</button>
</body>
</html>

Copy after login

The above code can be placed in the li element whose id attribute value is third in the li element The text color is set to blue.

Example 2:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>[attribute=value]选择器</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li[id=thi]rd]").css("color","blue");
  })
})
</script>
</head>
<body>
<ul>
  <li id="first">html专区</li>
  <li id="second">Jquery专区</li>
</ul>
<ul>
  <li id="thi]rd">欢迎来到PHP中文网</li>
  <li>PHP中文网欢迎您</li>
</ul>
<button>点击查看效果</button>
</body>
</html>

Copy after login

The above is the detailed content of Use cases of [attribute=value] selector in jQuery. For more information, please follow other related articles on the PHP Chinese website!