jQuery的学习

奶油酒窝

已于 2023-08-28 21:18:40 修改

阅读量45

点赞数

文章标签： jquery javascript 前端

于 2023-07-29 11:55:19 首次发布

本文链接：https://blog.csdn.net/qq_50838333/article/details/131993148

版权

jQuery01
- 语法:$("选择器") 返回值:jq对象
- jQuery操作元素css样式
  - css("样式名","样式值")
  - 一次设置多个样式语法: css(样式对象) divobj.css({ backgroundcolor : "red", width : "200px", height : "200px"});
  - 获取样式语法: css("样式名") 返回值: 获取到的样式值
  - 注意: 如果jq对象里有多个元素, 获取样式时只获取第一个元素的样式值
- jQuery对象和DOM对象之间的相互转化的
  - JQ对象转成DOM元素, 从JQ对象里通过下标取出的就是DOM元素
    - vardiv1=document.getElementById("div1"); console.log(div1); varjqDiv=$(div1); console.log(jqDiv)；
  - DOM元素转成JQ对象, 将DOM对象直接放进$()方法里, 返回的就是jq对象
    - varjqLis=$("ulli"); console.log(jqLis); vardomLi=jqLis[0];console.log(domLi)；
- jQuery里的常用伪类选择器
  - :first 找到jq对象里的第一个对象
  - :last 找到jq对象里的最后一个对象
  - :even 找到jq对象里的序号为偶数的对象 , 序号从0开始
  - :odd 找到jq对象里的序号为奇数的对象 , 序号从0开始
  - :eq(index) 找到jq对象里的序号为index的对象 , 序号从0开始
  - :gt(index) 找到jq对象里的序号大于index的对象 , 序号从0开始
  - :lt(index) 找到jq对象里的序号小于index的对象 , 序号从0开始
  - :hidden 找到jq对象里隐藏(display:none)的元素
  - :visible 找到jq对象里显示(非display:none)的元素
  - :enabled 找的是可用的表单控件
  - :disabled 找的是禁用的表单控件
  - :checked 找到的是选中的表单控件
- jQuery操作元素节点内容
  - JS写法: innerHTML, innerText, textContent JQ写法: html(), text(), val()
  - html()方法: 在设置内容时, 如果jq对象里有多个DOM元素, 都设置上内容, 如果内容有html字符串, 会被直接解析成标签在获取内容时, 不管jq对象里有多少个DOM元素, 只获取第一个DOM元素的内容。
  - text()方法: 在设置内容时, 如果jq对象里有多个DOM元素, 都设置上内容, 如果内容有html字符串, 会原样输出; 在获取内容时, 会获取所有DOM元素里的文本内容
  - val()方法:既可设置value值, 也可获取value值
- jQuery操作元素节点样式
  - JQ写法: css() 读写的
- jQuery操作元素节点属性
  - JS写法: 点语法读写性; getAttribute()/setAttribute() JQ写法: attr(), prop()
  - attr()
    - attr(), 设置单条属性语法: jq对象.attr("属性名", "属性值");
    - attr(), 设置多条属性语法: jq对象.attr({key:value, key:value,....});
    - 获取属性语法: jq对象.attr("属性名"); 返回值: 属性值
  - prop()
    - prop()方法. 设置单条属性语法: jq对象.prop("属性名", "属性值");
    - prop()方法. 设置多条属性语法: jq对象.prop({属性名1:"属性值1", 属性名2:"属性值2",...});
    - 获取属性语法: jq对象.prop("属性名"); 返回值: 属性值
  - attr()和prop()的区别 1. attr()的内部原生js实现是setAttribute()和getAttribute(); prop()的内部原生js实现是直接的点语法。 2. 建议当操作系统自带属性时使用prop(), 操作自定义属性时使用attr()。 3. 建议当操作属性名和属性值相同的属性时, 使用prop()
- jQuery动画
  - 显示隐藏动画 hide()/show()/toggle()
  - 淡入淡出动画 fadeIn()/fadeOut()/fadeTo()/fadeToggle()
  - 上拉下拉动画 slideUp()/slideDown()/slideToggle()
  - jq自定义动画(不但可以实现过渡动画效果, 也可以实现关键帧动画效果)
    - 语法: jq对象.animate(样式对象, 动画时间, 动画完成时的回调函数)
    - animate方法可以连续调用多次, 系统会依次执行动画, 形成关键帧动画的效果
    - 注意: 只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。注意：使用 "+=" 或 "-=" 来创建相对动画（relative animations)
