jquery全解（1）

最新推荐文章于 2018-05-31 10:40:39 发布

Cc_JoJo

最新推荐文章于 2018-05-31 10:40:39 发布

阅读量209

点赞数 1

分类专栏： web前端文章标签： jquery

本文链接：https://blog.csdn.net/caohoucheng/article/details/73291817

版权

web前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本章内容

这里写图片描述

1.jquery语法

这里写图片描述
jquery的使用
在<head></head>里引用jquery.js

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引用jquery.js -->
    <script src="jquery.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>

jquery 符号
$(“选择器”).动作()
$(“div”).animate({opacity:0},3000);
注：选择器名要加引号
例如操作一个div

<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{width: 100px;height: 100px;background: red;}
</style>
<!-- 引用jquery.js -->
    <script src="jquery.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        //$("选择器").动作(变化，时间) 
        $("div").animate({opacity:0},3000);
    </script>
</body>
</html>

2.juqery效果

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<style>

div{width: 100px;height: 100px;background: red;}
</style>
<!-- 引用jquery.js -->
    <script src="jquery.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        // $("div").animate({opacity:0},3000);//渐变
        // $("div").hide(3000)//隐藏
        // $("div").show(3000)//显示
        // $("div").fadeOut(2000)//淡出
        // $("div").fadeIn(3000)//淡入
        $("div").slideUp(2000)
        $("div").slideDown(3000)

    </script>
</body>
</html>

渐变：
这里写图片描述
隐藏与显示：

淡出与淡入

滑动（滑上滑下）

3.事件

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="点我">
    <script>
    //点击
    $("input").click(

            function(){
                document.title="这是标题位置"
            }
        )
    //双击
    $("input").dblclick(

            function(){
                document.title="这是标题位置"
            }
        )

        //鼠标进入
        // $("input").mouseenter(

        //  function(){
        //      document.title="这是标题位置"
        //  }
        // )
        //鼠标滑出
        // $("input").mouseleave(

        //  function(){
        //      document.title="aaa"
        //  }
        // )
    </script>
</body>
</html>

4.方法

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<style>


</style>
    <script src="jquery.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <script>
        //点击位置为1的input（即第二个input）
        $("input:eq(1)").click(
            function(){
                $("input:eq(1)").hide();
                //第一个input消失
                //$("input:first").hide();
                //第二个input消失
                //$("input:last").hide();
            }
            )

    </script>
</body>
</html>

这里写图片描述

5.html操作（捕获【拿】和设置【给】）

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>
    <input type="text" value="">
    <input type="button" value="提交">
</div>
<script>
//点击按钮title显示input的value值
$("input:eq(1)").click(
    function(){
        document.title=$("input:eq(0)").val()
    }
    )

</script>

</body>
</html>