10、第九 - WEB开发基础 - jQuery的常用方法 - C.Q&CHEN

10、第九 - WEB开发基础 - jQuery的常用方法

　　简单介绍 Jquery 在html中的常用的方法。

一、jQuery 的版本选择

Jquery 其实，及时一个模块，简单来说就是类库，是DOM/BOM/JavaScript的类库。

　　由于版本兼容问题的，在版本选择上，使用 1.12 或者 2.2.4 版本比较稳定使用。下载链接：https://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/ (注意练习的时候，可以使用jquery-1.12.4.js，应用到线上则要使用 jquery-1.12.4.min.js 就是min版本)，以下使用 1.12 版本做为练习。

DOM与jQuery 的关系转换：

jQuery对象[0] => Dom对象
Dom对象 => $(Dom对象)

操作如下：

<body>
    <div id="c1">
        <a>chen1</a>
    </div>
    <div id="c2">
        <div class="chen1">
            <a>chen2</a>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>

console终端操作
>d=document.getElementById('c1')
	<div id='c1'>
		<a>chen1</a> 
	<div>
>$(d)[0]
	<div id='c1'>
		<a>chen1</a> 
	<div>
>$(d)[0].getElementsByTagName('a')[0]
  <a>chen1</a>
>d.getElementsByTagName('a')[0]
 <a>chen1</a>

二、jQuery 选择器

　　jQuery 其实，及时一个模块，简单来说就是类库，是DOM/BOM/JavaScript的类库。jQuery的html操作，案例可参考链接：http://jquery.cuishifeng.cn/

元素的查找：jQuery: http://jquery.cuishifeng.cn/ 有具体实际操作案例，对应的操作可进行，模拟参考。

Document的查找的方法：
	ByID、ByTagName、tag等10个左右的方法进行查询
jQuery 的选择器（常用标签使用)： 对应的html ID\class\，对应语法 $('#id') 等同于document.getElementById('id')
	A、基本操作
		1、ID.      如：$('#i10')
		2、class    如：$('.c2')
		3、tag      如：$('a')
		4、组合标签  如：$('a,.c2,#i10')

    B、层级选择器
        $('#i10 a')  找到ID下面的所有a标签
    C、基本筛选器
        :first    查找筛选出来的第一个标签
        :last     查找筛选出来的最后一个标签
        :eq()     根据索引值进行查找，进行数值判断 如 :eq(>3)
    D、属性查找
        $('[chen]')    具有chen属性的所有标签
        $('[chen="123"]')  chen属性等于123标签

        对应表单选择器，其实也可以通过属性找到
         <input type='text'>
         <input type='feil'>
         <input type='password'>

         $("input[type='text']")
         $(':text')

        补充：
        表单对象属性
            enable  默认允许输入
            disable 不允许输入
        举例：
        <input type='text' >  默认的模式就是enable
        <input type='text' disable>  输入框变成灰色，不允许填写

案例：操作表框多选、反选、取消（反选操作，提供了三种方法）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" width="150px">
        <thead>
            <input type="button" value="全选" onclick="checkAll()">
            <input type="button" value="反选" onclick="resAll()">
            <input type="button" value="取消" onclick="cacelAll()">
        </thead>
        <tbody>
            <tr >
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
             <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $(':checkbox').prop('checked',true);
        }
        function cacelAll() {
            $(':checkbox').prop('checked',false);
        }
        function resAll() {
            $(':checkbox').each(function (k) {
                //可以实现反选规则，这里列举了几种方法。

                //第一种：Document的方法
                /*
                if (this.checked) {
                    this.checked = false;
                }else{
                    this.checked = true;
                }
                */

                //第二种：使用jQuery
                if($(this).prop('checked')){
                    $(this).prop('checked',false);
                }else{
                    $(this).prop('checked',true);
                }

                //第三种：三元运算方法
                /*
                var v=$(this).prop('checked')?false:true;
                $(this).prop('checked',v)
                */
            });
        }
    </script>
</body>
</html>

三、jQuery 筛选器

