jQuery高级

最新推荐文章于 2020-05-02 21:56:20 发布

可芭乐

最新推荐文章于 2020-05-02 21:56:20 发布

阅读量228

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/a839371666/article/details/65639167

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery基础方法扩充：
get()：下标和length属性（把jQuery转成原生js）

$('#div1').get(0).innerHTML

显示的是第一个div1的内容
若get()没有数字，则是一组元素（length同时属于jQuery）
get(i)=[i]
outerWidth()：针对（可以获取）隐藏元素和参数true
offsetWidth：获取不到隐藏元素的宽度
text()：合体的特例（能获取到所以的内容（不包含标签）会将标签转化成文本）
与html（只能获取第一个元素（包括标签））类似
remove()：删除元素，同时删除元素的操作行为
detach()：删除元素，同时保留元素的操作行为
$()等DOM加载完就开始执行：$(document).ready() 写法意思相同
window.onload = function(){}等全部页面加载完才开始执行
$()下的常用方法
parents()：获取当前元素的所有的祖先节点，参数就是筛选功能，可以指定参数
closest()：获取最近的指定的祖先节点（包括当前元素自身），只能找到一个元素
siblings()：获取所有的兄弟节点，有筛选的功能
nextAll()：下面的所有兄弟节点
prevAll()：之前的所有的兄弟节点
parentsUntil()：之前的所有的祖先节点
nextUntil()：从一个节点截止到另（下）一个节点
prevUntil()：从一个节点截止到另（上）一个节点
clone(true)：可以接受一个参数，作用是复制之前的操作行为
wrap()：单独外部包装，在节点外再加上一个节点
wrapAll()：整体外部包装，会改变DOM节点方式
wrapInner()：内部包装
unwrap()：删除包装（删除父级（不包括body））
add()：可以变成多个节点
slice(起始位置，结束位置)：在一组元素中筛选
serialize()：将数据的value变成数组串联到一起形成字符串，传给后台
serializeArray()：

<form>
    <input type="text" name="a" value="1">
    <input type="text" name="b" value="2">
    <input type="text" name="c" value="3">
</form>

格式化后变成：

[
    { name : 'a' , value : '1' },
    { name : 'b' , value : '2' },
    { name : 'c' , value : '3' }
]

animate()：类似json
第一个参数：{}运动的值和属性
第二个参数：时间（运动快慢）
第三个参数：运动形式 | 只有两种运动形式（默认：swing（慢快慢）linear（匀速））
第四个参数：回调函数，做完运动开始执行函数

$(this).animate({width:300,height:300}, 400, 'swing', function(){});

这个物体的长跟宽变成300，历经时间为400毫秒，用缓冲的速度
也可以$(this).animate().animate()

stop()只能阻止当前运动stop(true)阻止后续运动stop(true,true)立即停止到指定目标点finish()立即停止到所有指定目标点

delay()延迟
delegate()委托 undelegate()
普通写法：

$('li').on('click',function(){
    this.style.background = 'red';
})

委托写法：（点击事件在ul操作，提高性能）

$('ul').delegate('li','click',function(){
    this.style.background = 'red';

    $('ul').undelegate();//取消事件委托
})

两者的表达意思相同

trigger()
主动触发事件

$('#div1').on('click',function(){
    alert(123);
})
$('#div1').trigger('click');

当网页刷新的时候就能弹出弹窗

ev.data ev.target() ev.type()

$('#div1').on('click',{name:'hello'},function(ev){
    alert(ev.data.name);//点击时弹出hello
    alert(ev.target);//弹出当前操作的事情
    alert(ev.type);//弹出当前事件的类型
})

$下的常用方法
type()：$.type()类似于typeof，用于判断类型
以下两者弹出类型相同，jQuery的判断类型更多

$(function(){
    var a = 'hello';
    alert(typeof a);
    alert($.type(a));
})

trim()：去前后空格，否则要用正则
inArray()：类似于indexOf

$(function(){
    var arr = ['a','b','c'];
    alert($.inArray('b',arr));
})

返回出‘b’在字符串arr中的位置，若不存在就返回-1

proxy()：改变this指向

$(function(){
    function show(){
        alert(this);//this指的是window
    }

    $.proxy(show,document)();
})

最后一句加上括号才表示show函数的调用，this的指向变成document，传参不仅可以在最后的()内，可以在document后面（在进行操作后才会执行），用‘，’隔开，也可以混着写；

noConflict()：防止冲突，替代
parseJSON()：解析成json

$(function(){
    var str = '{"name":"hello"}';
    alert($.parseJSON( str ));//弹出结果为object  object
    alert($.parseJSON( str ).name);//弹出结果为hello
})

makeArray()：一组元素（类数组（‘aDiv’））转换成数组

$下的常用方法
Ajax()：json形式的配置参数
url后台地址 success当成功的时候运行
error当失败的时候运行 contentType
data数据 type类型
datatype返回数据类型 cache是否缓存 timeout是否延迟
在Ajax中要写成json的形式

$.ajax({
    url : 'xxx.php',
    data : 'name=hello&&age=20',
    type : 'POST',
    success : function(){
        alert(1);
    }
    error : function(){
        alert(2);
    }
});

抽象出来的方法
get(‘地址’，{name:hello}，function())
$.get()ajax的get提交方式，一种简写的方式

$().get()把jQuery对象转换成JavaScript原生对象

post()
getJSON()：请求json类型
支持jsonp的形式：指定?callback=?

$.getJSON('xxx.php?callback=?',function(){
});
相当于：随机的名称({});

插件
$.extend：扩展工具方法下的插件形式 $.xxx() $.yyy()

$.fn.extend：扩展到JQ对象下的插件形式 $().xxx() $().yyy()
去掉做空格的插件：

<script type="text/javascript">
    $.extend({
        leftTrim : function(){
            return str.replace(/^\s+/,'');
        }
    })
</script>
<script type="text/javascript">
    var str = '  hello  ';
    alert('(' + $.leftTrim(str) + ')');
</script>

拖拽插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $.fn.extend({
        drag : function(){
            var disX = 0;
            var disY =0;

            var This = this;

            this.mousedown(function(ev){

                disX = ev.pageX - $(this).offset().left;
                disY = ev.pageY - $(this).offset().top;

                $(document).mousemove(function(ev){

                    This.css('left', ev.pageX - disX);
                    This.css('top', ev.pageY - disY);
                });

                $(document).mouseup(function(){
                    $(this).off();
                });

                return false;
            });
        },
    })
</script>
<script type="text/javascript">
    $(function(){
        $('#div1').drag();
    })
</script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

可芭乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery高级

jQuery基础方法扩充： get()：下标和length属性（把jQuery转成原生js）$('#div1').get(0).innerHTML显示的是第一个div1的内容若get()没有数字，则是一组元素（length同时属于jQuery） get(i)=[i] outerWidth()：针对（可以获取）隐藏元素和参数true offsetWidth：获取不到隐藏元素的宽度 tex
复制链接

扫一扫