2017-6-4 JQuery中的選取器和動畫彈窗遮罩

最後更新：2017-06-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：title width 顯示 script html 偶數 yellow last 防止

（一）選取器

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>

2017-6-4 JQuery中的選取器和動畫彈窗遮罩

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More