首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示

jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示

作者头像
Python攻城狮
发布2018-08-23 11:38:57
2.2K0
发布2018-08-23 11:38:57
举报
文章被收录于专栏:Python攻城狮Python攻城狮

1.jQuery简介及使用

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。(write less,do more.)

jQuery 库包含以下特性:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

我用的是jQuery1.12.4版本

uncompressed:未压缩版本,适用于开发环境,方便查看源代码 minified:压缩版本,适用于生产环境

jQueryapi文档

2.jQuery语法

通过 jQuery,可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

基础语法是:$(selector).action()$(“#btn”) == jQuery(“#btn”)

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例: $(this).hide() 隐藏当前元素 $("p").hide() 隐藏所有段落 $(".test").hide() 隐藏所有 class="test" 的所有元素 $("#test").hide() 隐藏所有 id="test" 的元素

3.jQuery选择器

  • jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 <p> 元素。 $("p.intro")选取所有 class="intro" 的 <p> 元素。 $("p#demo") 选取所有 id="demo" 的 <p> 元素。

  • jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

  • jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 div 元素的背景颜色更改为红色: $("div").css("background-color","red") 简洁操作: $("#box").css("border", "solid 1px red"); 标准操作:

$("#box").css({
            "border":"solid 1px red",
            "background":"#efefef"
            })

注意:样式尽量写在css中,通过标签的class属性来控制使用不同的样式 如果是动态递增变化的样式,可以通过JS代码进行处理。

  • 内容操作

常规开始标签和结束标签中间的内容操作 var $boxValue = $("#box").text(); $("#box").text("添加的内容") 表单元素的数据 var $name = $("#username").val();

  • 属性操作

var $id = $("#box").attr("id") $("#box").attr("id", "container")

选择器

实例

选取

*

$("*")

所有元素

#id

$("#lastname")

id="lastname" 的元素

.class

$(".intro")

所有 class="intro" 的元素

element

$("p")

所有 <p> 元素

.class.class

$(".intro.demo")

所有 class="intro" 且 class="demo" 的元素

:first

$("p:first")

第一个 <p> 元素

:last

$("p:last")

最后一个 <p> 元素

:even

$("tr:even")

所有偶数 <tr> 元素

:odd

$("tr:odd")

所有奇数 <tr> 元素

:eq(index)

$("ul li:eq(3)")

列表中的第四个元素(index 从 0 开始)

:gt(no)

$("ul li:gt(3)")

列出 index 大于 3 的元素

:lt(no)

$("ul li:lt(3)")

列出 index 小于 3 的元素

:not(selector)

$("input:not(:empty)")

所有不为空的 input 元素

:header

$(":header")

所有标题元素 <h1> - <h6>

:animated

所有动画元素

:contains(text)

$(":contains('W3School')")

包含指定字符串的所有元素

:button

$(":button")

所有 type="button" 的 <input> 元素

:image

$(":image")

所有 type="image" 的 <input> 元素

$(this)

当前 HTML 元素

4,jQuery 事件函数及效果显示

jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 <head>部分的事件处理方法中.

$("selector").show显示 HTML 元素 $("selector").hide隐藏 HTML 元素 $("selector").toggle(speed,callback)显示 / 隐藏HTML 元素

  • 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback)

  • 必需的 params 参数定义形成动画的 CSS 属性。
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是动画完成后所执行的函数名称。

代码操作:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动画效果展示</title>
    <style type="text/css">
        #box{width:200px;height: 200px;background: red;position: absolute;top: 50px;left: 0px;}
    </style>
    <script src="../jquery-1.12.4.js">
    </script>

    <script>
        $(function(){
            $("#btn_show").click(function(){
                $("#box").show(1000);
            })

            $("#btn_hide").click(function(){
                $("#box").hide(1000);
            })

            $("#btn_toggle").click(function(){
                $("#box").toggle(1000);
            })

            $("#btn_slideDown").click(function(){
                $("#box").slideDown(1000);
            })

            $("#btn_slideUp").click(function(){
                $("#box").slideUp(1000);
            })


            $("#btn_slideToggle").click(function(){
                $("#box").slideToggle(1000);
            })

            $("#btn_fadeIn").click(function(){
                $("#box").fadeIn(1000);
            })

            $("#btn_fadeOut").click(function(){
                $("#box").fadeOut(1000);
            })

            $("#btn_fadeToggle").click(function(){
                $("#box").fadeToggle(1000);
            })

            $("#btn_fadeTo").click(function(){
                $("#box").fadeTo(1000,0.5);
            })

            $("#btn_animate").click(function(){
                $("#box").animate({left:"500px",top:"100px",width:"100px",height:"50px"},1000)
                        .animate({top:"400px",left:"300px"},2000)
            })
        })
    </script>

</head>
<body>
    <button id="btn_show">显示</button>
    <button id="btn_hide">隐藏</button>
    <button id="btn_toggle">显示/隐藏 状态切换</button>
    
    <button id="btn_slideDown">卷帘显示</button>
    <button id="btn_slideUp">卷帘隐藏</button>
    <button id="btn_slideToggle">卷帘显示/隐藏 状态显示</button>

    <button id="btn_fadeIn">透明度显示</button>
    <button id="btn_fadeOut">透明度隐藏</button>
    <button id="btn_fadeToggle">透明度显示/隐藏 状态切换</button>
    <button id="btn_fadeTo">切换到指定的透明度</button>

    <button id="btn_animate">自定义动画</button>
    <div id="box"></div>
