今日内容概要

• jQuery查找标签
• jQuery节点操作
• 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或者class标签含有c1的或者span标签
3.层级选择器
	$('div p')				查找div标签下所有的p标签
	$('div>p')				查找div标签下的儿子p标签
	$('div+p')				查找div标签同级别下紧邻着的p标签
	$('div~p')				查找div标签同级别下所有的p标签
	
4.属性选择器
	$('[username]')			查找含有username属性名的标签
	$('[username]="jason"')	查找含有username属性名并且值为jason的标签
	$('input[username]="jason"')
	查找属性名含有username的input标签并且值为jason
5.基本筛选器
	$('标签名:first')				查找第一个对应的标签
	$('标签名:last')				查找最后一个对应的标签
	$('标签名:eq(index)')			查找索引等于index的那个元素
	$('标签名:even')				匹配所有索引值为偶数的元素
	$('标签名:odd')				匹配所有索引值为奇数的元素
	$('标签名:gt(index)')			匹配所有大于给定索引值的元素
	$('标签名:lt(index)')			匹配所有小于给定索引值的元素
	$('标签名:not(元素选择器)')		移除所有满足not条件的标签获取剩余标签
	$('标签名:has(元素选择器)')		选取所有包含一个或者多个标签在其内的标签(指的是从后代元素找)
	还有优化的写法
		$('标签名:first')	优化后  $('标签名').first()
6.表单筛选器
	$(':text')						针对表单标签查找text
	$(':password')					查找password
	...								其他同理
	$(':checked')					checked与selected都会找到
	$(':selected')					只会找到selected
7.筛选器方法
	$('#id').next()					下一个元素
	$('#id').nextAll()				往下的所有元素
	$('#id').nextUntil('#id2')		往下的所有元素 直到遇到匹配的元素
	$('#id').prev()					上一个元素
	$('#id').prevAll()				往上的所有元素
	$('#id').prevUntil('#id2')		往上的所有元素 直到遇到匹配的元素
	$('#id').parent()				查找当前元素的父辈元素
	$('#id').parents()				查找当前元素的所有父辈元素
	$('#id').parentsUntil()			查找当前元素的所有的父辈元素 直到遇到匹配的元素
	$('#id').children()				查找当前标签的儿子标签
	$('#id').siblings()				查找当前标签的兄弟标签

操作标签

1.class操作
	addClass()		添加指定的CSS类名		classList.add()
	removeClass()	移除指定的CSS类名		classList.remove()
	hasClass()		判断样式存不存在		classList.contains()
	toggleClass()	样式存在就移除 不存在就添加	classList.toggle()
2.位置操作
	offset()			获取匹配元素在当前窗口的相对偏移或设置元素位置
	position()			获取匹配元素相对父元素的偏移
	scrollTop()			获取匹配元素相对滚动条顶部的偏移
	scrollLeft()		获取匹配元素相对滚动条左侧的偏移
3.文本操作
	html()			innerHTML   	操作html内容
	text()			innerText		 操作文本内容
	val()			value			 操作值
4.创建标签
	$('<标签名>')				document.createElement()
5.属性操作
	attr()/removeAttr()			xxxAttribute()
	用于checkbox和radio的方法
	prop()			获取属性
	removeProp()	移除属性
6.文档处理
	$(A).append(B)			把B追加到A中
	$(A).appendTo(B)		把A追加到B中
 	$(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()					删除匹配的元素集合中所有的子节点

jQuery事件

JS绑定事件
	标签对象.on事件名 = function(){}
jQuery事件绑定
	方式1:
		jQuery对象.事件名(function(){})
	方式2:
		jQuery对象.on('事件名称',function(){})
	默认用方式1就行 不行了再用方式2
click(function(){...})			点击事件
hover(function(){...})			悬浮事件
blur(function(){...})			丢失焦点事件
focus(function(){...})			获取焦点事件
change(function(){...})			内容改变焦点
ps:补充
	clone属性
		clone(true)		默认不可隆事件 加true就可以

事件相关补充

1.取消后续事件
	事件函数的最后return false即可
2.阻止事件冒泡
	事件函数的最后return false即可
3.等待页面加载完毕之后再执行代码
	$(function(){})						缩略写法
	$(document).ready(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])

Bootstrap页面框架

别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能
版本有很多 使用V3即可
文件结构
	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.其他
        参考官方文档