尼采般地抒情

公告栏

此网站主题为本人手写主题,主题还在开发中……


作者:尼采般地抒情

站点信息

文章数目:240
已运行时间:
目录
  1. 参考资料
  2. 一些特性
  3. 常用 API
    1. 选择器操作
    2. 样式操作
    3. 效果操作
    4. 属性操作
    5. 内容文本值操作
    6. 元素操作
    7. 尺寸、位置操作

尼采般地抒情

尼采般地抒情

公告栏

此网站主题为本人手写主题,主题还在开发中……


作者:尼采般地抒情

站点信息

文章数目:240
已运行时间:

jQuery只是对原生的JavaScript进行封装,说白了就是封装成伪数组,所以记住它的一些调用方法就可以了

参考资料

一些特性

  • $符号:jq 里面的顶级对象
  • 入口函数:在 DOM 里面的 DOMContentLoaded,在$里面直接赋予入口函数即可
  • jq 对象和 DOM 对象:

两者之间的函数调用不能互换(因为是被封装成了伪数组)
jq 转换为 DOM:加数组下标即可(因为是被封装成了伪数组,利用索引即可)
DOM 转换为 jq:使用$符号即可(括号不加引号),或者是 get(索引值)

常用 API

选择器操作

  • 元素获取:之前的 CSS 选择器(基础选择器、复合选择器)怎么写,这里直接就放到$里面即可

筛选选择器
image.png

  • 隐式迭代:如果获取的元素是一个数组,那么对其赋予的新操作,会隐式遍历
  • 元素属性操作:css(“属性”,”值”)函数
  • 元素节点操作

image.png

  • 事件:.mouseover()、.click()
  • .show()、.hide():元素显示和隐藏
  • $(this)当前这个对象

样式操作

样式的操作还是和之前的 DOM 一样,有两种,一种是逐个设置该元素的属性和值,另一种就是改变其类,jq 里面也是这个大题思路,不过有不同

  • 单一设置:.css()函数,一个参数的时候,返回该参数的值,两个参数的时候,即赋予该属性及值
  • clsss 设置

.addClass(“类名”):如果该元素没有该类,则加上
.removeClass():移除指定类名
.toggle():如果该元素有该类则删除,如果没有该类则加上

  • class 设置和 DOM 里面 className 区别是前者不会删除原本的类,后者会

效果操作

jq 封装了很多的效果,具体可以详查相关文档     
image.png

属性操作

  • prop():得到/设置元素固有的属性及值
  • attr():得到/设置元素自定义的属性及值
  • data():数据缓存

内容文本值操作

  • html():相当于 innerHTML
  • text():相当于 innerText
  • val():操作表单的值(没有参数是获取值,有一个参数是设置)

元素操作

遍历

第一种表达:

  • $(“div”).each(function(index,ele){XXXX})

  • 其中 index 是索引号,ele 得到的是 DOM 对象

    第二种表达

  • $.each(Object,function(index,ele){XXXXX})

  • 主要用于数据处理

创建

直接在$里面双引号加上需要创建的标签

添加

第一种关系:添加生成父子关系

  • append(“”)

  • prepend(“”)

    第二种关系:添加生成兄弟关系

  • after(“”)

  • before(“”)

删除
  • remove():移除选定节点
  • empty():清空所选节点的左右子节点
  • html(“”):将所选节点的 html 内容制空(相当于删除节点了)

尺寸、位置操作

尺寸操作
![image.png](https://cdn.nlark.com/yuque/0/2021/png/1484158/1617364626783-b5a50ec5-eeb2-4447-bc15-c7c209ae1d08.png#height=152&id=AIKMv&margin=%5Bobject%20Object%5D&name=image.png&originHeight=303&originWidth=1166&originalType=binary∶=1&size=133998&status=done&style=none&width=583) 参数为空:返回值 参数为一个值:设置
位置操作

image.png
image.png
image.png

博客内容遵循: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0)

本文永久链接: https://www.wztlink1013.com/blog/aa9fsh/

编辑: 部署: 订阅:

评论区

Twikoo 转换 utterances

最新评论

Loading...