<!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 | 基础 | 属性过滤选择器的更多相关文章

  1. jQuery之属性过滤选择器

    转自:http://blog.csdn.net/woshisap/article/details/7341136 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQu ...

  2. 黑马day16 jquery&amp;属性过滤选择器

    属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 .[attribute] 使用方法: $("div[id]") ;  返回值  集合元素 说明:匹配包括给定属性的元素.样 ...

  3. Jquery | 基础 | jQuery表单对象属性过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...

  4. jQuery选择器之表单对象属性过滤选择器Demo

    测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  5. jQuery表单对象属性过滤选择器

    jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...

  6. 【转】jQuery属性过滤选择器

    属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素. [attribute]    选取用次属性的元素 [attribute=value]   选取属性值为value的元素 [attribute ...

  7. 009 jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）

    1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. Jquery | 基础 | 使用 jQuery 表单过滤选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. XenServer网卡Bonding

    在给XenServer配置网卡bonding时,需要在所有节点都添加到集群之后再进行,这也是来自Citrix的建议:"Citrix recommends never joining a ho ...

  2. WebSocket 和 Socket 的区别

    WebSocket 和 Socket 的区别   英文:TheAlchemist 链接:http://www.jianshu.com/p/59b5594ffbb0 <刨根问底 HTTP 和 We ...

  3. Android中Looper的quit方法和quitSafely方法

    Looper是通过调用loop方法驱动着消息循环的进行: 从MessageQueue中堵塞式地取出一个消息.然后让Handler处理该消息,周而复始.loop方法是个死循环方法. 那怎样终止消息循环呢 ...

  4. reviews of learn python3 the hard way

    Almost every time,I try my best to write a long review of the book I have read. But this time I want ...

  5. js编程精解--笔记

    看这本书的目的是为了更好的使用mongodb,所以只看js编程语言基础,不看浏览器和画布. 需要看1-11章,共160页 第一章 值.类型和运算符 第二章 程序结构 第三章 函数 第四章 数据结构:对 ...

  6. jvm 调优（1）概念

    数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型.基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了某个对象的引用,而不是对象本身, ...

  7. REST RPC HTTP vs 高性能二进制协议 序列化和通信协议

    edisonchou https://mp.weixin.qq.com/s/-XZXqXawR-NxJMPCeiNsmg .NET Core微服务之服务间的调用方式(REST and RPC) Edi ...

  8. Javascript正则中的exec和match

    分几种情况说明 1.假设re中不是全局的也就是不带g var str = "cat3 hat4"; var re = /\w+\d/; var ex = re.exec(str); ...

  9. JSP 使用 JDBC连接SQL Server

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  10. RabbitMQ 使用

    安装步骤略过. 启动 启动很简单,找到安装后的 RabbitMQ 所在目录下的 sbin 目录,可以看到该目录下有6个以 rabbitmq 开头的可执行文件,直接执行 rabbitmq-server ...