动画
- css动画
- 关键帧动画
  - 访问css
- 定时器延时器
- jQuery中自带动画
- jQuery中的自定义动画
jQuery事件03
- jQuery事件
  - jQuery事件的语法
    - jq对象.事件方法(回调函数)
    - jq对象.on(), 这是jQuery推荐的绑定事件的语法, 该方法的语法情况较多, 比较灵活
      - 基础用法
        
        $("#div1").on("click",function(e{ $(this).css("background-color",randomColor());})
      - 元素绑定多个事件, 触发相同的方法
        
        $("#div1").on("mouseovermouseout", function({ $(this).css("background-color",randomColor());})
      - 元素绑定多个事件, 不同事件各自触发自己的方法
        
        $("#div1").on({ mouseover:function({ $(this).css("background-color","red");}, mouseout:function(){ $(this).css("font-size","30px");}, click:function({ $(this).css("color","yellow");}})
      - 给元素绑定自定义事件
        
        $("#div1").on("hkgEvent",function(e,name,age,sex{ console.log("自定义事件触发了",e,name,age,sex);}); setTimeout(function(){ $("#div1").trigger("hkgEvent",["你好,我是张三",20,"男"]);},3000);
      - 移除on方式绑定的事件通过off()移除事件
        
        $("#div1").on("click",function(){ alert("点击事件!");}); functionremoveEvent({$("#div1").off("click");}
  - jQuery获取元素的尺寸和位置
    - jQuery获取元素位置的语法
      - offset() 返回的是jq对象相对于整个文档偏移位置的对象, 该对象里包含两个属性: top和left
      - position() 返回的是jq对象相对于距离最近的设置非static定位的祖先元素的偏移位置的对象, 该对象里包含两个属性: top和left
      - offsetParent() 返回距离jq对象最近的设置了非static定位的祖先元素
    - jQuery获取元素尺寸的语法
      - width(), height() 返回元素的宽度和高度(不包含padding, border, margin)
      - innerWidth(), innerHeight() 返回元素的宽度和高度(包含padding, 不包含border, margin)
      - outerWidth(布尔值), outerHeight(布尔值)
        
        outerWidth(), outerHeight() 返回的元素的大小(包含padding, border, 不包含margin) outerWidth(true), outerHeight(true) 返回的元素的大小(包含padding, border, margin)
jQuery02
- jQuery通过节点之间的关系查找元素
  - parent() 查找节点的父节点
  - parents("选择器") 查找节点的所有祖先节点通过填入选择器可以进一步对找到的祖先元素做筛选
  - children("限定条件") 找到节点对应的子节点可以通过填入选择器可以进一步对找到的子元素做筛选
  - find("要找的范围") 找到节点对应的后代节点
  - prev() 查找节点上一个相邻兄弟节点
  - prevAll("限定条件") 查找节点上面所有的兄弟节点
  - next() 查找节点下一个相邻兄弟节点
  - nextAll("限定条件") 查找节点下面所有的兄弟节点
- jQuery创建, 插入, 删除元素节点
  - 创建节点$()传入html标签字符串
  - 插入到当前文档
    - jq对象.append(创建的jq对象/DOM元素/html字符串/元素数组); 添加到父级的里面的最后面
    - 创建的jq对象.prependTo(jq对象/选择器/DOM节点) 添加到父级的里面的最前面
    - 已存在的jq对象.after(创建的jq对象/DOM元素/HTML字符串) 在已存在的jq对象的后面插入新元素
    - 已存在的jq对象.before(创建的jq对象/DOM元素/HTML字符串) 在已存在的jq对象的前面插入新元素
  - 删除节点
    - 要删除的jq对象.remove()
    - 要删除的jq对象.detach()
    - 两个方法会删除jq对象里表示的所有元素，两个方法都有返回值, 返回值是删除的对象
    - remove()在移除元素的同时会解绑其绑定的事件
    - detach()只移除元素, 不会解绑其绑定的事件
- 文档加载事件
  - $(window).load(function(){})、window.οnlοad=function(){}
  - $(document).ready(function(){})
  - 两种文档加载事件的区别