前端第六天--jQuery操作与bootstrap操作
目录
jQuery操作与bootstrap操作
今日内容概要
- jQuery查找标签
- 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属性名并且值等于jason的input标签
5.基本选择器
:first // 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从0开始计数
:odd // 匹配所有索引值为奇数的元素，从0开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足not条件的标签
:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)(通过子标签找父标签)
$('li:first') 优化 $('li').first()
6.表单筛选器
$(':text')
$(':password')
$(':checked') checked与selected都会被找到
$('selected') 只有selected
7.筛选器方法
$('#id').next() 找到该id元素的下一个元素
$('#id').nextAll() 找到该id元素的下边所有元素
$('#id').nextUntil('#i2') 找到该id元素的下边所有元素直到#i2
$('#id').prev() 找到该id标签的上一个元素
$('#id').prevAll() 找到该id元素的上边所有元素
$('#id').prevUntil('#i2') 找到该id元素的上边所有元素直到#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).scrollTop() // 回到顶部
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).perpend(B) // 把B前置到A
$(A).perpendTo // 把A前置到B
$(A).after(B) // 把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面
$(A).before(B) // 把B放到A前面
$(A).insertBefore // 把A放到B的前面
remove() // 从DOM中删除所有匹配的元素
empty() // 删除匹配的元素集合中所有的子节点
jQuery事件
JS绑定事件
标签对象.on事件名 = function(){}
jQuery事件绑定
方式一：
jQuery对象.事件名(function(){})
方式二：
jQuery对象.on('事件名称',function(){})
ps:默认就用方式一 不行再用方式二
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])
Bookstarp页面框架
别人已经提前写好了一大堆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自动提示问题
最好本地导入几次
# 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <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>-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<p>想干饭了</p>
<a href="">带我去吃饭</a>
</body>
</html>
核心部分讲解
使用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
'''分完的里面还可以再分，还是12份'''
重要样式
1.表格样式
<table class="table table-hover table-striped">
颜色
<tr class="success">
2.表单标签
class = "form-control"
3.按钮组
class = "btn btn-primary btn-block"
"""
在该网站直接找到然后cv就行
"""
组件
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
https://fontawesome.com.cn/
2.导航条
class="navbar navbar-inverse"
3.其他
浙公网安备 33010602011771号