　　jQuery 筛选器的使用，可参考链接：http://jquery.cuishifeng.cn

主要使用筛选器有：

$(this).next() 下一个
$('#i1').nextAll() 查找下一个所有的标签
$('#i1').nextUntil(‘#ii1’) 向上查找中指定范围区间查找
$(this).prev() 上一个
$('#i1').prevAll() 查找上一个所有的标签
$('#i1').prevUntil(‘#ii1’) 向上查找中指定范围区间查找
$(this).parent() 父级标签
$(this).parents()
$(this).parentsUntil()
$(this).children() 子标签
$(‘#i1’).siblings() 兄弟标签（同级别相邻标签）
$(‘#i1’).find('.content') 在ID为i1的标签的里，查找样式为 .content 的标签。
$(this).eq(index|-index)
$(this).first()
$(this).last()
$(this).hasClass(class) 判断是否有这个对应的样式

备注：$(this) 表示目前所在标签位置。

案例一：Tab左边下拉框，弹出及隐藏的设计

主要实现位置为，jQuery 的导入，及标签修改打获取调用的两种方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: blue;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="width: 200px; height: 400px;border: 1px solid #dddddd ">
        <div class="item">
            <div class="header">标题一</div>
            <div class="content ">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){
            //第一种：链式编程
            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
            //第二种：分步式
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.content').addClass('hide');
        })

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

案例二：模态编辑框

jQuery 文本操作

$('.itme').text() #获取文本内容。备注，这个位置：$('item').innerText
$('.itme').text('<a>1</a>') 设置的文件内容
$('.itme').html() #获取文本内容备注，这个位置：$('item').innerHtml
$('.itme').html('<a>1</a>') 设置的文件内容
$('.item').val()
$('.item').val(..)

代码案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }
        .modal {
            position: fixed;
            top:50%;
            left: 50%;
            width: 500px;
            height: 200px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow {
            position: fixed;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            margin-left: 0;
            margin-top: 0;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <table border="1" width="200px">
        <thead>
            <input type="button" value="添加" onclick="addElement()">
        </thead>
        <tbody>
            <tr >
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
                <td>
                    <a class="edit">编辑</a>|<a>删除</a>
                </td>

            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.2</td>
                <td>80</td>
                <td>
                    <a class="edit">编辑</a>|<a>删除</a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.3</td>
                <td>80</td>
                <td>
                    <a class="edit">编辑</a>|<a>删除</a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.4</td>
                <td>80</td>
                <td>
                    <a class="edit">编辑</a>|<a>删除</a>
                </td>
            </tr>
             <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.5</td>
                <td>80</td>
                <td>
                    <a class="edit">编辑</a>|<a>删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="modal hide">
        <div>
            <input name="hostname" type="text">
            <input name="port" type="text">
        </div>
        <div>
            <input type="button" value="取消" onclick="cacleModal();">
            <input type="submit" value="确认" onclick="subHide();">
        </div>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function addElement() {
            $('.modal,.shadow').removeClass('hide');
        }
        function cacleModal() {
            $('.modal,.shadow').addClass('hide');
            $('.modal input[type="text"]').val('');
        }
        function subHide() {
            $('.modal,.shadow').addClass('hide');
        }

        $('.edit').click(function () {
            //this 现在的位置是在 edit编辑的位置上
            $('.modal,.shadow').removeClass('hide');

            //循环获取tds中的内容
            //获取<td>文本中的信息
            var tds = $(this).parent().prev();
            var port = $(tds)[0].innerText;
            var host = $(tds).prev()[0].innerText;

            //赋值给input标签中value
            $('.modal input[name="hostname"]').val(host);
            $('.modal input[name="port"]').val(port);

        });
    </script>
</body>
</html>

四、jQuery 样式及属性操作

　　jQuery 属性及样式操作。可参考链接：http://jquery.cuishifeng.cn

样式操作：

addClass()
removeClass()
toggleClass()

案例：做个开关按钮(开：显示文字；关，文字关闭显示)

提供了两种方法，可以模拟使用、效果一致。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id="i1" type="button" value="开关">
    <div class="c1 hide">chen1203</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            /*
         第一种方法：使用if语句去判断，没有就加上、有就去掉。
            if ($('.c1').hasClass('hide')) {
                $('.c1').removeClass('hide');
            }else{
                $('.c1').addClass('hide');
            }
            */
       //第二种方法：使用toggleClass去判断，没有就加上、有就去掉。（代码比较简洁）

            $('.c1').toggleClass('hide')
        })

    </script>

</body>
</html>

属性操作：
#专门用于做自定义属性

$(..).attr(‘n’) 查询属性
$(..).attr(‘n’,'v') 添加属性
$(..).removeAttr('n') 移除属性

#专门用于chekbox，radio

$(..).prop('checked')
$(..).prop('checked',true)
测试验证：<input type='checkbox' id='i1' />

　附加：

index 获取索引位置

案例：模拟TAB切换菜单

代码的如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu {
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .menu .menu_item{
            float: left;
            border-right: 1px solid red;
            padding: 0.5px;
            cursor: pointer;
        }
        .content {
            min-height: 100px;
            border:1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="menu_item active" a="1">菜单一</div>
        <div class="menu_item "a="2">菜单二</div>
        <div class="menu_item "a="3">菜单三</div>
    </div>
    <div class="content">
        <div b="1">内容一</div>
        <div class="hide" b="2"> 内容二</div>
        <div class="hide" b="3"> 内容三</div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu_item').click(function () {
            //第一种方法：通过属性获取值
            var target = $(this).attr('a');
            $('.content').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide');
            //第二种方法：可以通过索引去匹配
            $(this).addClass('active').siblings().removeClass('active');
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
        });
    </script>
</body>
</html>

五、jQuery 文档处理

　　jQuery 文档处理的的，常使用的增、删操作如下：(可参考链接：http://jquery.cuishifeng.cn)

文本内容的处理：

append() 在子标签的后面做添加
prepend() 在子标签的前面做添加
after() 指定业务某个位置在后面做添加
before() 指定业务某个位置在前面做添加
remove() 删除指定的标签
empty() 清除标签里面的内容
clone() 复制、克隆

案例一、如下：通过按钮添加数据到标签列表中，在通的索引测试从中删除

代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div>
        <input id="t1"  type="text"  />
        <input id="sub" type="submit" value="提交">
        <input id="del" type="submit" value="删除">
    </div>
    <div id="u1">
        <li>1</li>
        <li>2</li>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //获取t1信息做文档添加使用
        $('#sub').click(function () {
            var temp = $('#t1').val();
            $('#u1').append("<li>"+temp+"</li>");
        });
        //根据索引做删除操作
        $('#del').click(function () {
            var index = $('#t1').val();
            $('#u1 li').eq(index)[0].remove();
        })

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

案例二：模态编辑框（终极版，可以添加数据、删除、编辑）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }
        .modal {
            position: fixed;
            top:50%;
            left: 50%;
            width: 500px;
            height: 200px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow {
            position: fixed;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            margin-left: 0;
            margin-top: 0;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <table border="1" width="200px">
        <thead>
            <input type="button" value="添加" onclick="addElement()">
        </thead>
        <tbody id="tb">
            <tr >
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
                <td>
                    <a class="edit">编辑</a>|<a class="del">删除</a>
                </td>

            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td target="ip">1.1.1.2</td>
                <td target="port">80</td>
                <td>
                    <a class="edit">编辑</a>|<a class="del">删除</a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td target="ip">1.1.1.3</td>
                <td target="port">80</td>
                <td>
                    <a class="edit">编辑</a>|<a class="del">删除</a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td target="ip">1.1.1.4</td>
                <td target="port">80</td>
                <td>
                    <a class="edit">编辑</a>|<a class="del">删除</a>
                </td>
            </tr>
             <tr>
                <td><input type="checkbox"></td>
                <td target="ip">1.1.1.5</td>
                <td target="port">80</td>
                <td>
                    <a class="edit">编辑</a>|<a class="del">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="modal hide">
        <div>
            <input id="inIp" name="ip" type="text">
            <input id="inPort" name="port" type="text">
        </div>
        <div>
            <input type="button" value="取消" onclick="cacleModal();">
            <input type="button" value="确定" onclick="subHide();">
        </div>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //点击添加的时候，可以手工录入数据
        function subHide() {

            $('.modal,.shadow').removeClass('hide');
            var tr = document.createElement('tr');

            var td1 = document.createElement('td');
            td1.innerHTML = '<input type=\"checkbox\">';

            var td2 = document.createElement('td');
            td2.innerHTML = $('#inIp').val();

            var td3 = document.createElement('td');
            td3.innerHTML = $('#inPort').val();

            var td4 = document.createElement('td');
            td4.innerHTML = "<a class=\"edit\">编辑</a>|<a class=\"del\">删除</a>";

            $(tr).append(td1);
            $(tr).append(td2);
            $(tr).append(td3);
            $(tr).append(td4);

            $('#tb').append(tr);

            $('.modal,.shadow').addClass('hide');
        };

        //点击删除，可以删除数据
        $('.del').click(function () {
             $(this).parent().parent().remove()
        });
        
        //处理添加按钮
        function addElement() {
            $('.modal,.shadow').removeClass('hide');
        }
        
        //处理副业的取消按钮
        function cacleModal() {
            $('.modal,.shadow').addClass('hide');
            $('.modal input[type="text"]').val('');
        }

        //每行数据的编辑按钮
        $('.edit').click(function () {
            
            //this 现在的位置是在 edit编辑的位置上
            $('.modal,.shadow').removeClass('hide');

            //循环获取tds中的内容
            //获取<td>文本中的信息
            var tds = $(this).parent().prev();
            var port = $(tds)[0].innerText;
            var host = $(tds).prev()[0].innerText;

            //赋值给input标签中value
            $('.modal input[name="ip"]').val(host);
            $('.modal input[name="port"]').val(port);

        });
    </script>
</body>
</html>

效果：

六、jQuery 位置及高度

jQuery 对边框位置的设置及高度摆放。

解析：

高度及位置操作：
$(window).scrollTop() 获取 
$(window).scrollTop(0) 设置
scrollLeft([val]) 

offset().left   指定标签在html的坐标
offset().top    指定标签在html的坐标

position()     指定标签相对父标签（relative）标签的坐标
<div style='relative'>
	<div>
		<div id='i1' style='position:absolute; height:80px;border:1px'></div>
	</div>
</div>	
$('i1').height() 			#获取标签的高度，纯高度
$('i1').innerHeight()		#获取边框及纯高度、内边距
$('i1').outerHeight()	    #获取边框及纯高度、外边距

案例一：通过CSS处理，模拟后台点赞按钮操作

CSS处理：

$('t1').css('样式名称'，‘’样式值)

点赞(涉及到知识点)：

- $('t1').append()
- $('t1').remove()
- setInterval(定时器)，及取消定时器
- 透明度 1 > 0
- position
- 字体大小，位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 10px;
            border: 1px solid #eeeeee;
            margin-right: 96%;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            AddFaver(this);
        });

        function AddFaver(self) {
            //Dom 对象
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;

            var tag = document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','green');
            $(tag).css( 'position','absolute');
            $(tag).css( 'fontSize',fontSize + "px");
            $(tag).css( 'right',right + "px");
            $(tag).css( 'top',top + "px");
            $(tag).css( 'opacity',opacity );

            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize +10;
                top = top -10;
                right = right -10;
                opacity = opacity - 0.1;

                $(tag).css( 'fontSize',fontSize + "px");
                $(tag).css( 'right',right + "px");
                $(tag).css( 'top',top + "px");
                $(tag).css( 'opacity',opacity );
                $(tag).css( 'margin-right','96%');
                $(tag).css( 'margin-top','50px');
                if (opacity < 0){
                    clearInterval(obj);
                    $(tag).remove()
                }
            },40)
        }
    </script>
