3. $()下的常用方法

addClass() removeClass()
width() innerWidth() outerWidth()
insertBefore() before()
insertAfter() after()
appendTo() append()
prependTo() prepend()
remove()
on() off()
scrollTop()

样式操作：addClass() 添加样式 removeClass() 删除样式

$('div').addClass('box2 box4')  //给div元素添加class名为 box2 和 box4 的样式,不影响原来的样式
$('div').removeClass('box1')  //删除div元素class名为 box1 的样式,不影响原来的样式。

元素宽度：width() outerWidth() innerWidth()

//style:
div{width:100px;height:100px;background:red;padding:10px;border:10px solid #000;margin:10px;}
//html:
<div>div</div>
$('div').width()  //100 盒模型content区域
$('div').innerWidth() //120 盒模型padding+content区域
$('div').outerWidth() //140 完整盒模型
【特殊】$('div').outerWidth(true) //160 完整盒模型+margin区域

位置变化：inserBefore() before() inserAfter() after() appendTo() append() prependTo() prepend()

//inserBefore() inserAfter() appendTo() prependTo()
//html:
<div>div</div>
<span>span<span>
$('span').insertBefore( $('div') ); //将span元素放置在div元素前面
//结果：<span>span</span><div>div</div>
//延用上面html
$('div').insertAfter( $('span') );  //将div元素放置在span元素后面
$('div').appendTo( $('span') );  //将div元素放置在【span元素内】的最后位置
$('div').prependTo( $('span') ); //将div元素放置在【span元素内】的最前位置//before after append prepend//上述方法类似动词 将 【谁谁】 的位置改到 【某某】 地方//这些方法类似名字 规定 【谁谁】 的位置 必须在 【某某】 地方
$('div').before( $('span') ) //规定div必须在span前方,符合规定内容不变;否则按规则改变位置[将div移到span前面]

【区别:操作元素不同】
$('div').before( $('span') ).css('background','red'); //div变红
$('div').inserBefore( $('span') ).css('background','red'); //span元素变红

事件操作：remove() on() off() scrollTop()

html:
<div>div</div>
<span>span</span>

$('div').remove();  //删除所有选中的div元素//对比直接链接事件方法
$('div').click(function(){});
$('div').on('click',function(){alert(123);
})
//对自定义事件进行操作
$('div').on('show',function(){alert(123);
})
//同时对多个事件进行操作
$('div').on('mousevoer mouseout',function(){alert(123);
})
//不同事件不同操作
$('div').on({'click': function(){alert(123);},'mouseover':function(){alert(456);}
})$('div').on('mouseover mouseout',function(){$('div').off();  //阻止所有事件$('div').off('mouseover'); //阻止鼠标移入事件
})//html:
<body style="height:2000px;"><div>div</div><span>span</span>
</body>
$('document').click(function(){alert($(window).scrollTop); //当滚动条滚动之后 滚动条顶端至浏览器顶端的距离
})

转载于:https://www.cnblogs.com/wssjzw/p/9108423.html

3. $()下的常用方法相关推荐

Jqury 初识 -jqury选择元素、 $()下的常用方法
一.前言:认识jqury jqury: jQuery是一个兼容多浏览器的javascript库,提供了大量实用方法,简化了js操作.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器 $( fun ...
linux系统里常用的抓图工具,Linux系统下屏幕截图常用方法
电脑操作系统中一般都有自带截图快捷键,而很多软件业有截图的功能,那么Linux操作系统要如何截图呢?下面小编就给大家介绍下Ubuntu下如何截图. 在linux系统上怎么截图: 键盘上的截图键还可以用 ...
Jdk1.8下ConcurrentHashMap常用方法的源码分析
1.首先从下面这段代码开始分析 ConcurrentHashMap<String, Object> map = new ConcurrentHashMap<>();map.pu ...
hutool包下BeanUtil常用方法
Hutool是一个Java工具包,它帮助我们简化每一行代码,避免重复造轮子.如果你有需要用到某些工具方法的时候,不妨在Hutool里面找找,可能就有.本文将对Hutool中的常用工具类和方法进行介绍. ...
我的Unity学习笔记----------API常用方法和类详解（四）
二十三. Camera组件(类) 通过获取camera组件把场景中鼠标的位置(点)转化为射线 mainCamera=GameObject.Find("MainCamera").Ge ...
python模块学习(四)
re模块就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列的字节码,然后由用 C ...
11-Python基础之模块
re模块正则表达式: 字符组: [字符组] 在同一个位置可能出现的各种字符组成了一个字符组,在正则表达式中用[]表示字符分为很多类,比如数字.字母.标点等等. 假如你现在要求一个位置"只 ...
css 边缘闪光_css文字渐变+内发光+投影效果
先上一张效果图,大家看看一般都是用text-shadow来给文字加阴影的. .text{ font:100px "微软雅黑"; font-weight:bold; text-sh ...
python_ re模块学习
字符匹配(普通字符,元字符): 普通字符:大多数字符和字母都会和自身匹配 re.findall('alvin','yuanaleSxalexwupeiqi') ['alvin'] 元字符:. ^ $ ...

3. $()下的常用方法

3. $()下的常用方法相关推荐

最新文章

热门文章