JQuery

定义

  • jQuery 是一个 JavaScript 库。
  • jQuery 极大地简化了 JavaScript 编程。
  • jQuery是一个轻量级的"写的少,做的多"的JavaScript库。源码走这里
  • jQuery产生的对象时jQuery独有的,只能自己调用

  书写规范

  基础语法: $(selector).action()        变量定义:var $variable = jQuery 对象      变量前并不强制加$符号,可以直观了解声明了一个jQuery对象

元素寻找

选择器(selector)

1、基本选择器

2、层级选择器

3、属性选择器

筛选器

1、基本筛选器

2、表单筛选器

3、内容筛选器

4、查找筛选器

更多选择器玩转

属性操作

1、基本属性操作

2、class操作

3、标签文本text/html

CSS操作

1、样式

2、位置

3、尺寸

文档处理

1、内部插入

2、外部插入

3、替换

4、删除

5、复制

循环

jQuery实现的数组循环机制

事件

1、事件

2、绑定方式

3、页面载入

4、页面处理

5、页面委派

...

6、事件委托

7、event object

动画效果

1、基点

2、滑动

3、淡入淡出

4、回调函数

扩展(插件机制)

此机制可扩展Jquery的方法或者定制一些其它的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        a{
            color: #65ff9b;
        }
    </style>
 
</head>
<body>
<div>Hello World</div>
 
<input type="checkbox">
<input type="radio" checked>
<script src="jquery-3.1.1.js"></script>
<script>
     
    // 方式一
    $.extend({
        Myprint:function (content) {
            console.log(content)
        }
    });
 
    $.Myprint(666);
 
    // 方式2
    $.fn.extend({
        check:function () {return this.each(function () {this.checked=true})},
        uncheck:function () {return this.each(function () {this.checked=false})}
 
    });
 
    $(":checkbox").check();
    $(":radio").uncheck()
     
</script>
</body>
</html>

对象访问

1
2
3
4
5
6
7
8
9
10
11
12
$.trim()         // 去除字符串两端的空格
$.each()         // 遍历一个数组或对象,for循环
$.inArray()       // 返回一个值在数组中的索引位置,不存在返回-1 
$.grep()         // 返回数组中符合某种标准的元素
$.extend()        // 将多个对象,合并到第一个对象
$.makeArray()     // 将对象转化为数组
$.type()          // 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等
$.isArray()       // 判断某个参数是否为数组
$.isEmptyObject() // 判断某个对象是否为空(不含有任何属性)
$.isFunction()    // 判断某个参数是否为函数
$.isPlainObject() // 判断某个参数是否为用"{}"或"new Object"建立的对象
$.support()       // 判断浏览器是否支持某个特性

jQuery拾遗

  hover()

// 语法
$(selector).hover(inFunction,outFunction)

// 等同于
$( selector ).mouseover( handlerIn ).mouseout( handlerOut );


参数                    描述
inFunction    必需。规定 mouseover 事件发生时运行的函数。
outFunction    可选。规定 mouseout 事件发生时运行的函数。

// DEMO

$("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});
View Code

  data()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn1").click(function(){
    $("div").data("greeting", "Hello World");
  });
  $("#btn2").click(function(){
    alert($("div").data("greeting"));
  });
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>
View Code

