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

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>

效果展示:

图片翻转特效

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏抠抠空间

CSS基础

一、CSS简介 css概念     CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。     当浏览器读到一个样...

2748
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(一)选择器

CSS 全称为 Cascading Style Sheets,中文翻译为“层叠样式表”,简称 CSS 样式表,所以称之为层叠样式表(Cascading Styl...

984
来自专栏学海无涯

Android开发之自定义View(一)

Android常见的自定义控件有三种方式: 继承View 继承原有的控件,在原有控件的基础上进行修改 重新拼装组合 今天先来简单说一说第一种也是最复杂的一种~~...

2907
来自专栏超然的博客

自定义按钮~自适应布局~常见bug

2002
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

3526
来自专栏黑泽君的专栏

day01_html学习笔记

1881
来自专栏黑泽君的专栏

day02_css学习笔记

842
来自专栏肖洒的博客

前端入门学习--HTML

写在前面。 前端知识真的还是比较有用的。一直要把前端的学习提上日程,因为各种事情各种拖延,写爬虫的时候也是捎带学习前端的东西,还是需要系统的了解下。 All ...

2503
来自专栏前端小叙

Vue slot简单理解

情形一: 子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序 子组件: Vue.component('child'...

4516
来自专栏余生开发

插件集--页面滚动scrollreveal.js

scrollReveal.js 不依赖其他任何文件。不支持 IE10 以下 基本方法

2704

扫码关注云+社区

领取腾讯云代金券