jQuery

strawberry tree

于 2022-06-03 21:52:31 发布

阅读量127

点赞数

分类专栏：笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/water7_melon7/article/details/125116463

版权

笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

基础核心
- 1.代码风格
  - 1.1 $(function(){});
    - 匿名函数的执行
  - 1.2 $("#div1")
    - 选取元素
  - 1.3 $("#div1").css('color','red')
    - 添加内联样式
  - $==jquery
    - js封装好的一个对象
- 2.加载模式
  - window.onload
    - 全部资源加载完毕
    - 只能执行一次，会覆盖前边的
    - 不能简写
  - $(document).ready(function(){});
    - DOM结构加载完毕
    - 可多次执行
    - 可简写$(function(){});
- 3.对象互换
  - 这个互换多指jQuery对象与DOM对象互换
选择器
- 最核心选择器引擎
  - 继承了css的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择
- 使用
  - id
    - #div1
  - 标签名
    - div
  - class
    - .div1
  - 后代选择器
    - header div
    - $("header div")等价于$("header").find("div")
  - 子代选择器
    - header>div
      - IE6不支持
      - $("header>div")等价于$("header").children('p')
  - 第一个
    - :first
  - 最后一个
    - :last
  - 所有偶数
    - :even
  - 所有奇数
    - :odd
  - 根据下标进行选择
    - :eq(n)
  - 根据属性进行选择
    - [title]
- 拓展：容错功能
  - 很多情况下动态DOM生成会有问题
- 拓展：选择器复杂度
  - 选择器越复杂，字符串解析越慢
属性
- attr('title')
  - 获取属性值
- attr('title','hahaha')
  - 设置属性值
- attr({title:'enenen',style:'background-color:red;'})
  - 同时设置多个属性值
- removeAttr('title')
  - 移除属性值
- addClass('page')
  - 添加class值
- removeClass('page')
  - 移除class值
- toggleClass('hah')
  - 添加或者移除class值
css
- css('color')
  - 获取样式值
- css('color','red')
  - 设置样式值
- css({'color':'red','font-size':'30px'})
  - 设置样式值
- offset()
  - 相对于窗口
  - 获取top和left值
- position()
  - 相对于父级
  - 获取top和left值
- scrollTop()
  - 获取滚动的值
- scrollTop(300)
  - 设置滚动的值
- scrollLeft()
  - 获取滚动的值
- scrollLeft(200)
  - 设置滚动的值
- height()
  - 获取高度
- width()
  - 获取宽度
- innerHeight()
  - 获取高度+padding上下
- innerWidth()
  - 获取宽度+padding左右
- outerHeight()
  - 获取高度+padding上下+border上下
- outerWidth()
  - 获取宽度+padding左右+border左右
筛选
- first()
  - 第一个
- last()
  - 最后一个
- find()
  - 寻找子级
  - 类似于后代选择器
- eq(n)
  - 第n个
- not(x)
  - 没有x描述的
- filter()
  - 过滤
- slice()
  - 剪裁
- has()
  - 过滤
  - 检索的时集合中的DOM的后代
- children()
  - 子级（不包括子级的后代）
- parent()
  - 直接父级
- parents()
  - 所有父级
- parentUntil(x)
  - 直到找到x描述的父级停止
- offsetParent()
  - 第一个定位的父级
- next()
  - 下一个
- nextAll()
  - 后边所有
- nextUntil()
  - 下一个到x描述前
- prev()
  - 上一个
- prevAll()
  - 前边所有
- prevUntil(x)
  - 上一个到x描述
- silblings()
  - 匹配元素的所有兄弟元素
- addBack()
  - 当前的再添加上一个
- end()
  - 返回上一个jq对象
DOM
- div.html()
  - 获取div的html内容
- div.text()
  - 获取div的文本内容
- inp.val()
  - 获取inp的value值
- $("<p></p>")
  - 创建元素
- div.append(p)
  - 拼接元素：p放到div中
- p.appendTo(div)
  - 同上
- a.prepend(b)
  - 插入到最前面
  - a是父级，b是子级
- a.prependTo(b)
  - 插入到最前面
  - a是子级，b是父级
- a.after(b)
  - 把b插入到a后面
- a.before(b)
  - 把b插入到a前面
- a.insertAfter(b)
  - 把a插入到b后面
- a.insertBefore(b)
  - 把a插入到b前面
- a.replaceWith(b)
  - 用b替换a
- a.replaceAll(b)
  - 用a替换b
- a.remove()
  - 删除a元素
- a.empty()
  - 清空a的子元素
事件
- $('#div1').click(function(){});
  - 绑定单击事件
- $('#div1').mousemove(function(){});
  - 绑定鼠标移动事件
- $('#div1').on('click',function(){});
  - 绑定事件
  - 可同时添加多个事件
    - $('#div1').on({a:fun1,b:fun2})
- $('#div1').off();
  - 删除事件
  - 全部删除
  - 如果删除某一个事件括号传入指定值
- 以下重点强调下
  - 1.mouseover mouseout 与 mouseenter mouseleave
    - over与out会造成多次无效的触发
    - 建议使用enter与leave
  - 2.复合方法
    - ready
    - hover(fn1,fn2)
  - 3.事件对象
    - 默认传参的e(这是个变量名，啥都可以，见名知意)
    - pageX === clientX
    - pageY === clientY
    - target 点击元素
    - currentTarget 绑定元素
    - timeStamp 获取时间戳
    - type 类型
- JQ不支持滚轮事件，所以我么还是用JS来默默写吧
- 冒泡
  - e.stopPropagation()
- 默认
  - e.preventDefault()
- return false
  - 既阻止冒泡，也阻止默认
动画
- 简单动画
  - show()
    - 显示
  - hide()
    - 隐藏
  - toggle()
    - 显示或隐藏
  - slideDown()
    - 向下展开
  - slideUp()
    - 向上收起
  - slideToggle()
    - 展开或收起
  - fadeIn()
    - 淡入
  - fadeOut()
    - 淡出
  - fadeTo()
    - 渐变到一定程度
  - fadeToggle()
    - 淡入或淡出
  - 以上小括号可以传递两个参数 1.时间 2.回调参数
    - 时间
      - 毫秒
      - 有默认的三个值
        slow
        600
        normal
        400
        fast
        200
- 任意动画
  - d.animate({left:'50px',top:'50px'},2000)
    - 原生jq动画，不支持颜色
  - 具有累加累减的功能
    - left:"+=100px"
  - 同步动画
    - 同时改变的
  - 列队动画
    - 回调
      - d.animate({},fn(){})
    - 连缀
      - d.animate().animate().animate()
  - 动画控制
    - stop()
      - 暂停
    - delay()
      - 延迟
    - finish()
      - 结束
- jQuery动画拓展库 jQuery.easing