<!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. 线程相关函数(POSIX线程)：

    创建单个线程 #include <pthread.h> // 若成功返回0,出错返回正的Exxx值 int pthread_create(pthread_t *tid, // 每个线程在进 ...

  2. 基于bootstrap_信息采集

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 三分钟教你学Git(十四) 之 线下传输仓库

    有时候还有一个人不能从远程直接clone仓库或者说由于非常大,clone非常慢或其他原因.我们能够使用bundle命令将Git仓库打包,然后通过U盘或者是其他介质拷贝给他,这样他拿到打包好的仓库后能够 ...

  4. TreeSet实现Comparator接口的排序算法的分析

    为了方便,用lambda表达式代替comparator接口 例子如下: public static void main(String[] args) { TreeSet<Integer> ...

  5. 例子：两个表根据productID合并

  6. monitor and move the log content to our big data system

    Apache Flume HDFS Sink Tutorial | HowToProgram https://howtoprogram.xyz/2016/08/01/apache-flume-hdfs ...

  7. 编译spark源码 Maven 、SBT 2种方式编译

    由于实际环境较为复杂,从Spark官方下载二进制安装包可能不具有相关功能或不支持指定的软件版本,这就需要我们根据实际情况编译Spark源代码,生成所需要的部署包. Spark可以通过Maven和SBT ...

  8. nrm -- NPM registry 管理工具（附带测速功能）

    在使用npm时,官方的源下载npm包会比较慢,国内我们基本使用淘宝的源.nrm 是一个 NPM 源管理器,可以允许你快速地在 NPM 源间切换. Install npm install -g nrm ...

  9. JVM内存分配策略、各个代区、FullGC/MinorGC

    主要讨论默认的Serial/Serial Old内存分配: 一.几种分配方案 1.  对象优先在Eden分配: 一般情况下,对象会在新生代的Eden区分配,Eden区没有足够空间时,虚拟机会 发起一次 ...

  10. 基于MATLAB的滤波算法

    目前比较经典的图像去噪算法主要有以下三种: 均值滤波:也称线性滤波,主要思想为邻域平均法,即用几个像素灰度  的平均值来代替每个像素的灰度.有效抑制加性噪声,但容易引起图像模糊,  可以对其进行改进, ...