<!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. 【数据结构】二叉树(c++)

    头文件: #include <iostream> using namespace std; template<class Type> class Bintree; //结点类 ...

  2. 细谈SetButtonInfo函数及其用途

    SetButtonInfo用于设置某个按钮,它的接口定义如下: 下面是它的几个接口函数说明: void CToolBar::SetButtonInfo(int nIndex, UINT nID, UI ...

  3. windows下安装RubbitMq

    1.下载 下载 rabbitMQ :http://www.rabbitmq.com/download.html,安装rabbitmq需要erlang,下载erlang:http://www.erlan ...

  4. iOS内存管理机制解析之MRC手动引用计数机制

    前言: iOS的内存管理机制ARC和MRC是程序猿參加面试基本必问的问题,也是考察一个iOS基本功是 否扎实的关键,这样深入理解内存管理机制的重要性就不言而喻了. iOS内存管理机制发展史 iOS 5 ...

  5. 20170228 METHOD handle_data_changed-

    CALL METHOD er_data_changed->add_protocol_entry   METHOD handle_data_changed. DATA: ls_modi TYPE  ...

  6. 对soc-audio体系snd_soc_machine和snd_soc_dai_link简单理解

    ASOC (ALSA system on chip)              // 主要为嵌入式系统专门开发的sound管理体系结构[luther.gliethttp].Digital Audio ...

  7. php与html 表单的结合

    PHP $_POST <!DOCTYPE html> <html> <body> <form method="post" action=& ...

  8. chan

    第一单元:分型.笔.线段 ?1  分型 一.分型.笔和线段所属范畴 缠师在<教你炒股票72:本ID已有课程的再梳理>中对缠论做过这样的说明“本ID的理论,本质上分两部分,一是形态学,二是动 ...

  9. ComboBox联动 （AJAX BS实现）

    //从webservice中取数据ajax            Ext.Ajax.request({                url: 'WebService.asmx/GetComboxFi ...

  10. ajax验证用户名 当用户名框的数据改变时 执行ajax方法

    ajax验证用户名 当用户名框的数据改变时 执行ajax方法 <html xmlns="http://www.w3.org/1999/xhtml" ><head ...