• jquery总结


    jquery优点:
     jQuery是一个快速,小型且功能丰富的JavaScript库。它使诸如HTML文档遍历和操作,事件处理之类的东西,动画和Ajax更简单,具有易于使用的API,可以跨多种浏览器,即结合了多功能性和可扩展性

    jquery使用:
     找到要操作的元素(jquery选择器),然后去操作它(例如添加属性,样式,文本)
     例$(‘div’).width(100).height(100).css(‘backgroundColor’, ‘red’).text(‘哈哈’)(链式编程)

    jquery版本:
     1(兼容老浏览器例ie678,停止更新)
     2(不兼容老浏览器,停止更新)
     3(不兼容老浏览器,在更新)

    jquery的入口函数:
     ① $(document).ready(function() { … }) ② $(function() { … })
     与window.onload入口函数的区别:
      ① window.onload的入口函数不能写多个,而jqery的可以写多个
      ② jquery入口函数的执行时机要快于window.onload
       jquery入口函数等待页面上dom树加载完后执行
       window.onload要等待页面上所有资源(dom树,外部css,js链接,图片等)都加载完后才执行

    jquery原理:
     jquery.js中是一个自执行函数,通过window.jQuery = window.$ = jQuery给window对象添加jQery属性和$属性

    $:$是一个函数
     ① 如果参数传递的是一个匿名函数 ——则是入口函数
     ② 如果参数传递的是一个字符串 ——则是选择器
     ③ 如果参数传递的是一个dom对象 ——则会把dom对象转换为jquery对象

    jquery对象:
     jquery对象是一个伪数组,本质是dom对象的一个包装集。即利用jquery选择器获取到的对象,只能调用jquery的方法或者属性,不能调用原生dom对象的属性或者方法

    jquery对象和dom对象的相互转换:
     ① dom对象转换成jquery对象:let jquery对象 = ${dom对象}
     ② jquery对象转换成dom对象:
      ① 通过下标:jquery对象[ ]
      ② 通过jquery方法:jquery对象.get( )

    jquery选择器:和css选择器用法一样

    jquery获取和设置文本:text()
     ① 获取单个标签文本:会获取到这个标签中所有的文本,包括后代元素的文本
     ② 获取多个标签文本:会把所有的dom元素的文本都获取到
     ③ 设置单个标签文本:会覆盖原来的内容,且如果设置的文本中包含标签,是不会把标签解析出来
     ④ 设置多个标签文本:会把所有的dom元素的文本都设置上

    jquery获取和设置样式:css()(是行内样式)
     ① 可以一次设置多个样式,例
     $(‘div’).css({‘width’: ‘300px’, ‘height’: ‘300px’});
     ② 和text()类似,设置多个元素的时候会全部设置上,但获取多个的时候,只会返回第一个元素的值

    jquery关于class类名操作:
     ① addClass():添加类名
     ② removeClass():移除类名
     ③ hasClass():判断是否存在该类,返回boolean类型值
     ④ toggleClass():切换类,如果有则移除该类,如果没有则添加该类

    jquery动画:
     都是通过参数设置动画效果:
      参数1:代表执行动画的时长(毫秒数),也可以是代表时长的字符串(例fast,normal,slow等)
      参数2:代表动画执行完毕后的回调函数
     基础动画:
      ① 显示:show()
      ② 隐藏:hide()
      ③ 显示隐藏切换:toggle()(如果元素是隐藏的就显示,如果是显示的就隐藏)
      ④ 滑入:slideDown()
      ⑤ 滑出:slideUp()
      ⑥ 滑入滑出切换:slideToggle()
      ⑦ 淡入:fadeIn()
      ⑧ 淡出:fadeOut()
      ⑨ 淡入淡出切换:fadeToggle()
     自定义动画:animate()
     停止动画:stop(),参数1:是否清除动画队列;参数2:是否跳转到最终效果
     动画队列:即同一个元素上执行多个动画,后面未执行的动画就会放在动画队列中

    jquery操作节点:
     ① 创建节点:
      ① 通过html()(与text()类似,不过一个是innerText,一个是innerHtml)
      ② 通过$(‘

    ’)创建节点,再通过追加节点到指定位置
     ② 追加节点:
      ① 作为最后一个子元素添加:append()
      ② 作为第一个子元素添加:prepend()
      ③ 把元素插到指定元素的前面(兄弟元素):before()
      ④ 把元素插到指定元素的后面(兄弟元素):after()
      ⑤ 与append类似,都是作为父元素最后一个子元素添加:appendTo()
       不过一个是 父元素.append(子元素),一个是 子元素.appendTo(父元素)
     ③ 获取节点
      ① 获取该元素前面的所有兄弟元素:prevAll()
      ② 获取该元素后面的所有兄弟元素:nextAll()
     ③ 删除节点:
      ① 清空节点:empty()(删除调用该方法的节点的所有子节点)
      ② 移除节点:remove()(删除调用该方法的节点)
     ④ 克隆节点:
      ① clone()(会克隆其的后代节点)
       有一个boolean类型的参数,当值为true时,会克隆事件,当值为false时,不会克隆事件

    获取或设置表单元素内容:val()(有参数就是设置,没参数就是获取)

    操作属性:
      ① 添加,更改,获取属性:attr(),例:添加修改,attr(‘src’, ‘test.gif’),获取,attr(‘src’)
      ② 删除属性:removeAttr()

    操作布尔类型的属性:
     在jquery1.6之后,对于checked,selected,disabled这类boolean类型的属性(复选框),不能用attr方法,只能用prop方法
     例,$(‘#ckb’).prop(‘checked’)获取checked属性值

    设置获取宽高:
     ① width()和height()(不包括内边距,边框,外边距)
     ② innerWidth()和innerHeight()(包括内边距)
     ③ outerWidth()和outerHeight()(包括内边距,边框)
     ④ outerWidth(true)和outerHeight(true)(包括内边距,边框,外边距)
     ⑤ $(window).width()和$(window).height()(获取页面可视区的宽高)

    获取元素位置:
     获取到一个对象,对象里面包含了top和left的值  
      ① offset():获取元素距离document的位置
      ② position():获取元素距离有定位的父元素(offsetParent)的位置

    设置或者获取滚动条的位置:
      ① scrollTop():获取页面被卷曲的高度
      ② scrollLeft():获取页面被卷曲的宽度

    关于事件
     ① on注册事件:(jqery1.7之后,jquery用on统一了所有时间的处理方法)
      ① on简单注册事件:
       不支持动态注册(即以下样例,给所有div注册了事件,但如果创建了新div,其身上并不会被注册事件)
        $(‘div’).on(‘click’, function(){…})
      ② on注册事件委托
       支持动态注册
       表示给$(selector)绑定代理事件,而必须是它的内部元素(这里是div和span)才能触发这个事件
       $(‘body’).on(‘click’, ‘div, span’, function(){…})
       (相当于点击div或span时,通过事件冒泡,会触发父元素的点击事件)
     ② off事件解绑
      如果没有参数,那就是解绑所有事件,如果有参数,那就是解绑指定事件,例off(‘click’)
     ③ trigger事件触发
      例trigger(‘click’)
     ④ 事件对象(例记录触发鼠标的坐标位置信息等等(event))
      可通过事件回调的参数获取,例,$(‘div’).on(‘click’, function(e) {…})

    返回状态:
     在链式编程中,通常会改变jquery对象对应的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态,用end()

    显示迭代:
     jquery隐式迭代会对所有DOM对象设置相同的值,但是如果需要对每个对象设置不同的值时,需要自己显示迭代
     each()可以遍历jquery对象集合,为每个匹配的元素执行一个函数,例
     $lis.each(function(index, element) {…})

    多库共存:如果引入了多个jquery文件,则使用的$是最后引入的jquery文件中的
     如果想要释放$,即使用引入的其他版本的$,可通过let $ = $.noConflict()将它释放,并用$接受被释放的,之后的$便是其他juery文件的

    jquery插件

  • 相关阅读:
    C/C++语言100题练习计划 81——圆星人贸易(签到题)
    酷晚报:6月24日Web3业界重点消息大汇总
    【微服务架构】分布式限流策略
    winform中DevExpress控件一些属性
    Linux学习第16天:Linux设备树下的LED驱动开发:举一反三 专注专心专业
    新零售mysql设计(采购表 入库信息表 入库商品表)
    html文字一行时靠右,多行时靠左
    (Java高级教程)第一章Java多线程基础-第一节1:多线程概念和Java中创建线程的方式
    ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南
    kotlin修饰符const的含义
  • 原文地址:https://blog.csdn.net/m0_52212261/article/details/128189457