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知识库 -> 2021.8.11 JQuery -> 正文阅读

[JavaScript知识库]2021.8.11 JQuery

JQuery是Javascript的辅助查询库。

导入JQuery类库

使用script标签引入Jquery类库

?使用JQuery:

1.使用$(function(){ body;})表示于当页面加载完之后所调用该函数,相当与window.οnlοad=function(){ body;}

2.$(“#ID");表示根据标签ID查询标签对象。查询结果是一个Jquery对象

3.Jquery对象名.click(function(){ body;}表示将该Jquery对象的click方法进行绑定。使用Jquery绑定响应函数的步骤:使用JQuery查询到标签对象,之后使用标签对象的绑定函数(如click)进行绑定。

4.$符号就是jQuery函数,是JQuery的核心函数。他有一下功能:

? ? ? ? 1.传入函数时,表示页面加载完成后,相当于绑定onload方法。

? ? ? ? 2.传入HTML标签文本字符串时,创建HTML标签,再通过appendTo函数加入到当前HTML文件。

????????

? ? ? ? ?3.传入参数为选择器字符时:$("#id值"),$("标签名"),$(".class属性值“),$("*")选择所有

? ? ? ? 4.传入Dom对象:将Dom对象转化为Jquery对象。

? ? ? ? 5.JQuery对象本质上是一个数组,是一个Dom对象的数组加上JQuery提供的一系列功能函数。

? ? ? ? 6. JQuery对象的.css()函数用来设置该对象的样式。

? ? ? ? 7.JQuery层级选择器:

????????

????????

? ? ? ? 8.过滤选择器:

? ? ? ? ?9.内容过滤选择器:

? ? ? ? 10.属性过滤选择器:

? ? ? ? ?11.表单过滤选择器

?

JQuery对属性操作

html() 可以获取和设置开始标签和结束标签中的内容,跟dom属性中的innerHTML一样(传递参数是设置,不传递是获取)

text()可以获取和设置标签中的文本,和dom属性中的innerText一样(传递参数是设置,不传递是获取)和html的不同之处在于,这个方法插入的一定会成为文本,即使是符合HTML语法的标签文本也会成为文本,而html()会将符合HTML语法的文本生成为html标签。

val()可以设置和获取表单项input的value属性,和Dom的value属性相同。(传递参数是设置,不传递是获取)。还可同时设置多个表单项的选中状态(通过name属性查找到表单项组,然后通过val属性设置选中的value与之相同的表单项

attr() 可以设置和获取属性值,传递一个参数时是获取,两个时是设置。可以用来操作自定义属性名。不推荐操作checked,readOnly,selected,disabled属性。

?prop()可以设置和获取属性的值,和attr差不多,只推荐操作checked,readOnly,selected,disabled属性。

DOM的增删改

内部插入:

.appendTo() a.appendTo(b) 把a插入到b子元素的末尾,成为最后一个子元素。

.prependTo() a.prependTo(b) 把a插入到所有子元素的前面,成为第一个元素

?外部插入:

.insertAfter()a.insertAfter(b), 将a插到b后面。

.insertBefore() a.insertBefore(b),将a插到b前面

替换:

?.replaceWith()? ?a.replaceWith(b),用b替换a

.replaceAll() a.replaceAll(b),用a替换掉b? ?

删除:

.remove() 删除该标签

.empty()? ? ? ? ?清空该标签中的内容

CSS样式的操作

addClass() 添加样式,通过class属性添加,可添加多个,通过空格分隔

?

removeClass()删除样式,通过class属性删除,?可删除多个,通过空格分隔

toggleClass()添加/删除样式

offset()设置位置

动画操作

show()将隐藏的元素显示

hide()将可见的元素隐藏

toggle()将元素隐藏/显示

上面三个函数都是通过改变标签长宽来显示和隐藏的,可添加参数:

????????第一个参数表示显示时间,以毫秒表示

? ? ? ? 第二个参数是动画完成后自动调用的函数(类似于动画完成事件)

fadeIn()淡入动画,两个可添加参数功能和上面三个相同

fadeOut()淡出动画,两个可添加参数功能和上面三个相同

?fadeTo()淡到一个透明度,两个可添加参数功能和上面三个相同

fadeToggle()?淡入淡出切换,两个可添加参数功能和上面三个相同

以上都是通过透明度修改来隐藏的。

事件操作

$(function)和window.οnlοad=function的区别

?

?事件绑定和处理方法:

????????

?

?

?事件到冒泡

?比如说子元素和父元素都有点击事件,点击子元素也会出发父元素的点击事件。可以在子元素里面使用return false来制止对父元素事件的冒泡。

事件对象:

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-13 11:55:09  更:2021-08-13 11:55:31 
 
开发: 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年11日历 -2024/11/23 9:25:42-

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