首页 > 其他分享> 文章详细

jQuery基本介绍

2022-06-18 14:31:54 阅读：180 来源： 互联网

标签：jQuery 基本 log el 标签介绍 selector conlose 获取

1、JQ引入后，本质上是提供了一个函数

1-1、创建一个标签

1-2、设置标签样式

1-3、设置点击函数

1-4、放在页面中去

2、JQ选择器(selector、el)

3、获取第一个元素（与结构无关，只与书写顺序有关）

$('selector el:first')

4、获取最后一个元素

$('selector el:last')

5、获取其中任意一个（下标）

$('selector el:eq(0)'); //下标为0，第一个元素
$('selector el:eq(1)'); //下标为1，第二个元素

6、获取所有的偶数元素

$('selector el:even')

7、获取所有的奇数元素

$('selector el:odd')

8、获取指定下标以下的所有元素

$('selector el:lt(3)')  //下标为3以下的，0、1、2

9、获取指定下标以后的所有元素

$('selector el:gt(3)')  //下标为3以上的，4、5、6...

10、通过标签内部来查找元素

<div class="wrap">
    <p>哈哈</p>
</div>
<script>
    $('.wrap p:contains("哈哈")')
</script>

11、通过标签内容来查找元素（：empty 代表查找内容为空

:parent 代表查找内容不是空的）

div class="wrap">
    <p>哈哈</p>
	<p></p>
</div>
<script>
    $('.wrap p:empty')
	 $('.wrap p:parent')
</script>

12、选中包含某个指定选择器元素的标签

$('selector el:has(指定的选择器)')

13、读取计算后样式 JQ.css("属性名")

conlose.log($('.selector').css("属性名") )

14、获取内容区域

conlose.log($('.selector').width() )
conlose.log($('.selector').height() )

15、获取可视区域

conlose.log($('.selector').innerWidth() ) //  ==clientWidth
conlose.log($('.selector').innerHeight() )//  ==clientHeight

16、获取盒子自身的大小

conlose.log($('.selector').outerWidth() ) //  ==offsetWidth
conlose.log($('.selector').outerHeight() )//  ==offsetHeight

17、获取盒子的尺寸包含margin

conlose.log($('.selector').outerWidth(true) )//=offsetWidth
conlose.log($('.selector').outerHeight(true))//=offsetHeight

18、获取盒子到文档左边的距离

conlose.log($('.selector').offset().left )

19、获取盒子到文档上边的距离

conlose.log($('.selector').offset().top )

20、获取盒子到定位父级的距离

conlose.log($('.selector').position().left )// ==offsetLeft
conlose.log($('.selector').position().top )// ==offsetTop

21、行间样式的设置

div class="wrap">
    <p>哈哈</p>
</div>
<script>
    $('.wrap').css('background','red')
			  .css({
    				width : "100px",
    				height : "100px"
               })
	 
</script>

22、向JQ对象所包含的标签中添加类型名

$('selector').addClass("类型名")

23、向JQ对象所包含的标签删除类型名

$('selector').removeClass("类型名")

24、选中的标签如果有class就删除，如果没有就加类型名

$('selector').toggleClass("类型名")

25、让选中的标签消失

$('selector').hide();

26、让选中的标签出现

$('selector').show();

27、JQ动画处理：JQ.animate(参数1，参数2，参数3)

参数1 ： object 设置动画的样式点

参数2 ： number 设置动画的时间单位：ms

参数3 ： callback 监听当前动画结束

28、常用动画：淡入、淡出

$('selector').fadeIn( time ) //淡入
$('selector').fadeOut( time ) //淡出

29、淡入、淡出的切换

<button>切换</button>
$('button:contains(切换)').click(function(){
        $('selector').fadeToggle( time )
 })

30、向上收起动画

<button>收起</button>
$('button:contains(收起)').click(function(){
        $('selector').slideUp( time )
    })

31、向下打开的动画

<button>打开</button>
$('button:contains(打开)').click(function(){
        $('selector').slideDown( time )
    })

32、向上、向下的切换

<button>切换</button>
$('button:contains(切换)').click(function(){
        $('selector').slideToggle( time )
 })

33、动画延迟

$('selector').delay( time )

34、停止动画

$('selector').stop()

标签：jQuery,基本,log,el,标签,介绍,selector,conlose,获取
来源： https://www.cnblogs.com/liujianjun/p/16388265.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9