草庐IT

day29-JQuery02

liyuelian 2023-03-28 原文

JQuery02

4.jQuery选择器02

4.3过滤选择器

4.3.1基础过滤选择器

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

基础过滤选择器介绍:

  1. :first用法:$("tr:first");,返回值:单个元素的组成的集合

    说明:匹配找到的第一个元素

  2. :last用法:$("tr:last");,返回值:集合元素

    说明:匹配找到的最后一个元素

  3. :not(selector)用法:$("input:not(:checked)");,返回值:集合元素

    说明:取出所有与给定选择器匹配的元素,有点类似于“非”,这里的例子为没有选择的input(input的type=“checkbox”)

  4. :even用法:$("tr:even");,返回值:集合元素

    说明:匹配所有索引值为偶数的元素,从0开始计数。js的数据都是从0开始计数的,所以第一个选中的元素下标为0

  5. :odd用法:$("tr:odd");,返回值:集合元素

    说明:匹配所有索引值为奇数的元素,从0开始计数。

  6. :eq(index)用法:$("tr:eq(0)");,返回值:集合元素

    说明:匹配一个给定索引值的元素。eq(0)就是获取第一个tr元素,括号里面的是索引值

  7. :gt(index)用法:$("tr:gt(0)");,返回值:集合元素

    说明:匹配所有大于给定索引值的元素。

  8. :lt(index)用法:$("tr:lt(2)");,返回值:集合元素

    说明:匹配所有小于给定索引值的元素。

  9. :header(固定写法)用法:$(":header").css("background","#EEE");,返回值:集合元素

    说明:匹配如h1,h2,h3之类的标题元素,是专门用来获取标题元素的

  10. :animated(固定写法),返回值:集合元素

    说明:匹配所有正在执行动画效果的元素

基础过滤选择器-应用实例

  1. 改变第一个 div 元素的背景色为 #0000FF
  2. 改变最后一个 div 元素的背景色为 #0000FF
  3. 改变 class 不为 one 的所有 div 元素的背景色为 #0000FF
  4. 改变索引值为偶数的 div 元素的背景色为 #0000FF
  5. 改变索引值为奇数的 div 元素的背景色为 #0000FF
  6. 改变索引值为大于 3 的 div 元素的背景色为 #0000FF
  7. 改变索引值为等于 3 的 div 元素的背景色为 #0000FF
  8. 改变索引值为小于 3 的 div 元素的背景色为 #0000FF
  9. 改变所有的标题元素的背景色为 #0000FF
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1. 改变第一个 div 元素的背景色为 #0000FF
            $("#b1").click(function () {
                $("div:first").css("background", "#0000FF")
                //或者 $("div:eq(0)").css("background","#0000FF")
            })
            // 2. 改变最后一个 div 元素的背景色为 #0000FF
            //所谓的最后一个是从上到下,从左到右去搜,最后一个
            $("#b2").click(function () {
                $("div:last").css("background", "#0000FF")
            })
            // 3. 改变 class 不为 one 的所有 div 元素的背景色为 #0000FF
            $("#b3").click(function () {
                $("div:not(.one)").css("background", "#0000FF")
            })
            // 4. 改变索引值为偶数的 div 元素的背景色为 #0000FF
            $("#b4").click(function () {
                $("div:even").css("background", "#0000FF")
            })
            // 5. 改变索引值为奇数的 div 元素的背景色为 #0000FF
            $("#b5").click(function () {
                $("div:odd").css("background", "#0000FF")
            })
            // 6. 改变索引值为大于 3 的 div 元素的背景色为 #0000FF
            $("#b6").click(function () {
                $("div:gt(3)").css("background", "#0000FF")
            })
            // 7. 改变索引值为等于 3 的 div 元素的背景色为 #0000FF
            $("#b7").click(function () {
                $("div:eq(3)").css("background", "#0000FF")
            })
            // 8. 改变索引值为小于 3 的 div 元素的背景色为 #0000FF
            $("#b8").click(function () {
                $("div:lt(3)").css("background", "#0000FF")
            })
            // 9. 改变所有的标题元素的背景色为 #0000FF
            $("#b9").click(function () {
                $(":header").css("background", "#0000FF")
            })
        })
    </script>
