jQuery

最新推荐文章于 2024-09-17 13:42:29 发布

z杳杳z

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量333

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_61567783/article/details/127525922

版权

快速、简洁的js库
官网复制，创建js文件，引入jQuery文件，使用
jQuery的入口函数(等着DOM结构渲染完毕即可执行内部代码，不用等到所有外部资源加载完成)
- $(function(){....页面DOM加载完成的入口...});
- $(document).ready(function(){...页面DOM加载完成的入口...});
$是jQuery的别称，同时也是jQuery的顶级对象
jQuery对象只能有jQuery方法，DOM对象使用原生js属性和方法
DOM对象转换为jQuery对象
- $(DOM对象)
jQuery对象转换为DOM对象
- $('div')[index]
- $('div').get(index) index索引号
jQuery选择器
- 基础选择器 $("选择器")
- 子代选择器 $("ul>li") 获得亲儿子级的元素
- 后代选择器 $("ul li") 获取ul下的所有li元素
- 筛选选择器 $('li:first')
  - first 第一个元素
  - last最后一个元素
  - eq(index)索引号为多少的元素
  - odd索引号为奇数的元素
  - even索引号为偶数的元素
  - 父子选择 $('选择器')
    - .parent () 最近一级父级元素
    - .parents('选择器')可以返回指定祖先元素，不加选择器则返回所有祖先元素
    - .children() 相当于子代选择器
    - .find() 类似后代选择器
  - 兄弟选择器 .
    - .siblings() 查找兄弟节点不包括自己本身
    - .nextAll()查找当前元素之后所有同辈元素
    - .prevtAll()查找当前元素之前所有的同辈元素
  - hasClass(class)检查当前元素是否含有某个特定的类，有则返回true
  - eq(index)
jQuery不能使用style
- $("选择器").css();隐式迭代，给所有的都生效
jQuery排他思想
- 隐式迭代绑定
- 隐式迭代其余兄弟去掉效果 siblings
链式编程
- $(this).css("color","red").siblings().css("color"," ");
操作方法
- $(this).css("color")参数只写属性名，则返回的是属性值
- 参数形式属性必须加引号后面的值如果是数字可以不用加单位和引号
- 对象形式属性可以不用加引号，如果是复合属性则必须采取驼峰命名法
- 设置类样式方法
  - 添加类 addClass()
  - 删除类removeClass()
  - 切换类toggleClass() 有这个类就删除，没有这个类就添加
jQuery效果
- 显示隐藏效果
  - show/hide/toggle([speed,[easing],[fn]])
    - speed:"slow" "normal" "fast" 或表示动画时长的毫秒数
    - easing：用来指定切换效果，默认是"swing"，可用参数"linear"匀速
    - fn:回调函数，在动画完成时执行的函数
- 滑动效果
  - slideup/slidedown/slideToggle([speed,[easing],[fn]])
    - speed:"slow" "normal" "fast" 或表示动画时长的毫秒数
    - easing：用来指定切换效果，默认是"swing"，可用参数"linear"匀速
    - fn:回调函数，在动画完成时执行的函数
- 事件切换
  - hover([over],out) over 鼠标进过时的函数 out鼠标离开时的函数，如果只写一个参数，那么鼠标经过或者离开都会触发这个函数
- 动画队列及其停止排队方法
  - 用stop方法，写到动画前面，终止上一次动画
- 淡入淡出
  - fadeIn/fadeOut/fadeToggle([speed,[easing],[fn]])
    - speed:"slow" "normal" "fast" 或表示动画时长的毫秒数
    - easing：用来指定切换效果，默认是"swing"，可用参数"linear"匀速
    - fn:回调函数，在动画完成时执行的函数
  - fadeTo([[speed],opacity,[easing],[fn]])
    - opacity 透明度必须写，取值0~1之间
    - speed:"slow" "normal" "fast" 或表示动画时长的毫秒数，必须写
    - easing：用来指定切换效果，默认是"swing"，可用参数"linear"匀速
- 自定义动画
  - animate(params,[speed],[easing],[fn])
    - params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果复合属性则需要采取驼峰命名法borderLeft。
jQuery属性操作
- 设置或获取元素固有属性值prop()
  - 获取固有属性语法 prop("属性")
  - 设置固有属性语法 prop("属性","属性值")
