前端开发 6 jQuery使用与Bootstrap

今日内容详细

目录

• 今日内容详细
  • jQuery查找标签
    • 1.基本选择器
    • 2.组合选择器
    • 3.层级选择器
    • 4.属性选择器
    • 5.基本筛选器
    • 6.表单筛选器
    • 7.筛选器方法
  • 操作标签
  • 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属性名并且值等于jason的input标签

5.基本筛选器

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

6.表单筛选器

只能用于form表单
	$(':text')
	$(':password')
	$(':checked')	有小bug 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()			classList.add()
	removeClass()		classList.remove()
	hasClass()			classList.contains()
	toggleClass()		classList.toggle()
2.位置操作
	$(window).offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
	$(window).position()// 获取匹配元素相对父元素的偏移
	$(window).scrollTop()// 获取匹配元素相对滚动条顶部的偏移
	$(window).scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
3.文本操作
	text()				innerText
	html()				innerHTML
	val()				value
	jQuery对象[0].files	files[0]
4.创建标签
	document.createElement()	$('<a>')
5.属性操作
	attr()/removeAttr()
xxxAttribute()
	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 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
网址:
https://v3.bootcss.com/getting-started/#examples

页面框架

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

版本有很多 使用V3即可

文件结构
	bootstrap.css
 	bootstrap.js
	ps:js部分是需要依赖于jQuery
  
CDN
<link rel="stylesheet" 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.其他