正文

2017-6-4jquery中的选择器和动画弹窗遮罩

青年a  青年a  2022-09-03  742

关键词：

（一）选择器

1.基本选择器：

　　id选择器：#　　class选择器：.　　标签选择器：标签名

　　后代选择器：用,隔开　　后代选择器：用空格隔开

2.过滤选择器：

　　（1）基本过滤：

　　　　首个：:first　　尾个：:last　　任意个：:eq(索引号)

　　　　大于：:gt(索引号)　　小于：:lt(索引号)　　排除：:not(选择器)

　　　　奇数：:odd　　偶数：:evev

　　（2）属性过滤：

　　　　属性名过滤：[属性名]　　属性值过滤：[属性名=值][属性名！=值]

　　（3）内容过滤

　　　　文字：:contains("字符串")　　子元素：:has("选择器")

（二）动画

1.show();hide(); ---- 显示和隐藏

　　例：点击按钮实现div的隐藏和显示　　　　

<script type="text/javascript">
    $("#but").click(function () {
        if ($("#div1").css("display") == "block") {
            $("#div1").hide();
        }
        else
        {
            $("#div1").show();
        }

    });



</script>

2.slideDown(), 放下效果 ; slideUp() 卷起效果卷帘门效果，

例：

<script type="text/javascript">
    $("#but").click(function () {
        if ($("#div1").css("display") == "block") {
            $("#div1").slideUp();
        }
        else
        {
            $("#div1").slideDown();
        }

    });



</script>

3.fadeIn(), 淡入 fadeOut() 淡出淡入淡出的效果

例：

<script type="text/javascript">
    $("#but").click(function () {
        if ($("#div1").css("display") == "block") {
            $("#div1").fadeOut();
        }
        else
        {
            $("#div1").fadeIn();
        }

    });



</script>

4.自定义动画：

1. 格式：animate({left:"300px",top:"300px"},3000,function(){回调函数})

2.停止动画，防止动画累计：.stop();

应用制作弹窗遮罩：

css样式代码：

#xws_tc {
    width:340px;
    background-color:white;
    left:50%;
    margin-left:-170px;
    position:fixed;
    top:-500px;
    border-radius:10px;
    z-index:11;
}
#xws_top {
    background-color:yellow;
    height:35px;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    line-height:35px;
    border-radius:10px 10px 0 0;
}
#xws-center {
    padding:10px;
    font-size:17px;
    text-align:center;
    background-color:white;
}
#xws-bottom{
    position:relative;
    border-radius:10px 10px 0px 0px;
    height:40px;
    text-align:center;
    line-height:40px;
    width:100px;
    left:50%;
    margin-left:-50px;
    font-size:22px;
    cursor:pointer;
}
    #xws-bottom:hover {
        background-color:red;
    }
#zhezhao {
    height:100%;
    width:100%;
    background-color:black;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    opacity:0.3;
    z-index:10;
}

页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="Js/jquery-1.7.1.min.js"></script>
    <link href="Css/StyleSheet.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" value="点击" id="xws-bt"/>
    <div id="xws_tc">
        <div id="xws_top">这里是标题</div>
        <div id="xws-center">
            啊沙发沙发阿士大夫撒萨法阿飞萨达四大撒旦撒啊实打实大师达到按时大大
        </div>
        <div id="xws-bottom">
                确定
        </div>
    </div>
        <div id="zhezhao"></div>
    </form>
</body>
</html>
<script type="text/javascript">
    //按钮的点击事件
    $("#xws-bt").click(function () {
        myalert("你好啊","欢迎来我家");
    });

    //窗口弹出方法
    function myalert(a, b) {
        //给标题和内容赋值
        $("#xws_top").html(a);
        $("#xws-center").html(b);
        //弹窗弹出
        $("#xws_tc").stop().animate({ top: "100px" }, 500).animate({ top: "90px" }, 100).animate({ top: "100px" }, 200);
        $("#zhezhao").css("display", "block");
    }

    $("#xws-bottom").click(function () {
        $("#xws_tc").stop().animate({ top: "110px" }, 100).animate({ top: "-500px" }, 400, function () {
            $("#zhezhao").css("display", "none");
        });
       

    });

</script>