- 设置或获取元素固有属性值attr()
  - 获取自定义属性语法attr("属性")，可以获取H5自定义属性，要加data—
  - 设置自定义属性语法attr("属性","属性值")
- 数据缓存data()
  - data()方法可以在指定元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除，存在内存上，有点像变量
  - data("name","value")向被选元素附加数据
  - data("name")向被选元素获取数据，也可以获取H5自定义属性，不用加data-，而且返回的是数字型
jQuery内容文本值
- 普通元素内容html()
  - html()获取元素内容
  - html("内容")设置元素的内容
- 普通元素文本内容text()
  - text()获取元素文本内容
  - text("内容")设置元素文本的内容
- 表单的值val()
  - val()获取表单内容
  - val("内容")设置表单的内容
jQuery元素操作
- 事件可以使用change()
- 遍历元素，针对于对同一类对象不同操作
  - $("div").each(function(index,domEle){xxx})
    - each()方法遍历匹配的每一个元素。主要用DOM处理
    - 里面的回调函数有两个参数：index是每个元素的索引号；demEle是每个DOM元素对象，不是jQuery对象
    - 所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)
  - $.each()方法遍历元素主要用于遍历数据，处理数据
    - $.each($("div"),function(i,ele)
- 创建元素
  - $("<li></li>");动态的创建了一个li标签
- 添加元素
  - 内部添加
    - element.append("内容")放到目标元素里且放到内容的最后面
    - element.prepend("内容")放到目标元素里且放到内容的最前面
  - 外部添加
    - element.after("内容") 把内容放入目标元素后面
    - element.before("内容") 把内容放入目标元素前面
  - 删除元素
    - element.remove() 删除匹配的元素（本身）
    - element.empty() 删除匹配的元素集合中所有的子节点
    - element.html(" ") 清空匹配的元素内容
jQuery尺寸、位置
- jQuery尺寸
  - 取得匹配元素宽度和高度值
    - width()/height() 什么都不包含
    - innerWidth()/innerHeight() 包含padding
    - outerWidth()/outerHeight() 包含padding、border
    - outerWidth(true)/outerHeight(true) 包含padding、border、margin
- jQuery位置
  - offset()设置或获取元素距离文档位置的偏移
  - position()获取距离带有定位父级位置(偏移)position 如果没有带有定位的父级，则以文档为准，这个方法只能获取不能设置偏移
  - scrollTop/left()被卷去的头部/左侧
    - animate动画也可以返回顶部，里面有个scrollTop属性，但是是元素来做动画，所以用$("body,html").animate({scrollTop:0})
jQuery事件
- 事件注册
  - 单个事件注册
    - element.事件(function(){})
  - 事件处理on
    - element.on({
    - 事件:function(){},...
    - })
    - 或者事件处理程序相同
    - element.on("事件事件",function(){
    - });
    - on()方法优势2：可以事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
      - $('ul').on('click','li',function() {
      - alert('hello world!');
      - });//给ul添加，但触发是ul里的li
      - on()方法优势3：动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
  - 事件处理off()解绑事件：off()方法可以移除通过on()方法添加的事件处理程序
  - one()只触发事件一次
  - trigger()自动触发事件：有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器触发右侧按钮点击事件，不必鼠标点击触发
    - element.click()
    - element.trigger("type")
    - element.triggerHandler("type")不会触发元素的默认行为
- 事件对象：事件被触发，就会有事件对象的产生
  - element.on(events,[selector],function(event){})
  - 阻止默认行为：event.preventDefault()或者return false
  - 阻止冒泡：event.stopPropagation()
jQuery其他方法
- 对象拷贝
  - 如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法
    - $.extend([deep],target,object1,[objectN])
      - deep：如果设为true为深拷贝，默认为false浅拷贝
        浅拷贝是把被拷贝的对象复杂数据类型1中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
        
        深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象
      - target：要拷贝的目标对象
      - object1：待拷贝到第一个对象的对象
- 多库共存：让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存
  - 把$改成jQuery
  - 让jQuery释放对$控制权，让用户自己决定
jQuery插件
- jQuery插件库
- jQuery之家
- 步骤
  - 引入相关文件
  - 复制相关 html css js代码
- 图片懒加载：当我们页面滑动到可视区域，再显示图片
- 全屏滚动