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的属性操作及事件

1.jQuery的属性操作

html() 他可以设置和获取起始标签和结束标签中的内容 跟dom属性 innerHTML一样

text() 他可以设置和获取起始标签和结束标签中的文本 跟dom属性 innerText一样

val() 他可以设置和获取表单项的value属性值 跟dom属性 value一样

不传参数是获取,传递参数是设置

attr() 可以设置和获取属性的值 不推荐操作 checked、readOnly、selected、disabled等等

? attr 方法还可以操作非标准的属性。比如自定义的属性:abc,cbf,dasfac,fdfa,ds

prop() 可以设置和获取属性的值 只操作 checked、readOnly、selected、disabled等等

2.dom的增删改查

2.1内部插入

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

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

2.2外部插入

insertAfter() a.insertAfter(b) 得到ba

insertBefore() a.insertBeforer(b) 得到ab

2.3替换

replaceWith() a.replaceWith(b) 用b替换掉a

replaceAll() a.replaceAll(b) 用a替换掉所有的b

2.4删除

remove() a.remove() 删除 a 标签

empty() a.empty() 清空 a 标签里的内容

3.css样式操作

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除,没有就添加样式

offset() 获取和设置元素的坐标

4.jQuery动画

4.1基本动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏

toggle() 可见就隐藏,不可见就显示

? 以上动画方法都可以添加参数

? 1.第一个参数是动画 执行的时常 以毫秒为单位

? 2.第二个参数是动画的回调函数(动画完成后自动调用的函数)

4.2淡入淡出动画

fadeIn() 淡入(慢慢可见)

fadeOut() 淡出(慢慢消失)

fadeTo() 在指定时长内慢慢的将透明度修改到指定的值

fadeToggle() 淡入/淡出 切换

5.jQuery事件操作

$( function() {} );

window.onload = function() {}

的区别?

他们分别在何时触发?

? 1.jQuery的页面在加载完成之后,要等浏览器内核解析完标签创建好dom对象,才会执行

? 2.原生js的页面加载完成之后,除了要等浏览器内核解析完标签创建好dom对象,还要等标签显示时需要的内容加载完成后,才会执行

他们触发的顺序?

? 1.jQuery页面加载完成之后先执行

? 2.原生js的页面加载完成之后

6.jQuery中其他的事件处理方法

click() 他可以绑定单击事件,以及触发单击事件

mouseover() 鼠标移入事件

mouseout() 鼠标移出事件

bind() 可以给元素一次性绑定一个或多个事件

one() 使用方法bind一样,但是绑定的事件只会响应一次

unbind() 跟bind方法相反的操作,解除事件的绑定

live() 也是用来绑定事件。可以绑定选择器匹配的所有元素事件,即便是这个元素后面动态创建出来的同样有效

6.1事件的冒泡

事件的冒泡指:

指父子元素同时监听同一个事件,当触发子元素的事件,同一个事件也被传递到父元素的事件中响应

如何阻止事件得冒泡?

在时间的函数体内,return false; 可以阻止事件的冒泡传递

6.2jQuery事件对象

1.原生js获取事件对象

window.onload = function(){

document.getElementById(“areaDiv”).onclick = function (event){

? console.log(event);

? }

}

2.jQuery代码获取事件对象

$(function (){

? $("#areaDiv").click(function (event) {

? console.log(event);

});

});

3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件

$("#areaDiv").bind(“mouseover mouseout”,function (event) {

? if (event.type == “mouseover”) {

? console.log(“鼠标移入”);

? } else if (event.type == “mouseout”) {

? console.log(“鼠标移出”);

};

});

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

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