</body>
</html>

效果：

七、jQuery 事件绑定

　　jQuery事件绑定的方式：

事件

DOM：绑定方式也有三种方式

jQuery:

$('.c1').click(funtcion(){})
$('.c1')...........
$('.c1').bind('click',function(){})
$('.c1').unbind('click',function(){})
$('.c1').delegate('a','click',function(){})
$('.c1').undelegate('a','click',function(){})
$('.c1').on('click',function(){})
$('.c1').off('click',function(){})

案例一：关于事件绑定的几种测试方法。（对于测试功能对于新增加的内容也能弹出提示框（使用delegate参数））

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text" />
    <input id="a1" type="button" value="添加" />
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>

        $('#a1').click(function () {
            var  v = $('#t1').val();
            var temp = '<li>' + v  +  '</li>';
            $('#u1').prepend(temp);
        });
        
//        $('#u1 li').click(function () {
//            var v = $(this).text();
//            alert(v)
//        });

//         $('#u1 li').bind('click',function () {
//            var v = $(this).text();
//            alert(v)
//        });

//          $('#u1 li').on('click',function () {
//           var v = $(this).text();
//            alert(v)
//        });

          $('#u1').delegate('li','click',function () {
           var v = $(this).text();
            alert(v)
        });

    </script>
</body>