实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         .HA,.HE{
13             height: 900px;
14         }
15         .HA{
16             background-color: #8aab30;
17         }
18         .HE{
19             background-color: #99aecb;
20         }
21         .go_top{
22             display: inline-block;
23             position: fixed;
24             right: 30px;
25             bottom: 50px;
26             width: 39px;
27             height: 39px;
28             background: url("go_top.png") 0 78px;
29         }
30 
31         .go_top:hover{
32             background: url("go_top.png") 0 39px;
33         }
34         .hide{
35             display: none;
36         }
37 
38     </style>
39 
40 </head>
41 <body>
42     <div class="HA"></div>
43     <div class="HE"></div>
44     <a class="go_top hide" title="返回顶部"></a>
45 
46     <script src="jquery-3.1.1.js"></script>
47     <script>
48         window.onscroll = function () {
49             var xyz = $(window).scrollTop();
50             console.log(xyz);
51             if (xyz>100){
52                 $(".go_top").removeClass("hide");
53             }else {
54                 $(".go_top").addClass("hide");
55             }
56         };
57         
58         $(".go_top").click(function () {
59           $('body,html').animate({scrollTop:0},1000);
60         })
61 
62     </script>
63 </body>
64 </html>
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .square:hover{
            background-color: black;
            opacity: 0.7;
        }

        #play_img{
            height: 340px;
            width: 790px;
            position: absolute;
            left: 280px;
            top: 100px;
        }

        li{
            display: inline-block;
            list-style: none;
        }

        .hide{
            display: none;
        }

        /*圆形按钮渲染*/
        .round_click{
            width: 180px;
            height: 20px;
            position: absolute;
            border-radius: 12px;
            bottom: 20px;
            left: 300px;
            background-color: hsla(0,0%,100%,.3);
        }

        .round_click span{
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 12px;
            margin-right: 2px;
            margin-left: 2px;
            background-color: white;
        }

        .round_click .round_item{
            margin-left: 10px;
        }

        .round_click .round_item_a{
            background-color: red;
        }

        /*方形框按钮渲染*/
        .square{
            width: 30px;
            height: 60px;
            position: absolute;
            bottom: 140px;
            background-color: rgba(0,0,0,.1);

        }
        .click_right{
            right: 0;

        }

    </style>
</head>

<body>
<div id="play_img">
    <ul>
        <li class=""><img src="photo/1.png" alt=""></li>
        <li class="hide"><img src="photo/2.jpg" alt=""></li>
        <li class="hide"><img src="photo/3.jpg" alt=""></li>
        <li class="hide"><img src="photo/4.jpg" alt=""></li>
        <li class="hide"><img src="photo/5.jpg" alt=""></li>
        <li class="hide"><img src="photo/6.jpg" alt=""></li>
        <li class="hide"><img src="photo/7.jpg" alt=""></li>
        <li class="hide"><img src="photo/8.jpg" alt=""></li>
    </ul>
    <div class="round_click">
        <span class="round_item round_item_a"></span>
        <span class=""></span>
        <span class=""></span>
        <span class=""></span>
        <span class=""></span>
        <span class=""></span>
        <span class=""></span>
        <span class=""></span>
    </div>
    <div class="square click_left"></div>
    <div class="square click_right"></div>
</div>

<script src="jquery-3.1.1.js"></script>
<script>
    var $photos = $("ul li");             // 获取图片数组
    var $button = $(".round_click span"); // 获取按钮数组
    var i = 0;                            // 定义变量
    // 右击框事件
    $(".click_right").bind("click",carousel);
    // 左击框事件
    $(".click_left").bind("click",leftMove);
    // 鼠标悬浮于圆形按钮上方事件
    $button.bind("mouseover",mouseHover);
    // 自动轮播
    var s = setInterval(carousel,1000);


    // 右击框
    function carousel() {
        i++;
        if (i==$photos.length){
            i = 0;
            $photos.eq(i).removeClass("hide");
        }
        $photos.eq(i-1).addClass("hide").next().removeClass("hide");
        $button.eq(i).addClass("round_item_a").siblings().removeClass("round_item_a")
    }

    // 左击框
    function leftMove() {
        // 若按钮触发的图片定位,使用if判断进行操作标签
        if (i>0){
            $photos.eq(i).addClass("hide").prev().removeClass("hide");
            $button.eq(i-1).addClass("round_item_a").siblings().removeClass("round_item_a");
            i--;
        }else {
            i = 7;
            $photos.addClass("hide");
            $photos.eq(i).removeClass("hide");
            $button.eq(0).removeClass("round_item_a");
            $button.eq(i).addClass("round_item_a");
        }
    }

    // 圆按钮点击事件
    /*$button.click(function () {
        var $index = $(this).index();
        i = $index;
        $photos.eq($index).removeClass("hide").siblings().addClass("hide");
        $button.eq($index).addClass("round_item_a").siblings().removeClass("round_item_a")
    });*/

    // 鼠标位于元素圆按钮上方触发
    function mouseHover() {
        var $index = $(this).index();
        i = $index;
        $photos.eq($index).removeClass("hide").siblings().addClass("hide");
        $button.eq($index).addClass("round_item_a").siblings().removeClass("round_item_a");
    }

    // 鼠标悬浮和鼠标离开
    $("#play_img").hover(function () {
        clearInterval(s);
        s = undefined;
    },function () {
        s = setInterval(carousel,1000);
    })

