文档章节

JQ方法之$()下的常用方法

林卿偎
 林卿偎
发布于 2017/06/30 21:57
字数 1746
阅读 7
收藏 0

 

addClass()    :

给元素添加一个或多个类(即class),添加多个类要用空格隔开;不会替换或移除已经存在的class。

removeClass()    :

删除元素中一个或多个类(即class),如果括号里没有写参数则删除该元素所有的class。

栗子:

$('div').addClass('div1 div2 div3').removeClass('div1 div3');

 

 

width()    :    单纯指宽度

innerWidth()   :   宽度+padding

outerWidth()    :    宽度+padding+border

outerWidth(true)    :    若括号里加参数true,则指 宽度+padding+border+margin

当被选元素被隐藏的时候,以上方法都可以获取到该元素宽的值。

而原生js中的offsetWidth不能获取隐藏元素的宽(除非该元素用visibiliity:hidden隐藏)。

 

offset().left   

获取被选元素到文档的左距离,此方法只对可见元素有效(visibiliity:hidden除外)。

position().left   

跟原生js中的offsetLeft一样,当父级有定位时即被选元素到父级的左距离,父级没有定位时即被选元素到文档的左距离。

此方法只对可见元素有效(visibiliity:hidden除外)。

 

 

 

 before() 和 insertBefore() 

before()    :    被选元素之前插入指定内容

insertBefore()    :    被选元素插入到指定元素之前

栗子:

$('div').before($('p'));     // div元素之前插入P元素
$('p').insertBefore($('div'));    // 把P元素插入到div元素之前

 

 after() 和 insertAfter() 

after()    :    被选元素之后插入指定内容

insertAfter()    :    被选元素插入到指定元素之后

栗子:

$('div').after($('p'));     // div元素之后插入P元素
$('p').insertAfter($('div'));    // 把P元素插入到div元素之后

 

append() 和 appendTo() 

append()    :    被选元素里面插入指定内容,并且插入的内容在被选元素里的结尾

appendTo()    :    被选元素插入到指定元素里面,并且被选元素在指定元素里的结尾

栗子:

$('div').append($('p'));     // div元素里面插入P元素,并且P元素在div元素里的结尾
$('p').appendTo($('div'));    // 把P元素插入到div元素里面,并且P元素在div元素里的结尾

 

prepend() 和 prependTo() 

prepend()    :    被选元素里面插入指定内容,并且插入的内容在被选元素里的开头

prependTo()    :    被选元素插入到指定元素里面,并且被选元素在指定元素里的开头

栗子:

$('div').prepend($('p'));     // div元素里面插入P元素,并且P元素在div元素里的开头
$('p').prependTo($('div'));    // 把P元素插入到div元素里面,并且P元素在div元素里的开头

 

before() 和 insertBefore()、after() 和 insertAfter()、append() 和 appendTo()、prepend() 和 prependTo() 的共同区别是:

  1. 因为选择器(被选元素)和内容(指定内容或指定元素,即括号里的参数)的位置不同,所以后续操作其他样式的对象不一样。
  2. before()、after()、append()、prepend()可以用函数来插入内容,后者不可以。
  3. 要插入新建元素,before()、after()、append()、prepend()直接在括号里写,而后者要在选择器写。栗子:
    $('div').before('<p></p>');
    $('<p></p>').insertBefore('div');
  4. 要插入文本内容,before()、after()、append()、prepend()可以直接写文本内容也可以用元素标签包起来,而后者必须用元素标签包起来才能插入文本内容。栗子:
    $('div').append('Hello World!');
    $('<b>Hello World!</b>').appendTo('div');

 

        以上~

 

remove() 和 detach() :

这两个方法都是 移除被选元素,包括所有文本和子节点。但是会保留jq对象中的匹配的元素,可以在之后再使用这些匹配的元素。

不同的是:remove() 不会保留被选元素的操作行为,即绑定的事件、附加的数据等都会一并移除。

                 detach()  会保留所有的绑定事件、附加数据等。

 

利用 on() 实现一个对象同时绑定多个事件

  1. 多个事件同一个函数
      $('div').on('click mouseover',function(){
          alert('Hello World!');
      });
  2. 多个事件不同函数
     $('div').on({
        'click':function(){
            alert('Hello World!');
         },
         'mouseover':function(){
            alert('你好,世界~');
         }
     });

     

one()    :    被选元素执行一个或多个事件,并且被选元素的每个事件只能执行一次。

off()    :    关闭被选元素的事件,若括号里不写事件则关闭被选元素的所有事件。

 

 

parent()    :    获取被选元素集合中每个元素的父元素,括号里的参数可以用选择器进行筛选。

parents()    :    获取被选元素集合中每个元素的祖先元素,括号里的参数可以用选择器进行筛选。

offsetParent()    :   

获取被选元素集合中每个元素最近的祖先定位元素,即设置了position:relative/absolute/fixed; 的最近祖先元素。如果祖先元素都没有定位则默认body为对象。

【注释:被选元素集合的意思是——多个相同的被选元素 (o(=•ェ•=)m/捂脸)】

 

val()    :    获取或设置被选元素的值(相当于js中的value)。写参数即设置值,不写则获取值。

size()    :    获取被选元素的数量(相当于js中的length)。

html()    :    获取或设置被选元素的内容。只能获取第一个匹配元素的内容。

                   设置内容时候可包含HTML标签。

text()    :    获取或设置被选元素的文本内容。可以获取所有匹配元素的文本内容(并删除HTML标签)。

                  设置被选元素文本内容如果有特殊字符(HTML标签等)都会被编码解析成文本内容。

 

