jqueryAPI解析基础入门（全是干货）

指挥官乄
135 阅读2分钟

jqueryAPI解析基础入门（全是干货）

什么是jQuery

是一个js库，封装好的特定的集合（方法和函数），内部都是通过原生js实现，优化了DOM的操作、事件处理、动画效果

使用jQuery

  1. $$是jQuery的别称，在代码中使用$和jQuery是相同的意思
  2. $$是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法

DOM对象和jQuery对象的区别

  1. DOM对象：用原生js获取过来的对象就是DOM对象
  2. jquery对象：用jQuery方式获取过来的对象就是jQuery对象。本质：通过$把DOM元素进行包装
  3. jquery对象只能使用jQuery方式， DOM对象只能使用DOM的属性方式，两者不能混合使用
  • DOM对象转化为jquery对象
  // 通过原生获取video对象
    var video = document.querySelector('video');
// 转换为jquery对象
    $(video);
  • jquery转换为DOM对象(两种方法都可以)，这样就可以使用DOM方法了
$('div')[index] index就是索引
$('div').get(index) index是索引

jQuery常用的API

  • jQuery基础选择器 (里面选择器直接写css选择器即可，但是要加引号)

名称用法描述
ID选择器$('#id')获取指定ID的元素
全选选择器$('*')匹配所有元素
类选择器$('.clas')获取同一类class元素
标签选择器$('div')获取同一类标签的所有元素

  • jQuery层级选择器

名称用法描述
子代选择器$('ul>li')使用>号，获取亲儿子层级的元素，并不会获取子孙层级的元素
后代选择器$('ul li')使用空格，获取后代选择器，获取ul下的所有li包括子孙

  • jQuery筛选选择器

语法用法描述
:first$('li:first')获取第一个li元素
:last$('li:last')获取最后一个li元素
:eq(index)$('li:eq(2)')获取到li元素中，选择索引号为2的元素，索引index从0开始
:odd$('li:odd')获取li元素中，选择索引号为基数的所有元素
:even$('li:even')获取li元素中，选择索引号为偶数的所有元素

  • jQuery筛选方法（重点）

语法用法说明
parent()$('li').parent()查找父级
children(selector)$('ul').children('li')相当于$('ul>li') ，查找最近一级（亲儿子）
find(selector)$('ul').find('li')相当于$('ul li '),后代选择器
siblings(selector)$('.first').siblings('li')查找兄弟节点，不包括自己
nextAll([expr])$('.first').nextAll()查找当前元素之后的所有同辈元素
prevetAll([expr])$('.last').prevetAll()查找当前元素之前的所有同辈元素
hasClass(class)$('div').hasClass('protected')检查当前的元素是否含有某个特定的类，如果有返回true
eq(index)$('li').eq(2)相当于$('li:eq(2)'),index从0开始

  • jquery中的隐式迭代，模拟点击button变色，不点击的不变色

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
</body>
<script>
    $('button').click(function() {
        $(this).css('backgroundColor','pink');
        $(this).siblings('button').css('backgroundColor','');
    })
</script>

  • jquery操作css样式

  • 设置css样式方式
  1. 参数只写属性名，返回属性值

$(this).css('color');

  1. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用引号和单位

$(this).css('color','red');

  1. 参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({'color':'white','font-size':'20px' });

$('div').css({

width:400,

height:400,

backgroundColor:'red'

})

  • 添加类的方式

语法： $('div').addClass('current');

  • 删除类

语法： $('div').removeClass('current');

  • 切换类

语法： $('div').toggleClass('current');

  • 注意

jQuery中操作类，与原生js中className的区别

  1. 原生js中className会覆盖里面的类名
  1. jQuery里面的类操作知识对指定类进行操作，不影响原先的类名

  • js中的效果（动画效果）

  1. 显示与隐藏

show（）

语法：show ([speed, [easing], [fn] ]);

  1. speed:显示速度，可设置为slow normal fast 或者数字 1000以毫秒为单位
  2. easing用来指定切换效果，默认swing，可设置linear
  3. fn回调函数，动画完成时执行，每个元素只执行一次
  4. 显示与隐藏、滑动效果、淡入淡出效果的语法基本上是一致的，这里就不多赘述了！

hide（）

toggle（）：显示与隐藏的切换效果

  1. 滑动效果

slideDown（）

slideUp（）

slideToggle（）下拉与上滑的切换效果

  1. 淡入淡出效果

fadeIn（）

fadeOut（）

fadeToggle（）淡入淡出的切换效果

dadeTo（）

  1. 自定义动画效果

animate（）

<style>
    div {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <button>点我</button>
    <div></div>
</body>
<script>
    $('button').click(function() {
        $('div').animate({
            width:300,
            height:300,
            top:50,
            left:400,
            opacity:.5,
            backgroundColor:'skyblue'
        },500);
    })
</script>

animate效果.gif

  1. 动画队列及停止排队的方法
  1. 动画队列：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
  2. 停止排队
stop()
1. stop()方法哟关于停止动画或者效果
2. 注意：stop（）写道动画或者效果前面，相当于停止结束上一次动画
$(this).children('ul').stop().slideToggle();

  • 设置获取元素固有属性值prop()

  1. 获取属性语法

prop（'属性'）

  1. 设置属性语法

prop（'属性','属性值'）

  • 设置获取元素自定义属性
  1. 获取属性语法

attr('属性') // 类似原生getAttribute（）

  1. 设置属性语法

attr（'属性'，'属性值'）//类似原生setAttribute（）

  • jQuery获取内容文本值
  1. 普通元素内容html() (相当于innerHTML)

html（） //获取元素的内容

html（'内容'）// 设置元素的内容

  1. 普通元素文本内容text（）（相当于原生innerText）

  • jQuery的元素操作

1. 遍历

jQuery中有隐私迭代,当都设置同一个标签比较困难

语法1：

/* 
$('div').each(function(index,ele) { } )
1.  idnex是每个元素的索引，ele是每个DOM元素对象，不是jQuery对象
2. 要使用jquery方法，需要给这个dom元素转为jquery对象$(ele)
*/
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>
<script>
​
    var arr = ['red', 'pink', 'skyblue','green'];
    $('div').each(function (index, ele) {
        $(ele).css('color', arr[index])
    })

语法2：

/*
$.each(object,function(index,ele) {})
可以遍历所有，包括对象
*/
​
<script>
   var person =  {
        name:'zs',
        age:18
    }
    $.each(person,function(index,ele) {
        console.log(index);
        console.log(ele);
    })
</script>

2.创建

语法：

$('

  • ')

    创建了一个li标签

    3.添加

    内部添加：

    element.append('内容')；放到后面

    element.prepend('内容'); 放到前面

    外部添加

    element.after('内容') // 把内容放入目标元素后面

    element.before('内容') // 把内容方到目标前面

    注意

    内部添加元素是：父子关系

    外部添加元素是： 兄弟关系

    4.删除

    语法：

    element.remove () // 删除本身

    element.empty () // 删除指定元素集合中的所有子节点

    element.html('') // 清空匹配元素的内容

    演示

    $('ul').remove(); 相当于自杀

    $('ul').empty(); 删除子节点

    $('ul').html(''); 删除子节点

    avatar
    文章
    阅读
    粉丝