JQuery基础

JQuery基础

---

什么是JQuery

JQ是JS库，是对JavaScript的一个封装，也即是说JQ提供了大量的API，在开发时，以最少代码实现最多的功能。于2006年开源,现在已经发展成为集JS、CSS、DOM、Ajax于一体的强大的框架体系。
宗旨: write less, do more! (写的少,做得多)

主要功能如下：

1. 控制页面样式
2. 访问和操作DOM
3. 事件处理
4. 提供了大量的插件
5. Ajax技术的封装
6. 提供了大量的动画处理
7. …

---

引入JQuery

一般在body后面引入，防止JQuery加载过慢导致页面空白。

1. 本地引入：需要先下载JS文件，可以上bootCDN复制代码链接下载，代码链接如下：https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js
   将代码保存到本地后引入即可，例如：

   <script src="./js/jquery-3.5.1.js"></script>
   

2. CDN引入：，上bootCDN复制<script>标签即可，例如：

   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
   

注意：如果JS代码写在body前，必须将代码写在ready事件中，ready事件表示所有DOM加载完成之后才执行。例如

$(document).ready(function(){
	console.log($('.box'));
})

// 等价于
$(function(){
	console.log($('.box'))
})

---

选择器

1. 基本选择器：同CSS的简单选择器，如下：

   1. element：元素选择器
   2. #id：id选择器
   3. .class：class选择器
   4. *：通配选择器
   5. [属性]：属性选择器

   例如：

   // 标签选择器
   $('a').css({
       background: 'green'
   }); // 设置指定节点的样式，将样式表作为对象传入
   
   // 类选择器
   $('.box').css({
       color: 'blue',
       background: '#eee',
       'margin-button': '10px',
       marginButton: '10px'
   }); // 当书写中间有横线的样式时，可以用引号引起来，也可以转为小驼峰
   
   // id选择器
   $('#content, a').css({
       border: 'red solid 2px'
   });
   

2. 层次选择器：同CSS，主要如下：

   1. 选择器1 选择器2：选择选择器1的所有的后代元素(选择器2)
   2. 选择器1>选择器2：只选择选择器1的子元素
   3. 选择器1+选择器2：选择紧挨着选择器1的相邻元素(兄弟元素)
   4. 选择器1~选择器2：选择选择器1的所有兄弟元素

3. 过滤选择器：类似于CSS的伪类选择器，主要如下：

   1. :first或first()：第一个元素，例如：$('div:first')等价于$('div').first()
   2. :selected：select里选中的元素
   3. :last或last()：最后一个元素
   4. :not(selector)：除selector之外的元素，例如：$('div:not(div:first)')等价于$('div').not('div:first')
   5. :even：偶数元素
   6. :odd：奇数元素
   7. :eq(n)：第n个元素(从0开始的)
   8. :gt(n)：大于第n个后的元素
   9. :lt(n)：小于第n个后的元素
   10. :header：选择h1-h6所有标题元素
   11. :contains(text)：获取包含指定文本内容的元素
   12. :empty：获取不包含子元素或文本内容的元素
   13. :has (selector)：获取含有选择器所匹配的元素
   14. :parent：获取含有子元素或文本的元素
   15. :hidden：选择display:none或隐藏文本域(hidden)的元素
   16. :visible：和hidden相反

---

属性操作

1. 获取属性值：attr(属性名)
2. 设置属性：attr(属性名, 属性值)
3. 删除属性：removeAttr(属性名)

---

文本操作

1. 获取文本及表单组件内容
   1. html()
   2. text()
   3. val()，仅限表单组件
2. 设置(删除)文本及表单组件内容
   1. html(内容)
   2. text(内容)
   3. val(内容)，仅限表单组件

---

样式操作

1. 设置样式：
   1. css('样式名', '样式值')
   2. css({'样式名1':'样式值1', '样式名2':'样式值2',...})
2. 恢复某个样式：css('样式名', 'initial')
3. 添加类：addClass('类名')或addClass('类名1 类名2 ...')
4. 删除类：removeClass('类名')或removeClass('类名1 类名2 ...')，当参数缺省时，删除所有类

---

元素操作

1. 创建元素节点：$('节点内容')，例如：var e = $('<p>添加标签</p>')
2. 在内部添加DOM节点：
   1. 目标.append(新节点)：在目标节点里的最后添加新节点，例如：$('.wrapper').append(e);
   2. 新节点.appendTo(目标)：在目标节点里的最后添加新节点，例如：e.appendTo($('.wrapper'));
   3. 目标.prepend(新节点)：在目标节点里的最前面添加新节点
   4. 新节点.prependTo(目标)：在目标节点里的最前面添加新节点
3. 在外部添加DOM节点：
   1. 目标.before(新节点)：在目标节点外的前面添加，例如：$('.wrapper').before(e);
   2. 新节点.insertBefore(目标)：在目标节点外的前面添加，例如：e.insertBefore($('.wrapper'));
   3. 目标.after(新节点)：在目标节点外的后面添加
   4. 新节点.insertAfter(目标)：在目标节点外的后面添加
4. 克隆节点：clone()：深拷贝，当参数传true时，会连绑定的事件一块复制
5. 删除节点：
   1. 节点.remove()：删除节点，包括其内容
   2. 节点.remove(选择器)：删除节点中满足选择器的节点
   3. 节点.empty()：清空该节点的所有内容，但保留该节点

---

遍历DOM

$(doms).each(function(index, dom) {...}) // 其中index是下标（从0开始），dom是当前节点