案例二：事件阻止，两种调用方式，如下：

<body>
    <a onclick="return ClickOn()" href="https:www.baidu.com">第一种方法</a>
    <a id="i1" href="https:www.baidu.com">第二种方法</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ClickOn() {
            alert(123);
            return true;  //自定义的事件，优先级高于 href，所以返回true 在执行下一步，先会执行在返回跳转到百度
        };

        $('#i1').click(function () {
            alert(456);
            return false; //自定义的事件，优先级高于 href，所以返回false 停止下一步的执行
            }
        })
    </script>
</body>

案例三：终极案例，表单验证，在没有输入信息时，提示必填内容或者错误项

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <form id="f1" action="s3.html" method="post">
        <div><input name="n1" type="text" /> </div>
        <div><input name="n2" type="password" /> </div>
        <div><input name="n3" type="text" /> </div>
        <div><input name="n4" type="text" /> </div>
        <div><input name="n5" type="text" /> </div>

        <input type="submit" value="提交" />

    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {
            $('.error').remove();

            var flag = true;
            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val(); //循环取input的值
                if(v.length <= 0){
                    flag=false;
                    var tag = document.createElement('span');
                    tag.className = 'error';
                    tag.innerHTML = '必填';
                    $(this).after(tag);
                }
            });
            return flag;
        })
    </script>
