<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script> ???<title>使用jQuery 属性过滤选择器</title> ???<style type="text/css"> ???????body { ???????????font-size: 12px; ???????????text-align: center ???????} ???????div { ???????????float: left; ???????????border: solid 1px #ccc; ???????????margin: 8px; ???????????width: 65px; ???????????height: 65px; ???????????display: none ???????} ???</style> ???<script type="text/javascript"> ???????$(document).ready(function () { ???????????$("#button1").click(function () { // 显示所有含有name 属性的元素 ???????????????$("div[name]").show(1000); ???????????????????????????}) ???????????$("#button2").click(function(){ ????????????????//显示所有属性title的值是"A"的元素 ?????????????????????????????$("div[title=‘n‘]").show(1000); ????????????????????????}) ???????????$("#button3").click(function(){ ???????????????//显示属性title的值不是"n"的元素 ????????????????$("div[title!=‘n‘]").show(1000); ???????????}) ???????????$("#button4").click(function(){ ???????????????//显示所有属性title的值以"n"开始的元素 ???????????????$("div[title^=‘n‘]").show(1000); ???????????}) ???????????$("#button5").click(function(){ ???????????????//显示所有属性title的值以"e"结束的元素 ???????????????$("div[title$=‘e‘]").show(1000); ???????????}) ???????????$("#button6").click(function(){ ???????????????//显示所有属性title的值中含有"e"的元素 ????????????????$("div[title*=‘e‘]").show(1000); ???????????}) ???????????$("#button7").click(function(){ ??????????????//显示所有属性title的值中含有"e",且属性id的值是"div2"的元素 ???????????????$("div[id=‘div2‘][title*=‘e‘]").show(1000); ???????????}) ???????}) ???</script></head><body> ???<div id="div1" name="n1">hello</div> ???<div title="n" name="n2">world</div> ???<div id="div2" title="ne">good morning</div> ???<div title="nef">good afternoon</div> ???<button id="button1">显示所有含有name 属性的元素</button> ???<button id="button2">显示所有属性title的值是"A"的元素 </button> ???<button id="button3">显示属性title的值不是"n"的元素</button> ???<button id="button4">显示所有属性title的值以"n"开始的元素</button> ???<button id="button5">显示所有属性title的值以"e"结束的元素</button> ???<button id="button6">显示所有属性title的值中含有"e"的元素</button> ???<button id="button7">显示所有属性title的值中含有"e",且属性id的值是"div2"的元素</button></body></html>
Jquery | 基础 | 属性过滤选择器
原文地址：https://www.cnblogs.com/jj81/p/9702896.html