IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> jquery总结 -> 正文阅读

[JavaScript知识库]jquery总结

-----用最少的代码解决最多的问题-----

jQuery是一个JavaScript库。极大简化了对页面元素的操作。1.jQuery的特点

  • 轻量级

  • 功能强大

  • 拓展性强

  • 插件广泛

  • 链式操作、隐式迭代 : 具有自动遍历节点的功能

  • 兼容性、免费开源

  • ....

jquery版本

使用jQuery,需要下载jQuery //根据情况选择版本

官网:jQuery

1.x ? ?  支持IE6/7/8
2.x ? ?  不支持低版本IE
3.x ? ?  不支持IE低版本

链入

//外链jQuery库时注意:jQuery库需要在自己写的代码上边,否则会报错

//方法一:使用离线版
    <script src="./js/jquery.js"></script>
/方法二:使用在线版
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script>
    //代码块
</script>

1.代码风格

在jQuery程序中,不管是页面元素的选择,内置的功能函数,都是美元封号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写:

$(function(){}); ? //执行一个匿名函数
$('#box'); ? ? ? ? //进行执行的ID元素选择
$('#box').css('color','red'); //执行功能函数

注:$===jQuery

任意连缀

$('#box').css('color','red').css('font-size','50px'); //连缀

2.jQuery 语法

  • jQuery 通过定义$(美元符) 对HTML元素进行获取(查找HTML元素)

  • 通过各种类似于.css() 的方法进行对页面元素的操作

    例:

    <script>
        $('div').css('background','skyblue')//直接获取
        $('.div').css('background','skyblue')//class类名获取
        $('#div').css('background','skyblue')//id获取
    </script>

4.jQuery常用的效果方法

$().css() 对元素进行样式操作

$().hide() 隐藏被选的元素

$().show() 显示被选的元素

$().html() 设置或返回匹配的元素集合中的html内容

$().text() 设置或返回匹配的元素集合中的text内容

$().val() 设置或返回匹配元素的值

$().toggle() 对被选元素进行隐藏和显示的切换

$().slideDown() 通过调整高度来滑动显示被选元素

$().slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换

$().slideUp() 通过调整高度来滑动隐藏被选元素

$().fadeIn() 逐渐改变被选元素的不透明度,从隐藏到可见

$().fadeOut() 逐渐改变被选元素的不透明度,从可见到隐藏

$().fadeTo() 把被选元素逐渐改变至给定的不透明度

$().animate() 对被选元素应用“自定义”的动画

5.jQuery元素操作方法

$().children() 返回被选元素的所有下一级子元素。可选参数来过滤对子元素的查找

$().find() 返回被选元素的后代元素,一直往下级找,可选参数来过滤对后后代元素的查找

$().parent() 返回被选元素的上一级父元素

$().parents() 返回被选元素的所有上级元素,直到文档的根元素 (<html>),可选参数来过滤对所有上级元素的查找

$().siblings() 返回被选元素的所有同胞元素。过滤对同胞元素的搜索

$().next() 返回被选元素的下一个同胞元素

$().prevAll() 返回匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)

$().nextAll() 返回匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)

$().first() 将匹配元素集合缩减为集合中的第一个元素

$().last() 将匹配元素集合缩减为集合中的最后一个元素

$().prev() 返回的是前面的同胞元素

$().index() 返回指定元素相对于其他指定元素的 index 位置

$().each() 对对象进行迭代,为每个元素执行函数,(item,index)

$().toArray() 以数组的形式返回 jQuery 选择器匹配的元素

$().eq() 指定索引的新元素

$().get() 获得由选择器指定的 DOM 元素

$().size() 返回被 jQuery 选择器匹配的元素的数量

$().remove() 删除被选元素(及其子元素)

$().empty() 从被选元素中删除子元素

$().removeAttr() 从所有匹配的元素中移除指定的属性

$().removeClass() 从所有匹配的元素中删除全部或者指定的类

$().append() 在被选元素的结尾插入内容

$().prepend() 在被选元素的开头插入内容

$().after() 在被选元素之后插入内容

$().before() 在被选元素之前插入内容

$().toggleclass() 从匹配的元素中添加或删除一个类

$().attr() 设置返回匹配元素的属性和值(通过匿名函数 function(){}来进行指定参数设置值)

$().addClass() 向匹配的元素指定的类名

注:

parent()、prev()、first()、last()、next()、eq() 返回一个元素。

parents()、siblings()、nextAll()、prevAll() 返回一个集合

注:以官方为准!

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-01 16:46:55  更:2021-10-01 16:47:51 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/19 1:27:59-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码