本文共 3601 字，大约阅读时间需要 12 分钟。

一、JQ入口函数

1、原生js的入口函数：等待html标签和dom树渲染完成,资源(图片,音频视频)都加载完成后执行

window.onload = function () {      console.log('原生js入口函数执行完成');    };  

2、JQ的入口函数：等待htmlbq和dom树渲染完成,不需要等待资源(图片,音频)等加载完成后就执行了     $(document).ready(function () { 函数体 });     简写( 重点)     语法 : $(function(){....}) 二、JQ获取标签 1、JS的方式      let theDiv = document.getElementById('myDiv'); 2、JQ的方式       语法: $('css选择器')       注意:JQ获取标签返回的不是一个dom对象, 而是一个伪数组(有length,有下标,不可以使用数组        的方法)，是JQ对象 3、选择器的类型       3.1、id选择器 => $('#id名字')     //如果说想获取到原生dom对象，可以通过下标获取: $('#id名字')[0]       3.2、class选择器 =>$('.class名字')       3.3、标签选择器 =>$('标签名字') => 获取同一类标签的所有元素       3.4、交集选择器 =>$('标签名字.class名字') => 交集元素       3.5、全选选择器 =>$('*') => 匹配所有元素       3.6、并集选择器 =>$('div,p,ul') - 选择器与选择器是逗号相隔=>选取多个元素       3.7、子代选择器 =>$('uL>li') => 使用>号, 获取的就是亲儿子层级的元素       3.8、后代选择器 =>$('uL li')=> 使用的空格  获取的就是当前元素ul - 所有的li ,包括孙子 ,,,, 4、其他的方法       4.1、选中css选择器集合中指定下表的标签===>筛选 eq（下标）=> $('标签名').eq(下标);       4.2、父级==>元素.parent()  => 元素的父级元素 => $('元素').parent()       4.3、子代元素  ==> 父级元素 .children() ===>$('父级元素').children()       4.4、指定后代的查找==> .find('css选择器')==>$('父级元素').find('.class名字')       4.5、兄弟元素===> .siblings() => 查找目标的兄弟们==>$('元素').siblings() 三、原生（JS）与JQ对象的互相转换 1、JS的方式       let 变量名 = document.querySelector('#id名');       变量名.style.属性名= '属性值'; 2、JQ的方式       注意：通过JQ获取标签返回的是一个JQ对象，没有style属性来设置，如果想使用JS的方式来设置，那就需要转换     3、JQ 转 原生 =>通过下标      $('#id名')[下标].style.属性名= '属性值'; 4、原生 转 JQ =>$(原生DOM对象)      $('css选择器').css('属性名',值) 四、JQ注册事件 1、$('css选择器').on('事件类型'，事件处理函数) 2、$('css选择器').事件类型(事件处理函数)      注意：.事件类型 没有on 3、$('css选择器').on('事件类型','筛选器',事件处理函数)      事件委托 将所有孩子们相同的事件 委托给父级或者更外层的元素绑定实现(利用了事件冒泡)    

 例：$('ul').on('click', 'li', function () {                  console.log('你好，事件委派', this);                  // this指向的是当前点击的li                  // 是一个dom对象                   });

五、JQ操作样式 1.行内样式 style       1.1 .css('属性名','值')                               //每次只能设置一个属性       1.2 .css({属性名：'值',属性名：'值'})          //同时给标签设置多个属性 2.操作类名       2.1、添加类=> .addClass('类名')==>  $('#id名').addClass('类名');       2.2、移除类=> .removeClass('类名')==>  $('#id名').removeClass('类名');       2.3、切换类=> .toggleClass('类名')==>  $('#id名').toggleClass('类名');  //有这个类名，就移除掉，没有就添加       2.4、判断类=> .hasClass('类名')==>$('#id名').hasClass('类名'); 判断当前有没有这个类名 =>返回布尔值 六、链式编程 1、 概念：当前的对象被调用方法之后，会返回一个jq对象，我们可以使用这个对象继续调用其他的方法一直.下去 2、 返回一个对象(调用者本身) 七、JQ的鼠标事件 1、鼠标移入：$('css选择器').on('mouseenter',function () { 函数体}） 2、鼠标移出：$('css选择器').on('mouseleave',function () { 函数体}） 八、滑入与滑出 1、下拉 slideDown() ：$('css选择器').slideDown(1000)    //显示 2、上拉 slideUp()：$('css选择器').slideUp(1000)     //隐藏 3、切换 slideToggle()：$('css选择器').slideToggle(10000)   //显示就隐藏 / 隐藏就显示 九、淡入淡出 1、淡入==>fadeIn(毫秒值)      $('css选择器').on('事件类型',function () {$('css选择器').fadeIn(1000);}) 2、淡出==>fadeOut(毫秒值)      $('css选择器').on('事件类型',function () {$('css选择器').fadeOut(1000);}) 3、淡入淡出切换==>fadeToggle(毫秒值)      $('css选择器').on('事件类型',function () {$('css选择器').fadeToggle(1000);}) 4、修改透明度==>fadeTo(毫秒值,修改的透明度的值)      $('css选择器').on('事件类型',function () {$('css选择器').fadeTo(1000, 0.3, function () {});}) 十、显示与隐藏  'slow' - 600毫秒    'fast' - 200毫秒    'normal'  - 400毫秒  1、show() - 显示       $('css选择器').show('毫秒值',function () {函数体}）（函数是回调函数，目的是告诉我们动画做完了） 2、hide() - 隐藏       $('css选择器').hide('毫秒值'） 3、toggle()  - 切换 （显示的话就隐藏 ,隐藏就显示）      $('css选择器').toggle('毫秒值'） 十一、hover事件      鼠标移入又移出（hover）事件：$('#myDiv').hover(function () {函数体 },function () {函数体 });       //参数: 参数一和参数二都是function(){} , 中间是逗号相隔       // 参数一 代表 的就是鼠标移入事件  - mouseenter       // 参数二 鼠标移出事件            - mouseleave 十二、动画停止       如果触发动画次数过多：       JQ动画 - 动画队列   - 动画累加的效果       前一个动画没做完,后面的只能在排队,等待前一个动画做完         如果我们不想要动画累加 - stop()        stop() 停掉当前标签身上所有的动画,只执行最后一次

例：                 $('css选择器').stop().slideToggle(500)// 显示         // $('div').slideToggle(500)  // 隐藏  - 排队等待         // $('div').slideToggle(500)  // 显示  - 排队等待         // $('div').slideToggle(500)  // 隐藏  - 排队等待

十三、自定义动画        $('css选择器').stop().animate({修改的属性：修改的样式}) 十四、补充        index（）//获取当前的下标

转载地址：https://blog.csdn.net/Bear_with_her/article/details/117854877 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！