JavaScript（十八）jQuery进阶

137 阅读 0 评论 91 点赞

我是靠谱客的博主迷路小天鹅，最近开发中收集的这篇文章主要介绍JavaScript（十八）jQuery进阶，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery进阶

一、类的操作

addClass() 添加(追加)类
removeClass() 移除类
toggleClass() 切换

$('li').click(function(){
    // $(this).addClass('on').siblings().removeClass('on');
    $('li').first().toggleClass('on');//切换
});

二、常见的操作

each() 遍历
Index() 获取指定元素在兄弟节点中的位置
size() 个数
length 个数

三、offset和宽高位置系列

offset()
获取当前元素相对于视口的偏移量 {left:xx,top:xxx}
通过传递参数也可设置(参数应为对象)

$('div').offset({
    left:"100",     //不能添加单位
    top:"100"
});

position() 获取相对于父元素的偏移量

width() 获取或设置宽
height() 获取或设置高
innerHeight() height+padding
innerWidth()
outerWidth() width+padding+border
outerHeight()
scrollTop() 距离顶部的滚动距离既可以取值，也可以设置
scrollLeft()

四、事件

1.在jQuery可以通过它的事件为同一个元素添加多个相同的事件
2.jQuery中，事件函数可以被调用
3.jQuery事件对象：对原生的事件对象进行了包装,没有兼容性问题
常见的事件属性：
keyCode 键码
pageX/pageY 位置
clientX/clientY
screenX/screenY
target 事件源
type 事件类型
altKey 是否按下了alt键
cltrlKey 是否按下了ctrl键
shiftKey

4.事件绑定和委托
on 添加事件
off 取消事件
1)添加单个事件

$('button').on('click',function(){
    console.log('11');
});

2）添加多个事件

 //多个事件直接使用空格分割
    $('button').on('click mouseenter', function () {
        console.log('11');
    });

    //添加多个事件 ，，
    $('button').on({
        'click': function () {
            console.log('click');
        },
        'mouseenter': function () {
            console.log('enter');
        }
    });

添加委托事件

 //委托事件     按钮执行
    $('div').on('click','button',function(){
        console.log('click');
    });

4)事件删除

// $('button').off();//祛除所有的事件
$('button').off('click');//删除指定事件

5）自定义事件

  $('button').on('abc',function(){
        console.log('abcdef');
    });

    //触发自定义事件
    $('button').trigger('abc');

6）一次性事件

//一次性事件    这个事件只执行一次
$('button').one('click',function(){
    console.log('哈哈哈'); 
});

五、文档处理

增加子节点：
append() 追加子节点
appendTo()

      // $('ul').append("<li>新来的</li>");
        var $li=$('<li>哈哈哈哈</li>');//创建jQuery
        // $('ul').append($li);

        $li.appendTo('ul');
        $('<li>又一个</li>').appendTo('ul');
prepend()
prependTo()
        $('ul').prepend('<li>哈哈哈哈</li>');//头部插入
        $('<li>有一个</li>').prependTo('ul');//头部插入

插入兄弟节点：
after()
before()

      $('ul').after('<div>我是盒子</div>');//插入一个下兄弟
        $('ul').before('<div>我是另一个盒子</di>');//上兄弟
InsertAfter()
InsertBefore()
        // $('.one').insertBefore('ul');//将class为one的div插入到ul前
        $('ul').insertAfter('div.one');//将ul插入到class为one的div后

增加父节点:
wrap() 增加指定父节点
unWrap() 删除父节点
wrapInner()

        //为将li中内容都使用超链接包裹起来
        $('li').wrapInner("<a href='#'></a>");

wrapAll()
        // $('p').wrap('<div></div>');//每一个p都增加一个父节点
        $('p').wrapAll('<div></div>');//将所有的p外增加一个父节点

删除节点
empty()
remove()
detach()

复制
clone(flag) 复制节点
flag 默认为false，不复制事件 true 复制事件

替换节点
replaceWith()
replaceAll()

// $('button').replaceWith("<p>我是段落</p>");//使用段落节点替换 button
$('<p>段落，哈哈哈哈</p>').replaceAll('button');

六、Ajax

原生JS XMLHTTPRequest对象发起ajax请求

Ajax请求的优点和缺点：
优点：
不需要插件
优秀的用户体验
提升web程序的性能
减轻服务器和带宽的负担
缺点：
破坏了浏览器前进后退按钮的功能
对搜索引擎的支持不足

$.ajax() get和post请求
$.get() get请求
$.post() post请求

ajax方法是jQuery中ajax的最底层实现，它的参数只有一个，是一个对象
$.ajax({
url: ‘’, // 请求的地址
type: ‘’, // 请求的方式（get/post），默认为get
timeout: ‘’, // 设置请求超时时间，单位毫秒
data: ‘’, // 发送到后端的数据
dataType: ‘’, // 预期服务器返回的数据类型，有xml, html, script, json, jsonp,text
success:function(){}, //服务器访问成功的回调
erro:function(){} //服务器请求失败的回调
})

跨域：
浏览器有一种安全策略：同源策略
同源：域名、端口、协议完全一致
跨域：非同源进行访问

在这里插入图片描述
如何解决跨域？
1.服务器允许跨域
2.jsonp技术利用script标签的src属性来进行服务器访问
注意：使用jsonp技术的前提是：对方服务器支持jsonp技术
Jsonp只支持get，不支持post
3.代理服务器/中转服务器

原生：

<script>
    //使用fn函数接收数据
    function fn(data) {
        console.log(data);
    }
</script>
<script src="http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=fn"></script>

jQuery：

 //jsonp
    $.ajax({
        url: "https://suggest.taobao.com/sug?code=utf-8&q=鞋子",
        dataType:"jsonp",           //jsonp发起请求
        success: function (data) {
            console.log(data);
        },
        error: function (err) {
            console.log(err);
        }
    });