<!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. mysql使用“.frm”文件恢复表结构

    mysql创建每张表后都会在“mysql安装目录/data/数据库名/”目录下创建一个“表名.frm”文件. 该.frm文件并不能直接打开,但是它可以帮助你恢复你的表结构~~ 具体操作如下: 我现在准 ...

  2. notepad++的f90配置文件

    notepad++仅支持f77格式的,所以f90格式需要重新定义配置文件 传送门: http://ehc.ac/p/notepad-plus/discussion/331753/thread/8f72 ...

  3. 在HDInsight中的Hadoop介绍

    在HDInsight中的Hadoop介绍 概览 Azure的HDInsight是,部署和规定的Apache™Hadoop®集群在云中,提供用于管理,分析和大数据报告软件框架中的服务. 大数据 数据被描 ...

  4. Robot Framework自己主动化測试框架之我见

    一些自己主动化測试现状: 盲目的去做自己主动化,终于以失败告终. 觉得是能提高效率的事情.却推广不下去: 事实上上述问题产生的原因是: 自己主动化測试案例稳定性不高,可维护性比較差: 自己主动化測试工 ...

  5. 给EasyUi的Form加入自己主动填充部分输入框的方法

    依据项目须要,基于获取的数据对Form的部分输入框进行填充,而默认的EasyUI的Form 没有该方法.仅仅能一个输入框一个输入框的直接赋值,为此添加了Form对象的setValues,实现依据给定的 ...

  6. BZOJ 1567: [JSOI2008]Blue Mary的战役地图 矩阵二维hash

    1567: [JSOI2008]Blue Mary的战役地图 Description Blue Mary最近迷上了玩Starcraft(星际争霸) 的RPG游戏.她正在设法寻找更多的战役地图以进一步提 ...

  7. 模板方法模式-TemplateMethod

    模板方法模式:定义一个操作中的算法骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的机构即可以重定义算法的某些特定步骤. 模板方法模式是通过吧不变形为搬移到超类,去除子类中的重复代码 ...

  8. All the best open source and Software as a Service (SaaS) tools in one place 工具 工欲善其事必先利其器

    Open Source & SaaS Tools | StackShare https://stackshare.io/categories AfterShip/SaaS: List of S ...

  9. How MySQL Opens and Closes Tables refuse connections 拒绝连接的原因 file descriptors

    MySQL :: MySQL 5.7 Reference Manual :: 8.4.3.1 How MySQL Opens and Closes Tables https://dev.mysql.c ...

  10. 使用std::mutex取代QMutex

    为了保证对某个资源的操作是原子性的(对资源读写时,只有当前的操作结束,才允许另外线程对其操作,这里有个理解误区,资源操作原子性不是说,当前某个线程获得了某个资源使用权,然后线程执行时间完毕,要切换线程 ...