mui禁止透明背景点击关闭弹窗遮罩(代码片段)

//禁止关闭遮罩window.addEventListener(‘tap‘,function(e)e.target.className==‘mui-backdropmui-active‘&&e.stopPropagation();,true); 查看详情

设置弹窗遮罩的样式设置（包括：leftheigh等）

.zhezhao{width:100%;background-color:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;position:absolute;left:0px;top:0px;display:none;z-index:10;}#tanchuang{position:absolute;width:400px;hei 查看详情

对于jquery选择器和动画效果停止动画的实战心得前端jquery框架(代码片段)

@[toc]JQuery选择器前面我展示了一些如何选择HTML元素的示例。关键是要了解jQuery选择器如何准确地选择要应用效果的元素。jQuery元素选择器和属性选择器允许按标记名、属性名或内容选择HTML元素。选择器允许操作HTML元素组或单个... 查看详情

微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）(代码片段)

微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容（包括图片）效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码wxml使用云开发的存储，自己开发的时候换掉src即可内部的图片使用sty... 查看详情

微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）(代码片段)

JSS 中的简单选择器和嵌套选择器

】JSS中的简单选择器和嵌套选择器【英文标题】：SimpleselectorandnestedselectorinJSS【发布时间】：2020-02-0802:51:02【问题描述】：我目前正在培训ReactJS。我正在使用material-ui和JSS（对我来说完全是新的）。我不明白如何简单地选择我的... 查看详情

选择器和执行选择器

...包含一组不同的数据：电话号码、地址......对于这些集合中的每一个，我都有一个模型：电话号码、地址。它们完全不同，但有一些共同点。在我的UITableView中，我有一个包含这些模型/类名的数组：NSMutableArray*class 查看详情

我们可以在单个应用程序中使用 onCreateDialog 中的不同整数同时打印时间选择器和日期吗？

】我们可以在单个应用程序中使用onCreateDialog中的不同整数同时打印时间选择器和日期吗？【英文标题】：CanweprintTimePickerandDatetogetherinsingleappusingdifferrentintegerinonCreateDialog?【发布时间】：2020-08-1814:03:54【问题描述】：包com.example.... 查看详情

子选择器后代选择器和通用选择器以及伪选择器

...用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：.firstspan{color:red;}这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器的区别，子选择器（childselector）仅是指它的... 查看详情

日期选择器和时间选择器的问题

...2011-08-2004:23:05【问题描述】：您好，我将android开发人员中的示例代码放在同一个类中，但我有一个问题@覆盖受保护的对话框onCreateDialog(intid)switch(id)caseDATE_DIALOG_ID:returnnewDatePickerDialog(this,mDat 查看详情

jquery选择器和筛选器(代码片段)

...bsp; //p,div这些都是html中的固定标签，你可以将它换成别查看详情

jQuery 类选择器和 $(this)

...描述】：我有一个要调用的插件，并使用DOM中定义的参数中的属性。例如<ahref="somewhere.html"class="my_a">blah</a>而且我有一个“盒子”插件，所以我想做$(".my_a").box(attribute1:"s 查看详情

jquery选择器和选取方法

...#test”选取id属性为”test”的元素。”blockquote”选取文档中的所有<block 查看详情

从状态中抽象选择器和动作处理程序

...2019-02-0120:33:30【问题描述】：我想知道是否可以将@State类中的@Selectors和/或@Action处理程序抽象到一个单独的文件中？随着状态越来越大并且选择器越来越复杂，我想将它们移动到一个单独的文件中以保持状态类更干净。在NGXS中... 查看详情

如何通过类、id、选择器和属性获取 DOM 元素

...问题描述】：如何按类、id、选择器(div>.my-i)和jQuery中的属性获取DOM元素？例如：<divclass="myClass"style="width:200px"><spanid 查看详情

css3之伪元素选择器和伪类选择器

伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:ho... 查看详情

css:first-child选择器和htmldomfirstchild属性

...支持:first-child选择器。注释：对于IE8及更早版本的浏览器中的: 查看详情

微信小程序如何让日历,时间选择版块弄成弹窗形式

参考技术A这个难度可不小，毕竟有动画在，建议用原生的picker，可以大大减轻开发成本查看详情