前端三件套系例之JQuery——JQuery基础、JQuery选择器、JQuery文本属性样式操作、JQuery操作DOM

文章目录

• 1 JQuery基础
• • 1. 了解jQuery
  • • 1.1 什么是jQuery
    • 1.2 什么事JS类库
    • 1.3 常见JS类库
    • 1.4 jQuery的优势
    • 1.5 jQuery的版本
    • 1.6 jQuery 相关网站
  • 2 jQuery 基本使用
  • • 2.1 安装
    • 2.2 jQuery对象
    • 2.3 文档就绪事件
    • 2.4 连贯操作
    • 2.5 jQueryDOM和jsDOM
• 2 JQuery选择器
• • • 1 基本选择器
    • 2 层级选择器
    • 3 过滤选择器
    • 4 内容选择器
    • 5 可见性选择器
    • 6 属性选择器
    • 7 子元素选择器
    • 8 表单选择器
    • 9 表单对象选择器
• 3 JQuery文本属性样式操作
• • 1 元素属性操作
  • • 1.1 属性
    • 1.2 class
    • 1.3 代码、文本、值
  • 2 元素样式操作
  • • 2.1 设置CSS
    • 2.2 元素位置
    • 2.3 元素尺寸
• 4 JQuery操作DOM
• • 1 内部插入
  • 2 外部插入
  • 3 包裹
  • 4 替换
  • 5 删除
  • 6 复制

1 JQuery基础

1. 了解jQuery

1.1 什么是jQuery

• jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库
• jQuery极大的简化了JavaScript 编程

1.2 什么事JS类库

• 它就是一些函数的集合，就是把特定效果的代码写好，你只需要在用的时候要用很少的代码去调用。
• 起主导作用的是你的代码，由你来决定何时使用类库。

1.3 常见JS类库

• jQuery
• ExtJS
• prototype.js
• zepto.js

1.4 jQuery的优势

• 开源 免费
• 便捷的选择器
• 方便的DOM操作
• 方便的动画特效
• 易用的ajax操作
• 丰富的插件扩展
• 解决浏览器兼容性效果

1.5 jQuery的版本

1.x.x的版本是可以 支持 IE6~IE8的
2.x.x到3.x.x 的版本，不在兼容IE8以及以下浏览器

1.6 jQuery 相关网站

• 官网 https://jquery.com/
• 文档API： http://jquery.cuishifeng.cn/index.html

2 jQuery 基本使用

2.1 安装

下载到本地，再引入
下载地址：https://jquery.com/download/

<script src="jquery-3.3.1.min.js"></script>
<script>
	//注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
</script>

或者 直接使用CDN

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
	code...
</script>

BootCDN jQuery各个版本地址： https://www.bootcdn.cn/jquery/

2.2 jQuery对象

$是jQuery的别名

jQuery('.item').show()
//等同于
$('.item').show()

$对象可以用作选择器获取元素，还可以创建DOM对象

2.3 文档就绪事件

$(document).ready(function(){

   // 开始写 jQuery 代码...

});

上述写法可以简写

$(function(){

   // 开始写 jQuery 代码...

});

2.4 连贯操作

//对象可以连贯调用
$(dom).find('img').css('border','1px solid #ccc').css('color', 'red').prop('src', '1.jpg').toggle()

2.5 jQueryDOM和jsDOM

• 通过原生js获取的dom对象，我们称之为jsDOM或者原生DOM
• 通过jQuery选择器获取的dom对象，我们称之为 jQuery DOM
• jQuery DOM本质上 是由 jsDOM组成的集合，是个类数组对象。可以通过 [索引] 获取其中的jsDOM
• $(jsDOM) 可以转为 jQuery DOM

2 JQuery选择器

通过选择器，可以获取到页面元素。jQuery具有强大的选择器，跟CSS3选择器类似

1 基本选择器

#id			根据给定的ID匹配一个元素
element		根据给定的元素标签名匹配所有元素
.class		根据给定的css类名匹配元素。
*			匹配所有元素
selector1,selector2,selectorN	将每一个选择器匹配到的元素合并后一起返回

2 层级选择器

ancestor descendant	在给定的祖先元素下匹配所有的后代元素
parent>child		在给定的父元素下匹配所有的子元素
prev+next			匹配所有紧接在 prev 元素后的 next 元素
prev~siblings		匹配 prev 元素之后的所有 siblings 元素

3 过滤选择器

:first			获取第一个元素
:not(selector)	去除所有与给定选择器匹配的元素
:even			匹配所有索引值为偶数的元素，从 0 开始计数
:odd			匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)		匹配一个给定索引值的元素
:gt(index)		匹配所有大于给定索引值的元素
:lang       	选择指定语言的所有元素。1.9+
:last			获取最后个元素
:lt(index)		匹配所有小于给定索引值的元素
:header			匹配如 h1, h2, h3之类的标题元素
:animated		匹配所有正在执行动画效果的元素
:focus			匹配当前获取焦点的元素
:root       	选择该文档的根元素   1.9+
:target     	选择由文档URI的格式化识别码表示的目标元素    1.9