each()    :    为每个匹配的元素循环运行函数。

栗子:

  $('li').each(function(index,elem){ // 一参:选择器的index位置(下标)  二参:当前元素(this)
     $(elem).html(i);   // each() 类似JS中的for循环
  });

 

hide()    :    隐藏被选元素

show()    :    显示被选元素

fadeOut()    :      淡出隐藏被选元素

fadeIn()    :      淡入显示被选元素

fadeToggle()    :    在 fadeIn() 与 fadeOut() 方法之间进行切换

slideUp()    :    滑动隐藏被选元素

slideDown()    :    滑动显示被选元素

slideToggle()    :    在 slideDown() 与 slideUp() 方法之间进行切换

以上方法都有参数speed(即指定速度);

fadeTo(speed,opacty)    :   

被选元素的不透明度逐渐改变为指定的值。

speed参数规定元素从当前透明度到指定透明度的速度,opacity参数必须写,规定淡入淡出的透明度。

 

 

event.pageX    鼠标指针相对于文档左边缘            

event.pageY    鼠标指针相对于文档上边缘  (这两个包括滚动距离)

event.clientX    鼠标指针相对于可视区左边 

event.clientY    鼠标指针相对于可视区上边 (这两个不考虑文档的滚动)

event.screenX    鼠标指针相对于屏幕左边 

event.screenY    鼠标指针相对于屏幕上边 

event.preventDefault()    阻止默认事件

event.stopPropagation()    阻止冒泡的操作

return false       阻止默认事件+阻止冒泡的操作

 

    $(function(){
         // 等DOM加载完就可以执行了,性能比js的 window.onload 要好
    });
    window.onload=function(){
         // 页面加载完执行 可利用DOMContentLoaded事件(专门等DOM加载完执行的)
    };
    $(document).ready(function(){
         // 和 $(function(){}); 一样
    });

 

                                                                         

                                                                                                            世界以痛吻我,要我回报以歌。

                                                                                                             加油~我一定可以的!

 

© 著作权归作者所有

上一篇: JQ中的运动
下一篇: CSS Keyframe 动画
林卿偎
粉丝 0
博文 7
码字总数 3174
作品 0
广州
私信 提问
关于jq的一次基础回顾

前言 如果你对jq的基本语法还不清楚,和我一起来熟悉一下吧,本文只摘抄了部分jq1.12.1api部分常用语法,对于其他的可以自行查阅线上文档。 历史 在jq出现之前,曾经出现了prototype,Dojo,YU...

Tolonger
2018/01/05
0
0
jquery常用遍历工具函数

遍历在这里 http://my.oschina.net/u/2352644/blog/508397 废话不多说,一个句话告诉你jq的遍历工具 我们对数组的循环一般是用for或者for in,这是原生js支持,同样既然用jq的了,咱jq也提供...

透笔度
2015/09/21
108
0
jQuery学习笔记(二)

jQ变成过程 1,引入jQ的js文件 2,使用选择器定位要操作的节点 调用jQ的方法进行操作 jQ对象 为了解决浏览器兼容问题而解决的提供一种统一封装后的对象描述 jq提供的方法都是jQ特有的,而且大...

weixin_36171533
2017/12/03
0
0
minggeJS 1.9.5 更新,MingGeJS决战JQ有图有真相

先介绍一下Mingge1.9.5的更新概况 1:继续加强 创建节点 接口,新增多类型数据传入 。 2:新增 prepend appendTo prependTo before after ,完全和JQ一一模一样,,而且带事件克隆效果,这些...

明哥先生
2016/02/24
2.2K
23
Mingge1.9.5更新,MingGeJS与JQ进行深测,有图有真相

先介绍一下Mingge1.9.5的更新概况 1:继续加强 创建节点 接口,新增多类型数据传入 。 2:新增 prepend appendTo prependTo before after ,完全和JQ一一模一样,,而且带事件克隆效果,这些...

明哥先生
2016/02/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Feign-自定义FeignClient

前言 在Feign-请求不同注册中心的服务中,提到,如果需要请求不同注册中心的服务,可以设置@FeignClient的url属性。 这种做法有个缺点,需要服务消费者,配置各个环境的url。 如果服务提供方...

wuxinshui
1分钟前
0
0
Redis从入门到放弃系列(九) Sentinel

Redis从入门到放弃系列(九) Sentinel 本文例子基于:5.0.4 Redis Sentinel作为Redis高可用方案,具有监听,通知,自动故障转移等功能.这一切都是依赖主备同步的大前提(参考上一节:Redis从入门到...

黑搜丶D
14分钟前
0
0
跟我来见证:《Kafka如何实现每秒上百万的高并发写入?》

本文来聊一下Kafka的一些架构设计原理,这也是互联网公司面试时非常高频的技术考点。 Kafka是高吞吐低延迟的高并发、高性能的消息中间件,在大数据领域有极为广泛的运用。配置良好的Kafka集群...

Java干货分享
41分钟前
3
0
Storm+Hbase广告实时统计

本文主要讲述使用Kafka+Strom+Hbase搭建的一套广告实时计算系统。其中服务器显示使用的是SpringBoot+Vue+ElementUI+EChats. 主要内容: 1.需求 2.日志格式 3.Hbase表格设计 4.编写Storm程序 ...

飓风2000
今天
4
0
android,ContentProvider+ContentObserver+ContentResolver,用法。

这个是传智播客老师讲android开发时的一个图。 一、 PersonProvider继承ContentProvider,实现ContentProvider中的数据操作类。 ContentObserver——内容观察者,目的是观察(捕捉)特定Uri引起...

天王盖地虎626
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部