jQuery

2017-07-04 本文已影响131人一只写程序的猿

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文档

官方api文档：英文版本，如果你使用的技术是最新的技术，用到了新的特性，此时就需要从官方文档中查看新特性的使用方式。
在线中文API手册 / 在线中文API手册：可以通过在线API中文手册，查看jquery中函数的使用方式
离线API中文手册：点击链接自行下载，开发过程中我们的必备手册！

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>

效果展示：

图片翻转特效

jQuery

1.jQuery简介及使用

2.jQuery语法

3.jQuery选择器

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

猜你喜欢

热点阅读