</head>
<body>
<h1>H1 标题</h1>
<h2>H2 标题</h2>
<h3>H3 标题</h3>
<input type="button" value="改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变 class 不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变索引值为大于3 的div元素的背景色为 #0000FF" id="b6"/>
<input type="button" value=" 改变索引值为等于3 的div元素的背景色为 #0000FF" id="b7"/>
<input type="button" value=" 改变索引值为小于3 的div元素的背景色为 #0000FF" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
<hr/>
<div id="one" class="mini">
    div id 为 one
</div>
<div id="two">
    div id 为 two
    <div id="two01">
        id two01
    </div>
    <div id="two02">
        id two02
    </div>
</div>
<div id="three" class="one">
    div id 为 three class one
    <div id="three01">
        id three01
    </div>
</div>
</body>
</html>

4.3.2内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上:

  1. :contains(text)用法:$("div:contains('Hello')")返回值:集合元素

    说明:匹配包含给定文本的元素。这个选择器比较有用,当我们要选择的不是dom标签元素时,它就派上了用场,它的作用是查找被标签围起来的文本内容是否符合指定的内容的。

  2. :empty用法:$("td:empty")返回值:集合元素

    说明:匹配所有不包含子元素或者文本的空元素

  3. :has(selector)用法:$("div:has(p)").addClass("test")返回值:集合元素

    说明:匹配含有选择器所匹配的元素的元素。这里的例子是:给所有包含p元素的div标签加上class="test"

  4. :parent用法:$("td:parent")返回值:集合元素

    说明:匹配含有子元素或者文本的元素,和上面empty相反。

内容过滤选择器-应用实例

  1. 改变含有文本 'di' 的 div 元素的背景色为 #0000FF
  2. 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 pink
  3. 改变含有 class 为 mini 元素的 div 元素的背景色为 green
  4. 改变含有子元素(或者文本元素)的div元素的背景色为 yellow
  5. 改变不含有文本 'di' 的div元素的背景色为 pink
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容过滤选择器应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 80px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1. 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
            $("#b1").click(function () {
                $("div:contains('di')").css("background", "#0000FF")
            })
            // 2. 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 pink
            $("#b2").click(function () {
                $("div:empty").css("background", "pink")
            })
            // 3. 改变含有 class 为 mini 元素的 div 元素的背景色为 green
            $("#b3").click(function () {
                //这个是选择有  class='.mini' div 的父div元素
                // $("div:has(.mini)").css("background","green")
                //这个才是选择有 class='.mini' div
                $("div.mini").css("background", "green")
            })
            // 4. 改变含有子元素(或者文本元素)的div元素的背景色为 yellow
            $("#b4").click(function () {
                $("div:parent").css("background", "yellow")
            })
            // 5. 改变不含有文本 di 的 div 元素的背景色 为pink
            $("#b5").click(function () {
                $("div:not(:contains('di'))").css("background", "pink")
            })
        })
    </script>
</head>
<body>
<input type="button" value="改变含有文本 'di' 的 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 pink" id="b2"/>
<input type="button" value="改变含有 class 为 mini 元素的 div 元素的背景色为 green" id="b3"/>
<input type="button" value="改变含有子元素(或者文本元素)的div元素的背景色为 yellow" id="b4"/>
<input type="button" value="改变不含有文本 'di' 的div元素的背景色为pink" id="b5"/>
<hr/>
<div id="xxxx">
    <div id="one" class="mini">
        div id 为 one
    </div>
</div>
<div id="two">
    div id 为 two
    <div id="two01">
        id two01
    </div>
    <div id="two02">
        id two02
    </div>
</div>
<div id="three" class="one">
    div id 为 three class one
    <div id="three01">
        id three01
    </div>
</div>
<div id="four" class="one">
    XXXXXXXXXX
</div>
<div id="five" class="one"></div>
<div id="mover">
    执行动画
</div>
</body>
</html>

4.3.3可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素,或type为hidden的元素
$("li:visible")      //匹配所有可见元素

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

  1. :hidden用法:$("tr:hidden")返回值:集合元素

    说明:匹配所有的不可见元素,input元素的type属性为"hidden"的话也会被匹配到,意思是css中display:noneinput type="hidden"的都会被匹配到

  2. :visible用法:$("tr:visible")返回值:集合元素

    说明:匹配所有的可见元素

