其他分享
首页 > 其他分享> > jQuery基本介绍

jQuery基本介绍

作者:互联网

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