</body>
</html>

效果展示

  • 图片轮播特效

代码操作:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图动态展示</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px}
        #box{margin:10px auto;padding: 5px;position: relative;left: 400px;}

        #box img{position:absolute;border:solid 2px #888;padding:5px;border-radius: 5px;vertical-align:bottom;display:none;}
        #box img:nth-child(1){display: block;}
    </style>
    <script src="../jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            var _index = 0; //当前正在展示的图片的下标

            //计时函数 2s更换一次图片
            setInterval(function(){
                var _next = _index + 1;  //下一张要展示的图片的下标
                if(_next >= 5){
                    _next = 0;
                }

                $("img").eq(_index).fadeOut(1000); //隐藏当前图片
                $("img").eq(_next).fadeIn(1000); //显示下一张图片

                _index ++;
                if(_index >= 5){
                    _index = 0;
                }

            },2000)

        })

    </script>

</head>
<body>
    <div id="box">
        ![](images/psb (10).jpg)
        ![](images/psb (12).jpg)
        ![](images/psb (3).jpg)
        ![](images/psb (4).jpg)
        ![](images/psb (5).jpg)
        ![](images/psb (6).jpg)
        ![](images/psb (37).jpg)
        ![](images/psb (32).jpg)

    </div>
</body>
</html>

效果展示:

图片轮播特效

  • 导航栏上下滑动效果
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>导航栏滑动卷帘效果</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        .nav{list-style: none;height: 50px;background-color: #069}
        .nav>li{float: left;height: 50px;font-size: 20px;color: #fff;width: 120px;text-align: center;line-height: 50px;}

        .nav > li > ul{list-style: none;width: 120px;background: #E0E0E0;display: none;}
        .nav > li > ul > li{height: 50px;line-height: 50px;color: #333;font-size: 18px;width: 120px;}
    </style>
    <script type="text/javascript" src="../jquery-1.12.4.js"></script>

    <script type="text/javascript">
        $(function(){
            // 这里面的代码,是当页面中的标签加载完成后执行的
            $("li").mouseenter(function(){
                $(this).children().last().stop(true).slideDown("slow");
            });

            $("li").mouseleave(function(){
                $(this).children().last().stop(true).
                    slideUp("slow");
            })
        })

    </script>

</head>
<body>
    <ul class="nav">
        <li><span>首页</span>
            <ul>
                <li>国内要闻</li>
                <li>国际要闻</li>
            </ul>
        </li>
        <li><span>娱乐</span>
            <ul>
                <li>电竞</li>
                <li>影视</li>
                <li>明星</li>
                <li>综艺</li>
                <li>时尚</li>
            </ul>
        </li>
        <li><span>社会</span>
            <ul>
                <li>财经</li>
                <li>互联网</li>
                <li>房产</li>
                <li>经济</li>
            </ul>
        </li>
        <li><span>图片</span>
            <ul>
                <li>美女</li>
                <li>风景</li>
                <li>动漫卡通</li>
                <li>汽车</li>
                <li>萌宠</li>
            </ul>
        </li>
        <li><span>IT</span>
            <ul>
                <li>javascript</li>
                <li>Html/css</li>
                <li>C++</li>
                <li>PHP</li>
                <li>python</li>
            </ul>
        </li>
    </ul>
</body>
</html>

效果:

导航栏滑动效果展示

  • 图片翻转效果
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片翻转</title>
<!--    <style type="text/css">
        *{margin: 0;padding: 0;}
        #box{width: 400px;height: 200px;border:solid 2px #888;border-radius: 8px;margin: 20px auto;padding: 3px;position: relative;}

        /*#box img{display:block;width:400px;height: 190px;
            position: absolute;top:6px;}*/
        #box img{width: 400px;border-radius:3px;position:absolute;}

/*      #box img:nth-child(2){height:0;}*/
    </style> -->


    <style type="text/css">
        *{margin: 0;padding: 0;}
        #box{margin: 50px auto;width: 400px;height: 200px;padding: 5px;border:solid 1px #888;position: relative;}


        #box img{width: 400px;height:198px;border-radius:8px;position:absolute;}

        #box img:nth-child(2){height:0;}
    </style>


    <script type="text/javascript" src="../jquery-1.12.4.js"></script>
    
    <script type="text/javascript">
        $(function(){
            // 当页面中所有标签全部加载完成的时候,执行的代码
            $("#box").mouseenter(function(){
                var $that = $(this);
                // 隐藏第一张图片
                $that.children().first().stop(true).animate({
                    top:"100px",height:"0px"},1000,function(){
                        // 显示第二张图片
                        $that.children().last().css({
                            top:"100px"}).stop(true).animate({
                                top:"5px",height:"200px"},1000);

                });
            });

            $("#box").mouseleave(function(){
                var $that = $(this);
                // 隐藏第二张图片
                $that.children().last().stop(true).animate({
                    top:"100px",height:"0px"},1000,function(){
                        // 显示第一张图片
                        $that.children().first().css({
                            top:"100px"}).stop(true).animate({
                                top:"5px",height:"200px"},1000);
                });
            });
        })

    </script>

</head>
<body>
    <div id="box">
        ![](images/bsj1.jpg)
        ![](images/bsj2.jpg)
    </div>
</body>
</html>

效果展示:

图片翻转特效

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.07.04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.jQuery简介及使用
  • 2.jQuery语法
  • 3.jQuery选择器
  • 4,jQuery 事件函数及效果显示
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档