jQuery

jQuery查找标签

# 基本选择器
$("#id") # id选择器
$("tagName") # 标签选择器
$(".className") # class选择器

# 组合选择器
$("div.c1")		     # 找到有c1 class类的div标签
$('div#d1')		     # 查找id是d1的div标签
$('span.c1') 		 # 查找含有c1样式类的span标签
$('div,span,p')		 # 查找div或者span或者p标签
$('#d1,.c1,span')     # 查找id是d1的或者class含有c1的或者span标签

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

# 属性选择器
$('[username]')	   # 查找含有username属性名的标签
$('[username="jason"]')	
# 查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')

# 基本筛选器
:first  # 第一个
:last   # 最后一个
:eq(index)  # 索引等于index的那个元素
:even   # 匹配所有索引值为偶数的元素，从 0 开始计数
:odd    # 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)  # 匹配所有大于给定索引值的元素
:lt(index)  # 匹配所有小于给定索引值的元素
:not(元素选择器)  # 移除所有满足not条件的标签
:has(元素选择器)
# 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first')	
优化：$('li').first()

# 表单筛选器
$(':text')
$(':password')
$(':checked')		# checked与selected都会找到
$(':selected')		# selected

# 筛选器方法
"下一个元素"
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

"上一个元素"
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

"父亲元素"
$("#id").parent()
$("#id").parents()  # 查找当前元素的所有的父辈元素
$("#id").parentsUntil() 
# 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

$("#id").children();    # 儿子们
$("#id").siblings();    # 兄弟们

# 查找
	搜索所有与指定表达式匹配的元素，这个元素是找出正在处理的元素的后代元素的好方法。
$("div").find("p")等价于$("div p")

# 筛选
	筛选出与指定表达式匹配的元素集合，这个方法用于缩小匹配的范围，用逗号分隔多个表达式。
$("div").filter(".c1")等价于$("div.c1")
# 从结果集中过滤出有c1样式类的

操作标签

# class操作
addClass()			# classList.add()
removeClass() 		#  classList.remove()
hasClass() 			#  classList.contains()
toggleClass()		#  classList.toggle()

# 位置操作
 $(window).scrollTop()

# 文本操作
text()					innerText
html()					innerHTML
val()					value
jQuery对象[0].files	    files[0]

# 创建标签
	document.createElement()  $('<a>')

# 属性操作
attr()/removeAttr()/xxxAttribute()
attr针对动态变化的属性获取会失真
prop('checked') prop('selected')

# 文档处理
$(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

"""
补充:
    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

# 表格样式
	<table class="table table-hover table-striped">
	颜色
 	 <tr class="success">
# 表单标签
	class = "form-control"
# 按钮组
	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.其他
        参考官方文档