应用实例

  1. 改变所有可见的div元素的背景色为 #0000FF
  2. 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
  3. 选取所有的文本隐藏域, 并打印它们的值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见性过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1. 改变所有可见的div元素的背景色为 #0000FF
            $("#b1").click(function () {
                $("div:visible").css("background", "#0000FF")
            })
            // 2. 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
            $("#b2").click(function () {
                var $div = $("div:hidden");
                $div.show().css("background", "#0000FF")

            })
            // 3. 选取所有的文本隐藏域, 并打印它们的值
            $("#b3").click(function () {
                //先得到所有的hidden input
                var $inputs = $("input:hidden");
                //$inputs是一个jquery对象,而且是一个数组对象
                //遍历
                //方式一:for循环
                // for (let i = 0; i < $inputs.length; i++) {
                //     //这里是dom对象
                //     var input = $inputs[i];
                //     // alert(input)//[object HTMLInputElement]
                //     console.log("值是:"+input.value)
                // }
                //方式二:jquery each() 可以对数组遍历
                //1.each方法每遍历一次,会将$input数组的元素取出,传给 this 对象
                $inputs.each(function () {
                    //这里可以使用this获取每次遍历的对象
                    //this对象是一个dom对象
                    // console.log("值是= "+this.value)
                    //也可以将this对象转成jquery对象,使用jquery方法
                    alert("值是= " + $(this).val())
                })
            })
        })
    </script>
</head>
<body>
<input type="button" value="改变所有可见的 div 元素的背景色为 #0000FF" id="b1"/> <br/><br/>
<input type="button" value="选取所有不可见的 div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/> <br/><br/>
<input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <br/><br/>
<hr/>
<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>
<div id="one" class="visible">
    div id 为 one
</div>
<div id="two" class="visible">
    div id 为 two
</div>
<div id="three" class="one">
    div id 为 three
</div>
</body>
</html>

4.3.4属性过滤选择器

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤,同时满足两个属性的条件的元素

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

  1. [attribute]用法:$("div[id]")返回值:集合元素

    说明:匹配包含给定属性的元素。例子中是选取所有带id 属性的 div 元素

  2. [attribute=value]用法:$("div[id='one']")返回值:集合元素

    说明:匹配给定属性是某个特定值的元素。例子中是选取id 属性的值为one的 div 元素

  3. [attribute!=value]用法:$("input[name!='newsletter']返回值:集合元素

    说明:匹配所有不含有指定的属性,或者属性不等于特定值的元素。此选择器等价于:not([attr=value]),即含有特定属性但该属性不含有指定值的元素。

  4. [attribute^=value]用法:$("input[name^='news']")返回值:集合元素

    说明:匹配给定的属性值是以某些值开始的元素

  5. [attribute$=value]用法:$("input[name$='letter']")返回值:集合元素

    说明:匹配给定的属性值是以某些值结尾的元素

  6. [attribute*=value]用法:$("input[name*='man']")返回值:集合元素

    说明:匹配给定的属性是包含某些值的元素

  7. [attr1][attr2][attrN]用法:$("input[id][name$='man']")返回值:集合元素

    说明:多属性选过滤,同时满足两个属性的条件的元素

应用实例

选取下列元素,改变其背景色为 #0000FF

  1. 含有属性title 的div元素.
  2. 属性title值等于"test"的div元素.
  3. 属性title值不等于"test"的div元素(没有属性title的也将被选中).
  4. 属性title值 以"te"开始 的div元素.
  5. 属性title值 以"est"结束 的div元素.
  6. 属性title值 含有"es"的div元素.
  7. 选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性过滤选择器-应用实例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 选取下列元素,改变其背景色为 #0000FF
            // 1. 含有属性title 的div元素.
            $("#b1").click(function () {
                $("div[title]").css("background", "#0000FF")
            })
            // 2. 属性title值等于"test"的div元素.
            $("#b2").click(function () {
                $("div[title='test']").css("background", "#0000FF")
            })
            // 3. 属性title值不等于"test"的div元素(没有属性title的也将被选中).
            $("#b3").click(function () {
                $("div[title!='test']").css("background", "#0000FF")
            })
            // 4. 属性title值 以"te"开始 的div元素.
            $("#b4").click(function () {
                $("div[title^='te']").css("background", "#0000FF")
            })
            // 5. 属性title值 以"est"结束 的div元素.
            $("#b5").click(function () {
                $("div[title$='est']").css("background", "#0000FF")
            })
            // 6. 属性title值 含有"es"的div元素.
            $("#b6").click(function () {
                $("div[title*='es']").css("background", "#0000FF")
            })
            // 7. 选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素.
            $("#b7").click(function () {
                $("div[id][title*='es']").css("background", "#0000FF")
            })
        })
    </script>