4 内容选择器

:contains(text)	匹配包含给定文本的元素
:empty			匹配所有不包含子元素或者文本的空元素
:has(selector)	匹配含有选择器所匹配的元素的元素
:parent			匹配含有子元素或者文本的元素

5 可见性选择器

:hidden		匹配所有不可见元素，或者type为hidden的元素
:visible	匹配所有的可见元素

6 属性选择器

[attribute]			匹配包含给定属性的元素
[attribute=value]	匹配给定的属性是某个特定值的元素
[attribute!=value]	匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value]	匹配给定的属性是以某些值开始的元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素
[attribute*=value]	匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]	复合属性选择器，需要同时满足多个条件时使用

7 子元素选择器

:first-child		匹配所给选择器( :之前的选择器)的第一个子元素
:first-of-type  	结构化伪类，匹配E的父元素的第一个E类型的孩子		1.9+
:last-child			匹配最后一个子元素
:last-of-type   	结构化伪类，匹配E的父元素的最后一个E类型的孩子	1.9+
:nth-child()		匹配其父元素下的第N个子或奇偶元素
:nth-last-child()	选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个	1.9+
:nth-last-of-type()	选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个	1.9+
:nth-of-type()  	选择同属于一个父元素之下，并且标签名相同的子元素中的第n个	1.9+
:only-child			如果某个元素是父元素中唯一的子元素，那将会被匹配
:only-of-type  		选择所有没有兄弟元素，且具有相同的元素名称的元素	1.9+

8 表单选择器

:input			匹配所有 input, textarea, select 和 button 元素
:text			匹配所有的单行文本框
:password		匹配所有密码框
:radio			匹配所有单选按钮
:checkbox		匹配所有复选框
:submit			匹配所有提交按钮，匹配 type="submit" 的input或者button
:image			匹配所有图像域
:reset			匹配所有重置按钮
:button			匹配所有按钮
:file			匹配所有文件域

9 表单对象选择器

:enabled		匹配所有可用元素
:disabled		匹配所有不可用元素
:checked		匹配所有选中的被选中元素(复选框、单选框等，select中的option)
:selected		匹配所有选中的option元素

3 JQuery文本属性样式操作

1 元素属性操作

1.1 属性

attr(name|pro|key,val|fn)	设置或返回被选元素的属性值
removeAttr(name)			从每一个匹配的元素中删除一个属性
prop(n|p|k,v|f)				获取在匹配的元素集中的第一个元素的属性值
removeProp(name)			用来删除由.prop()方法设置的属性集

1.2 class

addClass(class|fn)			为每个匹配的元素添加指定的类名
removeClass([class|fn])		从所有匹配的元素中删除全部或者指定的类
toggleClass(class|fn[,sw])	如果存在（不存在）就删除（添加）一个类
hasClass(class)				检查当前的元素是否含有某个特定的类，如果有，则返回true

1.3 代码、文本、值

html([val|fn])		取得第一个匹配元素的html内容
text([val|fn])		取得所有匹配元素的内容
val([val|fn|arr])	获得匹配元素的当前值

2 元素样式操作

2.1 设置CSS

css(name|pro|[,val|fn])		访问匹配元素的样式属性

2.2 元素位置

offset()		获取匹配元素在当前视口的相对偏移
position()		获取匹配元素相对父元素的偏移
scrollLeft()	获取匹配元素相对滚动条顶部的偏移
scrollTop()		获取匹配元素相对滚动条左侧的偏移

2.3 元素尺寸

widht()			取得第一个匹配元素当前计算的宽度值（px）
height()		取得匹配元素当前计算的高度值（px)
innerWidth()	匹配元素内部区域宽度（包括补白、不包括边框）
innerHeight()	匹配元素内部区域高度（包括补白、不包括边框）
outerWidth()	匹配元素外部宽度（默认包括补白和边框）
outerHeight()	匹配元素外部高度（默认包括补白和边框）

4 JQuery操作DOM

1 内部插入

append(content|fn)		向每个匹配的元素内部追加内容
appendTo(content)		把所有匹配的元素追加到另一个指定的元素元素集合中
prepend(content|fn)		向每个匹配的元素内部前置内容
prependTo(content)		把所有匹配的元素前置到另一个、指定的元素元素集合中

2 外部插入

after(content|fn)		在每个匹配的元素之后插入内容
before(content|fn)		在每个匹配的元素之前插入内容
insertAfter(content)	把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content)	把所有匹配的元素插入到另一个、指定的元素元素集合的前面

3 包裹

wrap(html|ele|fn)		把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap()				这个方法将移出元素的父元素
wrapAll(html|ele)		移出元素的父元素
wrapInner(html|ele|fn)	将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

4 替换

replaceWith(content|fn)		将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector)		用匹配的元素替换掉所有 selector匹配到的元素

5 删除

empty()			删除匹配的元素集合中所有的子节点
remove([expr])	从DOM中删除所有匹配的元素
detach([expr])	从DOM中删除所有匹配的元素 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

6 复制

clone([Even[,deepEven]])	克隆匹配的DOM元素并且选中这些克隆的副本