Web 前端开发笔记
文章平均质量分 73
根据以往的学习经验,将 CSS、Jquery 等知识点进行梳理和汇总,整理成学习笔记,供各位学习。
店伙计
这个作者很懒,什么都没留下…
展开
-
jQuery 学习-DOM篇(七):jQuery 添加和删除父元素
一、使用 wrap() 方法为每个匹配的元素添加父元素使用 $(DOM).wrap(Element) 方法可以为指定元素添加父元素。这个操作也称为元素的包裹。<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $('原创 2021-02-19 11:08:07 · 6907 阅读 · 0 评论 -
jQuery 学习-DOM篇(六):jQuery 替换 DOM 元素
jQuery 替换 DOM 元素一、replaceWith() 方法$(DOM).replaceWith(newContent) 用于替换集合中所有匹配的元素,并且返回被删除的元素集合:<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javasc原创 2021-02-03 16:08:35 · 6293 阅读 · 0 评论 -
jQuery 学习-DOM篇(五):jQuery 使用 clone() 方法拷贝 DOM
使用 clone() 方法可以克隆指定的 DOM 元素,与原生的 cloneNode() 方法不同的是,如果 clone 方法中传递的方法是 true,则会将 DOM 的结构、属性、事件和数据都进行克隆。而原生的 cloneNode 方法,即便传递了 true,也只能是把 DOM 和 内容拷贝过去,无法拷贝事件和属性等。<!DOCTYPE html><html><head> <title></title> <script src="原创 2021-02-03 15:56:28 · 6480 阅读 · 0 评论 -
jQuery 学习-DOM篇(四):jQuery 删除 DOM 元素的方法
jQuery 删除 DOM 节点一、empty() 方法使用 empty() 方法可以删除指定元素内的所有子元素:<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $('document').ready(func原创 2021-01-29 10:54:36 · 10365 阅读 · 0 评论 -
jQuery 学习-DOM篇(三):jQuery 在 DOM 外部插入元素
一、在匹配的元素集合后面插入元素使用 after() 方法可以在匹配的元素集合后面插入元素:<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $('document').ready(function (){原创 2021-01-20 17:51:34 · 6097 阅读 · 0 评论 -
jQuery 学习-DOM篇(二):jQuery 在 DOM 内部插入元素
一、向匹配的元素内部的最后插入元素使用 append() 方法可以向匹配的元素内部插入元素,插入的元素是位于指定元素内部的最后:<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $('document').read原创 2021-01-20 09:56:51 · 5713 阅读 · 0 评论 -
jQuery 学习-DOM篇(一):jQuery 创建元素并添加属性
使用 jQuery 创建元素并添加属性,可以直接使用 $(‘element’) 进行添加:<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $('document').ready(function (){ co原创 2021-01-14 10:44:36 · 6886 阅读 · 0 评论 -
jQuery 学习-样式篇(九):jQuery 存储和删除元素私有数据的方法
html5 dataset 是新的 HTML5 标准,允许在普通的元素标签中嵌入类似 data-* 的属性。有了这个属性就可以更加有序直观的进行数据预设或存储。那么如果在不支持 HTML5 标准的浏览器上,jQuery 提供了一个 .data() 方法来处理这个问题。一、设置或返回元素的数据接口使用 $.data() 方法可以设置或返回元素的数据接口,该方法可以向其中传递 2 个或 3 个参数。如果传递 2 个参数,那么就是指定标签和一个 JSON 对象。如果传递三个参数,则是指定标签、key 和 v原创 2021-01-05 10:12:36 · 5578 阅读 · 1 评论 -
jQuery 学习-样式篇(八):jQuery 设置元素的 CSS 样式
在 jQuery 中,使用 css 方法可以设置元素的 CSS 样式。一、获取元素的样式在原生的 JS 中,需要使用 getComputedStyle() 方法来获得元素的样式值,例如:<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .a { width: 200px; height: 200px; transit原创 2021-01-04 17:27:43 · 6150 阅读 · 0 评论 -
jQuery 学习-样式篇(七):jQuery 控制元素类属性
一、动态增加 class 类使用 addClass() 方法可以动态的为元素添加 class 属性(兼容低版本 IE):<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .a { width: 200px; height: 200px; } .b { background: #ccc; } </st原创 2020-12-31 10:28:07 · 5593 阅读 · 0 评论 -
jQuery 学习-样式篇(六):jQuery 获取和设置表单元素的值
jQuery 获取和设置表单元素的值jQuery 中可以使用 val() 方法处理表单元素的值,例如 input、select 和 textarea:<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(docum原创 2020-12-30 14:21:51 · 6234 阅读 · 0 评论 -
jQuery 学习-样式篇(五):jQuery 设置元素的 html 结构或 text 内容
一、设置或返回元素的 html 内容使用 $('DOM').html() 方法可以设置或返回元素的 html 内容:<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(functi原创 2020-12-29 10:11:12 · 6201 阅读 · 0 评论 -
jQuery 学习-样式篇(四):jQuery 设置和删除元素的属性
一、设置、获取和修改属性及属性值1. 设置单个属性和属性值使用 $(‘DOM’).attr() 可以设置元素的属性和属性值:<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(f原创 2020-12-28 16:45:43 · 6170 阅读 · 1 评论 -
jQuery 学习-样式篇(三):jQuery 选择器类型详解
jQuery 选择器一、ID 选择器ID 选择器是最基本的选择器,jQuery 内部使用了 JavaScript 函数 document.getElementByID() 来处理 ID 的获取。ID 是唯一的,每个 ID 在每个页面中只能使用一次,如果多个元素分配了相同的 ID,将只匹配该 ID 选择集合的第一个 DOM 元素。在 jQuery 中,ID 选择器的命令是 $('#id'):<!DOCTYPE html><html><head> <ti原创 2020-12-25 16:24:07 · 6239 阅读 · 2 评论 -
jQuery 学习-样式篇(二):jQuery 对象与原生 DOM 对象
jQuery 对象和原生对象是有区别的。原生的对象不能使用 jQuery 的方法,jQuery 对象也不能使用原生的方法。如果要想将原生对象转换为 jQuery 对象,只需要使用 $() 。使用 $() 包含的对象就会变成 jQuery 对象。使用原生和 jQuery 方式来编写一个示例,首先是原生方式:<!DOCTYPE html><html><head> <title></title> <script type="text/原创 2020-12-25 16:21:11 · 6079 阅读 · 0 评论 -
jQuery 学习-样式篇(一):如何引用 jQuery
引用 jQuery 有两种方式:引用外链引用本地文件一、引用外链引用外链的方式首先要到 jQuery 官网中,找到 jQuery 的 uncompressed 的版本,并复制弹出框中给出的内容至 HTML 中:<!DOCTYPE html><html><head> <title></title> <script src="http://code.jquery.com/jquery-1.12.4.js" integrity原创 2020-12-25 16:16:03 · 6576 阅读 · 2 评论