</head>
<body>
<input type="button" value="含有属性 title 的 div 元素" id="b1"/>
<input type="button" value="属性 title 值等于 test 的 div 元素" id="b2"/><br/><br/>
<input type="button" value="属性 title 值不等于 test 的 div 元素(没有属性 title 的也将被选中)" id="b3"/><br/><br/>
<input type="button" value="属性 title 值 以 te 开始 的 div 元素" id="b4"/><br/><br/>
<input type="button" value="属性 title 值 以 est 结束 的 div 元素" id="b5"/>
<input type="button" value="属性 title 值 含有 es 的 div 元素" id="b6"/><br/><br/>
<input type="button" value="选取有属性 id 的 div 元素,然后在结果中选取属性 title 值含有“es”的 div元素" id="b7"/><br/><br/>
<div id="one" title="test">
    div id 为 one test
</div>
<div id="one-1" title="texxx">
    div id 为 one-1 texxx
</div>
<div id="one-2" title="xxxest">
    div id 为 one-2 xxxest
</div>
<div id="one-3" title="xxxesxxxxxt">
    div id 为 one-3 xxxesxxxxxt
</div>
<div id="two" title="ate">
    div id 为 two
</div>
<div id="three" class="one">
    div id 为 three
</div>
</body>
</html>

4.3.5子元素过滤选择器

  1. :nth-child(index/even/odd/equation)用法:$("ul li:nth-child(2)")返回值:集合元素

    说明:匹配其父元素下的第N个子或奇偶元素。这个选择器和之前说过的基础过滤(Bade Filters)中的eq()有些类似,不同的地方就是前者是从0开始,后者是从1开始。

  2. :first-child用法:$("ul li:first-child")返回值:集合元素

    说明:匹配第一个子元素。':first'只匹配一个元素,而此选择符将为每个父元素匹配其第一个子元素,这里需要区分

  3. :last-child用法:$("ul li:last-child")返回值:集合元素

    说明:匹配最后一个子元素。':last'只匹配一个元素,而此选择符将为每个父元素匹配其最后一个子元素,这里需要区分

  4. :only-child用法:$("ul li:only-child")返回值:集合元素

    说明:如果某个元素是父元素中唯一的子元素,那将会被匹配

  5. nth-child() 选择器详解如下:

    (1):nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

    (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

    (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素

    (4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1 的元素

应用例子

选取下列元素,改变其背景色为 #0000FF

  1. 每个class为one的div父元素下的第2个子元素.
  2. 每个class为one的div父元素下的第一个子元素
  3. 每个class为one的div父元素下的最后一个子元素
  4. 如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素过滤选择器示例</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 70px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 选取下列元素,改变其背景色为 #0000FF
            // 1. 每个class为one的div父元素下的第2个子元素.
            $("#b1").click(function () {
                //div .one 应该理解成层级关系,类似ul li
                $("div .one:nth-child(2)").css("background", "#0000FF")
            })
            // 2. 每个class为one的div父元素下的第一个子元素
            $("#b2").click(function () {
                $("div .one:first-child").css("background", "#0000FF")
            })
            // 3. 每个class为one的div父元素下的最后一个子元素
            $("#b3").click(function () {
                $("div .one:last-child").css("background", "#0000FF")
            })
            // 4. 如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素
            $("#b4").click(function () {
                $("div .one:only-child").css("background", "#0000FF")
            })
        })
    </script>
</head>
<body>
<input type="button" value="每个class为 one 的 div父元素下的第 2 个子元素" id="b1"/><br/><br/>
<input type="button" value="每个class为 one 的 div父元素下的第一个子元素" id="b2"/><br/><br/>
<input type="button" value="每个class为 one 的 div父元素下的最后一个子元素" id="b3"/><br/><br/>
<input type="button" value="如果class为 one 的 div父元素下的仅仅只有一个子元素,那么选中这个子元素" id="b4"/><br/><br/>
<div class="one">
    <div id="one" class="one">
        XXXXXXXXX id=one
    </div>
    <div id="two" class="one">
        XXXXXXXXX id=two
    </div>
    <div id="three" class="one">
        XXXXXXXXX id=three
    </div>
    <div id="four" class="one">
        XXXXXXXXX id=four
    </div>
</div>
<div class="one">
    <div id="five" class="one">
        XXXXXXXXX id=five
    </div>
</div>
</body>
</html>

4.3.6表单属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

  1. :enabled用法:$("input:enabled")返回值:集合元素

    说明:匹配所有可用元素,意思是查找所有input中不带有disabled=“disabled”的input

  2. :disabled用法:$("input:disabled")返回值:集合元素

    说明:匹配所有不可用元素

  3. :checked用法:$("input:checked")返回值:集合元素

    说明:匹配所有选中的被选中元素(复选框,单选框等,不包括select中的option)

  4. :selected用法:$("select option:selected")返回值:集合元素

    说明:匹配所有选中的option元素

应用实例

  1. 利用 jQuery 对象的 val() 方法改变表单内可用 < input> 元素的值
  2. 利用 jQuery 对象的 val() 方法改变表单内不可用 < input> 元素的值
  3. 利用 jQuery 对象的 length 属性获取多选框选中的个数
  4. 利用 jQuery 对象的 text() 方法获取下拉框选中的内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单对象属性过滤选择器</title>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1. 利用jQuery 对象的val() 方法改变表单内 type=text 可用<input> 元素的值
            $("#b1").click(function () {
                //jquery对象.val()表示返回value
                //jquery对象.val("值")表示给该对象设置值
                $("input[type='text']:enabled").val("台球")
            })
            // 2. 利用 jQuery 对象的 val() 方法改变表单内不可用 < input> 元素的值
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("足球")
            })
            // 3. 利用 jQuery 对象的 length 属性获取多选框/复选框 选中的个数
            $("#b3").click(function () {
                alert("复选框选中个数= " + $("input[type='checkbox']:checked").length)
            })
            // 4. 利用 jQuery 对象的 text() 方法获取下拉框选中的内容
            $("#b4").click(function () {
                //如果我们希望选择指定的select,可以加入属性过滤选择器
                //如:$("select[属性=‘值’] option:selected")
                var $selects = $("select option:selected");
                $selects.each(function () {
                    alert("你选择了= " + $(this).text())
                })
            })
        })
    </script>
