web学习笔记(三十一)

目录

1.jQuery添加节点的几种方式

2.jQuery清除、克隆和移除节点

3.jQuery属性操作及jQuery事件解绑

4.宽度和高度

[5. scroll、offset和position的用法](#5. scroll、offset和position的用法)

6.-jQuery事件对象

7.Cookie


1.jQuery添加节点的几种方式

选择一种记住即可,其他的了解,认识即可。

$()方法也可以创建节点,创建完成后要进行追加append()操作, html() 也可以进行创建节点操作,但是此方法有覆盖性, 会覆盖原来的内容,所以在使用时要拼接完成后一次性放入。

  • append() - 在被选元素的结尾插入内容(比较常用)
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
  • appendTo() 方法在被选元素的结尾插入 HTML 元素

2.jQuery清除、克隆和移除节点

  • 清除: empty() - 从被选元素中删除子元素
  • 移除: remove() - 删除被选元素(及其子元素)
  • 克隆: $(selector).clone(true|false)-clone() 方法生成被选元素的副本,包含子节点、文本和属性(参数:true表示会把事件一起克隆,false表示不会把事件一起克隆(默认)但是true false都会克隆后代节点)。

3.jQuery属性操作及jQuery事件解绑

  • attr() 设置属性 获取属性
  • removeAttr() 移除属性
  • 在jQ1.6之后对于checked selected disabled这类boolean类型的属性来说,不能用attr方法,只能用prop()方法,prop()方法用来操作布尔类型的属性
  • 事件解绑 unbind方式(不用) undelegate(不用) off方式(推荐)

4.宽度和高度

  • width() 设置或获取被选元素的宽度
  • height() 设置或返回被选元素的高度
  • innerHeight() 返回元素的高度(包含 padding,不包含 border)
  • innerWidth() 返回元素的宽度(包含 padding,不包含 border)
  • outerHeight() 返回元素的高度(包含 padding 和 border)
  • outerWidth() 返回元素的宽度(包含 padding 和 border)

5. scroll、offset和position的用法

  • 盒子: 设置与获取 scrollLeft() 设置或返回被选元素的水平滚动条位置 scrollTop() 设置或返回被选元素的垂直滚动条位置
  • 页面:$(window).scrollTop()
  • offset() 设置或返回被选元素的偏移坐标(相对于文档) {left:值,top:值}
  • position() 返回元素的位置(相对于父元素)

6.-jQuery事件对象

注册一个事件,系统就会帮我们生成一个对象记录这个事件触发时候的一些信息,比如触发事件的时候有没有按住某个键,再比如触发这个事件的时候的一些坐标信息

  1. 事件参数e
  2. 三个坐标 e.screenX e.pageX e.clientX
  3. 冒泡
  4. 阻止冒泡 e.stopPropagation();//阻止事件冒泡 ,但阻止不了跳转
  5. e.preventDefault();//阻止不了事件冒泡 ,但阻止了跳转 return false;//阻止事件冒泡 ,阻止了跳转
  6. 键盘按键 给页面注册键盘按下事件 $(document)

7.Cookie

创建 document.cookie="属性名=值" expires是过期时间。cookie在浏览器关闭时删除

javascript 复制代码
<script>
        document.cookie = "username=aaa expires=Wed Mar 13 2024 20:8:02 GMT"
        
    </script>
相关推荐
水云桐程序员2 小时前
从零开发软件的步骤,软件开发从零到完成应该怎么做?
笔记·学习·软件构建·个人开发
David猪大卫3 小时前
【Linux修炼】环境变量、进程地址空间
linux·c语言·经验分享·笔记·学习·ubuntu·centos
叼烟扛炮4 小时前
Linux 学习笔记(五十六):IO 多路复用初探——select 的“三宗罪”
linux·服务器·数据库·笔记·学习·php
叼烟扛炮10 小时前
Linux 学习笔记(五十八):IO 多路复用封神——epoll 底层原理揭秘
linux·运维·服务器·网络·笔记·学习·php
陈布衣12 小时前
MySQL(1)_MySQL 5.7.21 Linux 安装笔记
linux·笔记·mysql
缘来是你远去是我15 小时前
本地个人笔记exe
笔记
FakeOccupational15 小时前
【电路笔记 STM32】RTC配置:晶振选择+闹钟Configuration+中断设置
笔记·stm32·实时音视频
迪康coolmu16 小时前
企业U盘管控落地实战:基于迪康端点安全一体化管理系统的移动存储安全实践
运维·人工智能·经验分享·笔记·安全·电脑
Z21-X18 小时前
云原生运维学习笔记:容器技术的演进、底层原理与 Docker 全生命周期管理
运维·笔记·学习·云原生
Rabitebla1 天前
【Linux 底层原理】进程(十):进程等待详解---从僵尸进程到 wait、waitpid 与 status
linux·c++·笔记·学习·visual studio