</script>
</body>
</html>
轮播图
// offset() 方法设置或返回被选元素相对于文档的偏移坐标。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            <strong style="padding-left: 300px;;line-height: 40px">标题</strong>
        </div>
        <div style="height: 300px;">
            内容......
        </div>
    </div>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script>
    $(function () {
        $('#title').mouseover(function () {
            $(this).css('cursor','move');
        }).mousedown(function (e) {
            var _event = e || widows.event;
            var old_x = _event.clientX;
            var old_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).bind('mousemove',function (e) {
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - old_x);
                var y = parent_top + (new_y - old_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
            })
        }).mouseup(function () {
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>

拖动面板

面板拖动
面板拖动
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="HE">
    <div class="HA">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>
</div>

<script src="jquery-3.1.1.js"></script>
<script>

    // 添加文本框
    function add(self) {
        var $add_ele = $(self).parent().clone();
        // 修改子文本框html内容
        var $remove_ele = $add_ele.children("button").html("-");
        // attr() 方法设置或返回被选元素的属性和值。
        $remove_ele.attr("onclick","remove_self(this)");

        $(".HE").append($add_ele)
    }
    // 删除文本框
    function remove_self(self) {
        $(self).parent().remove();
    }

</script>
</body>
</html>
clone实例之输入框增减
// 在线进入编辑模式,样式还是可以调整的更加好看一些的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .edited{
            width: 100px;
            height: 30px;
            line-height: 30px;
            background-color: #b3b3b3;
            text-align: center;
        }

        .editting{
            background-color: #f0ad4e;
        }

        a{
            text-decoration: none;
        }

    </style>
</head>
<body>
    <div id="editbtn" class="edited">
        <a href="#">进入编辑模式</a>
    </div>
    <p></p>

    <table border="1">
        <thead>
            <tr>
                <th>蔬菜</th>
                <th>水果</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>黄瓜</td>
                <td>香蕉</td>
            </tr>
            <tr>
                <td>胡萝卜</td>
                <td>椰子</td>
            </tr>
        </tbody>
    </table>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        $(document).ready(function () {
            bindReady();
        });

        function bindReady() {
            $('#editbtn').bind('click', function () {
                if ($(this).hasClass('editting')){
                    $('#tb').find('tr').find('td').each(function () {
                        var new_text = $(this).find('input').val();
                        $(this).text(new_text)
                    });
                    $(this).removeClass('editting');
                    $(this).find('a').text('进入编辑模式');
                }else {
                    $('#tb').find('tr').find('td').each(function () {
                        var text = $(this).text();
                        var temp = "<input type='text' value='"+ text +"'>";
                        $(this).html(temp)
                    });
                    $(this).addClass('editting');
                    $(this).find('a').text('退出编辑模式')
                }
            })
        }
    </script>
</body>
</html>
在线进入编辑模式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button class="btn1">Toggle</button>
    <p>This is a Toggle.</p>


<script src="jquery-3.1.1.js"></script>

    <script>

        $(document).ready(function(){
            $(".btn1").click(function(){
                $("p").toggle(1000, function () {
                    console.log(1)
                });
            });
        });


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

 

posted @ 2019-03-17 16:41  初遇ぃ  阅读(240)  评论(0编辑  收藏  举报
//一下两个链接最好自己保存下来,再上传到自己的博客园的“文件”选项中 //一下两个链接最好自己保存下来,再上传到自己的博客园的“文件”选项中