<!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. 软件版本号(BETA、RC、ALPHA、Release、GA等)

    Alpha:        Alpha是内部测试版,一般不向外部发布,会有很多Bug.除非你也是测试人员,否则不建议使用.是希腊字母的第一位,表示最初级的版本,alpha 就是α,beta 就是β , ...

  2. Monkey测试的参数

    一.Monkey测试简介 Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模拟用户触摸屏幕.滑动Trackball.按键等操作来对设备上的程序进行压 力测试,检测程序多久 ...

  3. 使用virtualenv, uwsgi, nginx来布署flask

    本文讲述了怎样使用virtualenv, uwsgi, nginx来布署flask的步骤. 升级软件包 运行下面命令,保证你的机器安装了最新的软件包. sudo apt-get update sudo ...

  4. 减肥 day1

    今天是我减肥第一天,现在体重是147斤, 早晨吃了一碗面,喝了一碗奶,中午吃了一个apple. 6点钟去打篮球,晚上去食堂稍微吃一点东西.

  5. Model drivern

    <s:hidden name="id" value="%{role.id}"></s:hidden> 其中的value传到后台是有类型的 ...

  6. poj 1195 Mobile phones 解题报告

    题目链接:http://poj.org/problem?id=1195 题目意思:有一部 mobie phone 基站,它的面积被分成一个个小正方形(1 * 1 的大小),所有的小正方形的面积构成了一 ...

  7. Python安装pip3常见问题

    安装pip3 1.安装 zlib组件: 安装完成后,执行命令 python3 -m pip install redis,报错: RuntimeError: Compression requires t ...

  8. [原创]java获取word里面的文本

    需求场景 开发的web办公系统如果需要处理大量的Word文档(比如有成千上万个文档),用户一定提出查找包含某些关键字的文档的需求,这就要求能够读取 word 中的文字内容,而忽略其中的文字样式.表格. ...

  9. DFS Used%: NaN%问题

    一.问题描述: [root@master sbin]# hdfs dfsadmin -report Configured Capacity: 0 (0 B) Present Capacity: 0 ( ...

  10. [存档]获取通讯录信息并写到SD卡上

      下面是代码,不过没有字母表的顺序排列: package com.example.getcontacts; import java.io.FileWriter; import java.io.IOE ...