</body>

效果：没有填写信息的，提示必填

八、jQuery 扩展及函数调用

　jQuery 扩展常用方法：

- $.extend # $.方法
- $.fn.extend # (..).方法

　　(function(){
　　　　var status =1;
　　　　// 封装变量
　　})

举例一：编写jQuery 函数，使用extend编写自己的函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script >
        //设定jQuery函数值
        $.extend({
            'chen1203':function () {
                return '123456789';
            }
        });
        //调用函数体
        var v = $.chen1203();
        console.log(v);
    </script>
</body>
</html>

或者也可以这样，把函数体放到另外一个文件中，从外部引入使用，如下：

设置文件plugin.js

$.extend({
    'chen1203':function () {
        return '123456789';
    }
});

html 文件中调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script src="plugin.js"></script>     /* 调用外部文件 */
    <script >
        var v = $.chen1203();
        console.log(v);
    </script>
</body>
</html>

案例二：使用 .fn.extend 设定函数及调用(与extend方法调用不一致)

<body>
    <div id="i1">chen</div>
    <script src="jquery-1.12.4.js"></script>
    <script >
        $.fn.extend({
            'chen1203':function () {
                return 'chen123456789'
            }
        });
        var v =$('#i1').chen1203();
        console.log(v)

    </script>
</body>

结果： console.log中返回 chen123456789。

posted on 2018-10-14 15:49 C.Q&CHEN 阅读(179) 评论(0) 收藏举报

刷新页面返回顶部

chen170615

10、第九 - WEB开发基础 - jQuery的常用方法

导航

公告