</head>
<body>
<input type="button" value="利用jQuery 对象的val() 方法改变表单内 type=text 可用<input> 元素的值" id="b1"/><br/><br/>
<input type="button" value="利用jQuery 对象的val() 方法改变表单内 type=text 不可用<input> 元素的值" id="b2"/><br/><br/>
<input type="button" value="利用jQuery 对象的length 属性获取多选框选中的个数" id="b3"/><br/><br/>
<input type="button" value="利用jQuery 对象的text() 方法获取下拉框选中的内容" id="b4"/><br/><br/>
<br>
<input type="text" value="篮球 1"/>
<input type="text" value="篮球 2"/>
<input type="text" value="篮球 3" disabled="true"/>
<input type="text" value="篮球 4" disabled="true"/>
<br>
<h1>选择你的爱好</h1>
<input type="checkbox" value="爱好 1"/>爱好 1
<input type="checkbox" value="爱好 2"/>爱好 2
<input type="checkbox" value="爱好 3"/>爱好 3
<input type="checkbox" value="爱好 4"/>爱好 4
<br>
<h1>选项如下:</h1>
<select name="job" size=9 multiple="multiple">
    <option value="选项 1">选项 1</option>
    <option value="选项 2">选项 2</option>
    <option value="选项 3">选项 3</option>
    <option value="选项 4">选项 4</option>
    <option value="选项 5">选项 5</option>
    <option value="选项 6">选项 6</option>
