Jquery3可见性过滤器、属性过滤器、表单选择器

最新推荐文章于 2024-09-23 17:12:42 发布

l3579

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量125

点赞数

文章标签： jquery 过滤器 html

本文链接：https://blog.csdn.net/l3579/article/details/108855421

版权

本文详细介绍了jQuery中的可见性过滤器、属性过滤器和表单选择器的使用，通过实例展示了如何选取特定属性的DOM元素并进行样式操作。同时，讲解了HTML标签的target属性在iframe跳转中的应用，包括_blank、_self、_parent、_top和framename等不同值的效果。

摘要由CSDN通过智能技术生成

可见性过滤器

在这里插入图片描述

属性过滤器

效果图：

在这里插入图片描述

body：

<body>
    <div id="div1" title="test">1应</div>
    <div id="div2" title="ceshi">2赢</div>
    <div>3影</div> 
</body>

CSS：

     <style type="text/css">
        div {
        width:40px;/*宽*/
        height:20px;/*长*/
        border:2px dashed black;/*边框*/
        }    
    </style>

Jquery：

    <script type="text/javascript">
        $(function () {
            //一 [attribute]
            //$("div[id]")选取所有拥有id属性的div
            $("div[id]").css("text-align","center");//文字居中

            //二 [attribute=value]
            //$("div[title=test]")选取所有属性title值为test的div
            $("div[title=test]").css("color", "aqua");//字体颜色为浅蓝色
            
            //三 [attribute!=value]
            //$("div[title!=test]")选取所有属性title值不为test的div(注意:没有title属性的元素也会被选取)
            $("div[title!=test]").css("color", "red");//字体颜色为红色

            //四 [attribute^=value]
            //$("div[title^=ce]")选取所有属性title值为ce开头的div
            $("div[title^=ce]").css("background-color", "green");//背景颜色为绿色
            
            //五 [attribute$=value]
            //$("div[title$=st]")选取所有属性title值为st结尾的div
            $("div[title$=st]").css("background-color", "blue");//背景颜色为蓝色

            //六 [attribute*=value]
            //$("div[title*=e]")选取所有属性title值中包含e的div
            $("div[title*=e]").css("font-family", "FangSong");//字体样式为仿宋

            //七 [selector][selectorN]
            //$(“div[id][title$=’test’]”)选取所有拥有id属性，且title属性值以test结尾的所有div元素
            $("div[id][title$='test']").css("font-size", "larger");//字体变大

        })
    </script>

表单选择器

在这里插入图片描述

表单过滤器

在这里插入图片描述

HTML 标签的 target 属性

贵美商城iframe标签跳转： target="_blank"
定义和用法
target 属性规定在何处打开页面上的所有链接。
语法：
< *** target=“value”/>

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

链接: https://www.w3school.com.cn/tags/att_a_target.asp.