今日内容总结

jQuery查找标签

1.基本选择器
	$('#d1')	id选择器
 	$('.c2')	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="xiaochen"]') 查找username等于xiaochen
5.基本筛选器
	: frist // 第一个
 	: last //  最后一个
 	:eq(index)// 索引等于index的元素
  	:even //   匹配所有索引值未偶数的元素 从0开始计数
  	:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
    :gt(index)// 匹配所有大于给定索引值的元素
    :lt(index)// 匹配所有小于给定索引值的元素
    :not(元素选择器)// 移除所有满足not条件的标签
    :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
    $('li:frist') 优化 $('li').frist()
    
6.表单筛选器
	$(':text')
 	$(':password')
   
	$(':checked')		checked与selected都会找到
 	$(':selected')		selected
    
7.筛选器方法
	 $("#id").next()
    $("#id").nextAll()
    $("#id").nextUntil("#i2")
	 $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们
 	
   

操作标签

1.class操作
	addClass()				#添加指定的css类名
	removeClass()			#移除指定的css类名
    hasClass()				#判断样式是否存在
    toggleClass()			#切换css类名 有移除 没有添加
2.位置操作
	$(window).scrollTop() # 获取匹配元素相对滚动条顶部的偏移
	offset() # 获取匹配元素在当前窗口的相对偏移或设置元素位置
	position() # 获取匹配元素相对父元素的偏移
	scrollLeft() # 获取匹配元素相对滚动条左侧的偏移
3.文本操作
	text()	==  innerText
	html()  ==  innerHTML
	val()   ==  value
    jQuery对象[0].files  ==  files[0]
4.创建标签
	document.createElement()	$('<a>')
5.属性操作
	attr()/removeAattr()
  	attr针对动态变化的属性获取会失真
    	prop('checked') prop('selected')
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(){})
 	ps:默认就用方式1 不行了再用方式2
#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页面框架

前端关于页面的搭架太过于繁琐 但是我们可以使用别人写好的代码
#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使用简介

	可以前往Bootstrap的官方文档直接复制即可使用模板 具体的细节慢慢调整即可
    1.图标篇
    	由于Bootstrap所提供的图标有点少 可以使用下面的网址
        https://fontawesome.com.cn/
        用法于Bootstrap相同 且与Boostart兼容	
	2.导航条
    	class = 'navbar navbar-inverse'