</select>
<select id="lili" name="edu">
    <option value="博士">博士</option>
    <option value="硕士">硕士</option>
    <option value="本科">本科</option>
    <option value="小学">小学</option>
</select>
</body>
</html>

有关day29-JQuery02的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  3. 牛客网专项练习30天Pytnon篇第02天 - 2

    1.在Python3中,下列关于数学运算结果正确的是:(B)a=10b=3print(a//b)print(a%b)print(a/b)A.3,3,3.3333...B.3,1,3.3333...C.3.3333...,3.3333...,3D.3.3333...,1,3.3333...解析:    在Python中,//表示地板除(向下取整),%表示取余,/表示除(Python2向下取整返回3)2.如下程序Python2会打印多少个数:(D)k=1000whilek>1:    print(k)k=k/2A.1000 B.10C.11D.9解析:    按照题意每次循环K/2,直到K值小于等

  4. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ? - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单,用户可以在其中添加一个唯一的电子邮件,并让电子邮件测试将其发送到该特定电子邮件。为了简单起见,我决定让测试电子邮件通过ajax执行,并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  5. ruby-on-rails - rails : Find tasks that were created on a certain day? - 2

    我有一个任务列表(名称、starts_at),我试图在每日View中显示它们(就像iCal)。deftodays_tasks(day)Task.find(:all,:conditions=>["starts_atbetween?and?",day.beginning,day.ending]end我不知道如何将Time.now(例如“2009-04-1210:00:00”)动态转换为一天的开始(和结束),以便进行比较。 最佳答案 deftodays_tasks(now=Time.now)Task.find(:all,:conditio

  6. 什么是0day漏洞?如何预防0day攻击? - 2

    什么是0day漏洞?0day漏洞,是指已经被发现,但是还未被公开,同时官方还没有相关补丁的漏洞;通俗的讲,就是除了黑客,没人知道他的存在,其往往具有很大的突发性、破坏性、致命性。0day漏洞之所以称为0day,正是因为其补丁永远晚于攻击。所以攻击者利用0day漏洞攻击的成功率极高,往往可以达到目的并全身而退,而防守方却一无所知,只有在漏洞公布之后,才后知后觉,却为时已晚。“后知后觉、反应迟钝”就是当前安全防护面对0day攻击的真实写照!为了方便大家理解,中科三方为大家梳理当前安全防护模式下,一个漏洞从发现到解决的三个时间节点:T0:此时漏洞即0day漏洞,是已经被发现,还未被公开,官方还没有相

  7. jquery - 如何在 rails 3.1 上安装 jQuery - 2

    我以为它已经安装了,但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs

  8. jquery - Rails 如何创建 Jquery flash 消息而不是默认的 Rails 消息 - 2

    我想在页面顶部创建自定义Jquery消息而不是标准RailsFlash消息。我想在我的投票底部附近创建一条即时消息。我的Controller:defvote_up@post=Post.find(params[:id])current_user.up_vote(@post)flash[:message]='Thanksforvoting!'redirect_to(root_path,:notice=>'Takforditindlæg,deternuonline!')rescueMakeVoteable::Exceptions::AlreadyVotedErrorflash[:error]

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的? 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map,但任何事情都可能发生)首先要知道的是,这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby - Rails 比较 date.end_of_day.to_datetime 和 date.to_datetime.end_of_day 返回的日期对象值时返回 false - 2

    ruby1.9.3dev(2011-09-23修订版33323)[i686-linux]轨道3.0.20最近为什么在与DateTimeonRails相关的RSpecs项目上工作我发现在给定日期以下语句发出的值date.end_of_day.to_datetime和date.to_datetime.end_of_day虽然它们表示相同的日期时间,但比较时返回false。为了确认这一点,我打开了Rails控制台并尝试了以下操作1.9.3dev:053>monday=Time.now.monday=>2013-02-2500:00:00+05301.9.3dev:054>monday.cla

随机推荐