2017-6-4 the selector and animated popup masks in jquery

(i) Selector

1. Basic selector:

ID Selector: # class selector:. Tag Selector: Label name

Descendant selectors: With, separating descendant selectors: separated by a space

2. Filter selector:

(1) Basic filtration:

First:: First tail:: Last of any:: EQ (index number)

Greater than:: GT (index number) less than:: LT (index number) Exclude:: Not (selector)

Odd:: Odd even:: Evev

(2) Attribute filtering:

Property name filtering: [Property Name] property value filtering: [Property name = value] [property name!] = value]

(3) Content filtering

Text:: Contains ("string") child element:: Has ("selector")

(ii) animation

1.show (); Hide (); ----Show and hide

Example: Click on the button to realize the hiding and display of Div　　　　

<script type="Text/javascript">    $("#but"). Click (function () {if($("#div1"). CSS ("Display") =="Block") {            $("#div1"). Hide (); }        Else        {            $("#div1"). Show (); }    });</script>

2.slideDown (), drop the effect; Slideup () roll-up effect roller shutter effect,

Cases:

<script type="Text/javascript">    $("#but"). Click (function () {if($("#div1"). CSS ("Display") =="Block") {            $("#div1"). Slideup (); }        Else        {            $("#div1"). Slidedown (); }    });</script>

3.fadeIn (), Fade in FadeOut () fade-out effect

Cases:

<script type="Text/javascript">    $("#but"). Click (function () {if($("#div1"). CSS ("Display") =="Block") {            $("#div1"). FadeOut (); }        Else        {            $("#div1"). FadeIn (); }    });</script>

4. Custom animations:

1. Format: Animate ({left: "300px", Top: "300px"},3000,function () {callback function})

2. Stop the animation to prevent the animation from accumulating:. Stop ();

apply to create a popup mask:

CSS style code:

#xws_tc {width:340px; Background-Color:white; Left: -%; Margin-left:-170px; Position:fixed; Top:-500px; Border-radius:10px; Z-index: One;} #xws_top {background-Color:yellow;    height:35px; Font-size:20px; Font-Weight:bold; Text-Align:center; Line-height:35px; Border-radius:10px 10px0 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: -%; Margin-left:-50px; Font-size:22px;    Cursor:pointer;} #xws-Bottom:hover {background-color:red; } #zhezhao {height: -%; Width: -%; Background-Color:black;    Display:none; Position:fixed;    top:0px;    left:0px; Opacity:0.3; Z-index:Ten;}

Page code:

<%@ Page language="C #"autoeventwireup="true"codefile="Default.aspx.cs"inherits="_default"%><! DOCTYPE html>"http://www.w3.org/1999/xhtml">"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>"Form1"runat="Server"> <input type="Button"Value="Click"Id="XWS-BT"/> <div id="XWS_TC"> <div id="Xws_top"> here is the title </div> <div id="Xws-center">AH sofa sofa A scholar-bureaucrat Safa punk Saada four Satan Caesar Real Deal master reached on time greatly</div> <div id="Xws-bottom">Determine</div> </div> <div id="Zhezhao"></div> </form></body>"Text/javascript">//button's Click event$("#xws-BT"). Click (function () {Myalert ("Oh, hello.","Welcome to my house.");    }); //Window Popup Methodfunction Myalert (A, b) {//assign a value to a title and content$("#xws_top"). HTML (a); $("#xws-center"). html (b); //pop-up window popup$("#xws_tc"). Stop (). Animate ({top:"100px"}, -). Animate ({top:"90px"}, -). Animate ({top:"100px"}, $); $("#zhezhao"). CSS ("Display","Block"); }    $("#xws-bottom"). Click (function () {$ ("#xws_tc"). Stop (). Animate ({top:"110px"}, -). Animate ({top:"-500px"}, -, Function () {$ ("#zhezhao"). CSS ("Display","None");           }); });</script>

　　　　

2017-6-4 the selector and animated popup masks in jquery