其他分享
首页 > 其他分享> > 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