jQuery 基础

Posted 常啸森

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 基础相关的知识,希望对你有一定的参考价值。

jQuery是个嘛玩意:

(一)选择器

 

1.基本选择器:

 

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

 

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

 

2.过滤选择器:

 

  (1)基本过滤:

 

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

 

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

 

    奇数:odd  偶数:evev

 

大于,小于,排除,奇数,偶数书写都要写在对象的里面:

 

排除:$(".div1:not(‘#div2‘)").click(function () {alert("aaa");});

 


大于:$(".div1:gt(1)").click(function () {alert("aaa")});

 

 

 

  (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>
技术分享

 


以上是关于jQuery 基础的主要内容,如果未能解决你的问题,请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)

几个有用的JavaScript/jQuery代码片段(转)

几个非常实用的JQuery代码片段