| |
|
开发:
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项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
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年12日历 | -2024/12/26 16:34:37- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |
数据统计 |