jQuery查找标签、操作标签、事件和动画效果，Bootstrap页面框架的介绍和使用讲解

今日内容

jQuery查找标签

1.基本选择器：

$('#d1')	id选择器
$('.c1')	class选择器
$('div')	标签选择器

2.组合选择器：

$('div#d1')	查找id是d1的div标签
$('span.c1')	查找含有c1样式类的span标签
$('div,span,p')	查找div或span或p标签
$('#d1,.c1,span')	查找id是d1或含有c1样式类或span标签

3.层级选择器：

$('div p')	查找div里面所有的后代p标签
$('div>p')	查找div里面的儿子p标签
$('div+p')	查找div同级下面紧挨着的p标签
$('div~p')	查找div同级下面的所有p标签

4.属性选择器：

$('[a]')	查找含有a属性名的标签
$('[a=jason]')	查找含有a属性名并且值等于jason的标签
$('input[a=jason]')	查找含有a属性名 值等于jason的标签 并且带有input标签

5.基本筛选器：

:first	第一个
:last	最后一个
:eq(index)	索引等于index的那个元素
:even	匹配所有索引值为偶数的元素 从0开始计数
:odd	匹配所有索引值为奇数的元素 从0开始计数
:gt(index)	匹配所有大于给定索引值的元素
:lt(index)	匹配所有小于给定索引值的元素
:not(元素选择器)	移除所有满足not条件的标签
:has(元素选择器)	选取所有包含一个或多个标签再内的其他标签（指从后代元素找）

6.表单筛选器：

$(':text')
$(':password')
$(':checked')	checked与selected都能找到
$(':selected')	只能找到selected

7.筛选器方法：

$('#id').next/prev()	找id下/上面的下一个标签
$('#id').nextAll/prveAll()	找id下/上面的所有标签
$('#id').nextUntil('#id1')/prevUntil（'#id1'）	找id下/上面的所有标签知道id1标签停止

$("#id").partent()	找父标签 可以一直点往上找父标签
$("#id").parents()	一次性拿到所有父标签
$("#id").parentsUntil('#i2')	一次性拿苏哦有的父标签直到i2停止
$("#id").children()	找所有的子标签
$("#id").siblings	找所有的同级标签

操作标签

1.class操作：

jQuery	JS
addClass()	classList.add()	添加指定类
removeClass()	classList.remove()	移除指定类
hasClass()	classList.contains()	判断类存不存在
toggieClass()	classList.toggle()	切换类 如果有就移除 没有就添加

2.位置操作：

$(window).scrollTop()  滚动条距离顶部的距离

3.文本操作：

jQuery	JS
text()	innerText	获取标签内的所有文本内容
html()	innerHTML	获取标签内的所有标签包含文本
val()	value	针对用户输入和用户选择的标签
jQuery对象[0].files	files[0]	针对用户上传文件的数据

4.创建标签：

jQuery	JS
$('')	document.createElement()	创建标签

5.属性操作：

jQuery	JS
attr()/removeAttr()	xxxAttribute()	返回属性值/删除属性值
prop('checked/selected')		获取属性
removeprop('checked/selected')		删除属性

6.文档处理：

$(A).append(B)	把A追加到B
$(B).appendTo(A)	把B追加到A
$(A).prepend(B)	把B前置到A
$(A).prependTo(B)	把A前置到B

$(A).after(B)	把B放到A的后面
$(A).insertAfter(B)	把A放到B的后面
$(A).before(B)	把B放到A的前面
$(A).insertBefore(B)	把A放到B的前面
remove()	从DOM中删除所有匹配的元素
empty()	删除匹配的元素集合中的所有子节点

jQuey事件

1.绑定事件：

jQuery	JS
方式1：jQuery对象.事件名(function(){})	标签对象.on事件名 = function(){}
方式2：jQuery对象.on('事件名称,function(){}')

ps:默认用方式1 不行就用方式2

2.clone属性：

clone(true)			默认只克隆样子 不克隆事件
					加true 克隆事件

3.取消后续事件：

事件函数的最后加 return false

4.阻止冒泡事件：

事件函数的最后加 return false

5.等待页面加载完毕后再执行代码：

$(function(){})

4.事件委托：

主要针对动态创建的标签也可以使用绑定的事件
$('body')on('click','button',function(){})
将body内的单击事件委托给button标签执行

jQuery动画效果（了解）

基本：
    show([s,[e],[fn]])
    hide([s,[e],[fn]])
    toggle([s],[e],[fn])
滑动：
	slideDown([s],[e],[fn])
    slideUp([s,[e],[fn]])
    slideToggle([s],[e],[fn])
淡入淡出：
	fadeIn([s],[e],[fn])
    fadeOut([s],[e],[fn])
    fadeTo([[s],o,[e],[fn]])
    fadeToggle([s,[e],[fn]])
自定义：
	animate(p,[s],[e],[fn])

Bootsstrap页面框架

别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能

版本有很多 使用V5即可

文件结构
	bootstrap.css
 	bootstrap.js
	ps:js部分是需要依赖于jQuery

CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

pycharm自动提示问题
	最好本地导入几次

核心部分讲解

使用bootstrap其实只需要操作标签的样式类即可

布局容器
	class = "container"				有留白
 	class = "container-fluid"		 没有留白
栅格系统
	class = "row"					一行均分12份
		class = "col-md-8"			 划分一行的12份
屏幕参数
	col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
	col-md-offset-3

重要样式

1.表格样式
	<table class="table table-hover table-striped">
	颜色
 	 <tr class="success">
2.表单标签
	class = "form-control"
3.按钮组
	class = "btn btn-primary btn-block"

组件

1.图标
	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
	https://fontawesome.com.cn/
2.导航条
	class="navbar navbar-inverse"
3.其他