jQuery 查找标签 事件 Bootstrap页面框架
jQuery 查找标签
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first') 优化 $('li').first()
表单筛选器
$(':password')
$(':cheked') # 在表单里会找到cheked包含selected的标签
$(':selected') # 只会找到selected 标签
筛选器方法
.next() # 下面得标签
.nextall() # 下面的所有标签
.prev() # 上面的标签
.prevall() # 上面的所有标签
.parent() # 父标签
.parents() # 拿到所有的祖宗标签
.parentsUntil() # 查找父标签到指定的标签就停止
.children() # 所有儿子标签
.siblings() # 所有兄弟标签
注意 $('#id值')的时候别忘记+#
操作标签
1.操作样式
.addClass(); # 添加指定的css类名
DOM操作 classlist.add()
.removeClass(); # 移除指定的CSS类名
DOM操作 removeClass()
.hasClass() # 判断样式存不存在
DOM操作 hasClass()
.toggleClass() # 有就删没有就添加
DOM操作 toggleClass()
2. 位置操作
$(window).scrollTop() # 获取到当前处在浏览器的位置
3.文本操作
$('span').text('aaa') # 添加文本
$('span').html() # 添加文本并识别html语法
$('input').val() # 拿值
$('input')[1].files # 拿文件
4.创建标签
$('<a>')
"如果想用变量名保存一个jQuery对象话要在变量名前面+ $"
5.属性操作
attr() # 添加属性
removeAttr() # 删除属性
"attr针对动态变化的属性获取会失真"
prop('checked') prop('selected') # 判断动态属性有没有
6.文档处理
# 内部添加
$(A).append(B) # 把B追加到A
$(A).prepend(B) # 把B前置到A
#外部添加
$(A).after(B) # 把B放到A后面
$(A).before(B) # 把B放到A前面
# 清空内容
$('body').empty() # 直接清空 body里面的所有东西
jQuery事件
jQuery事件绑定
方式1:
jQuery对象.事件名(function(){})
方式2:
jQuery对象.on('事件名称',function(){})
ps:默认就用方式1 不行了再用方式2
hover(function(){...}) # 悬浮事件
input框实时监测事件
<input type="text">
$('input').on('input',function (){
console.log($(this).val())
})
"输入每一个字符时都会打印，学会后端就可以拿到值去校验"
clone事件
<button style="border: #13e5e5 2px solid">传奇冰雪版，点击就送玉兔</button>
<script>
$('button').click(function (){
$('body').append($(this).clone(true)) # 不加true只会克隆框体 点击没有功能
})
</script>
事件相关补充
1. 取消后续事件
- 在我们遇到标签内含有事件，我们又给他加了一个事件，执行的顺序是 先做我们加的，后做他自己的事件。也可以取消
事件函数的最后加上 return false即可
2. 冒泡事件
- 如果一个div内多个后代标签都有事件(嵌套关系)，那么就会出现冒泡事件。 执行完当前子标签的事件后自动执行父标签的事件。
子事件函数最后加上 return false即可
3.JS代码如果想写在head里
- 就要等待页面加载完毕再执行代码
写在head内:
$(function(){ JS代码 } ) # 缩略写法
$(document).ready(function(){}) # 完整写法
4. 事件委托
- 正常情况下，我们给按钮绑定了一个点击事件，在终端里手动添加一个按钮那么此按钮无法绑定事件。
事件委托可以帮助我们 给动态创建的标签也可以使用绑定的事件。
$('body').on('click','button',function(){
alert('啦啦啦')
})
# 将body内所有的单击事件委托给button标签执行
$('父标签').on('事件名','事件的标识(id值，class值)',function(){})
jQuery动画效果
可以给我们的标签加上一点简单的动画效果
1.放大缩小
$('div').hide(3000) # 3秒内缩小消失
$('div').show(3000) # 3秒内放大原尺寸
$('div').toggle(3000) # 没缩小就缩小没放大就放大
2.滑动
$('div').slideDown(5000) # 向下滑动
$('div').slideUp(5000) # 向上收起
$('div').slideToggle(5000)
3.淡入淡出
$('div').fadeIn(5000) # 淡入
$('div').fadeOut(5000) # 淡 出
fadeTo(5000,0.4) # 达到透明度停止
$('div').fadeToggle(5000) # 有出没入
Bootstrap页面框架
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>
官网下载地址
https://v3.bootcss.com/
页面核心部分
使用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">
table 样式
table-hover 悬浮
table-striped 渐变
table-bordered 边框
2.颜色
<tr class="success">
success
danger
warning
info
active
表格代码
<div class="container ">
<div class="row">
<h2 class="text-center">魔兽世界燃烧的远征</h2>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr class="active">
<th>等级</th>
<th>职业</th>
<th>种族</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>70</td>
<td>防战</td>
<td>人类</td>
</tr>
<tr class="warning">
<td>70</td>
<td>奶骑</td>
<td>德莱尼</td>
</tr>
<tr class="danger">
<td>70</td>
<td>猎人</td>
<td>暗夜精灵</td>
</tr>
<tr class="success">
<td>70</td>
<td>盗贼</td>
<td>侏儒</td>
</tr>
<tr>
<td>70</td>
<td>法师</td>
<td>人类</td>
</tr>
</tbody>
</table>
</div>
</div>
表单
1.表单标签
class = "form-control"
2.按钮组
class = "btn btn-primary btn-block"
<input type="submit" class="btn-success btn-block" >
<input type="button" class="btn-danger btn-block" value="退出">
<a href="" class="btn btn-danger">1</a>
<a href="" class="btn btn-success">2</a>
<a href="" class="btn btn-info">3</a>
<a href="" class="btn btn-danger">4</a>
<a href="" class="btn btn-danger btn-xs" >6</a>
<a href="" class="btn btn-danger btn-sm">7</a>
<a href="" class="btn btn-danger btn-lg">8</a>
<a href="" class="btn btn-danger btn-block">9</a>
表单代码
<div class="col-lg-4 col-lg-offset-4">
<h2 class="text-center">用户注册</h2>
<form action="" >
<p class="has-warning">username:
<input type="text" class="form-control">
</p>
<p class="has-warning">password:
<input type="password" class="form-control">
</p>
<p>province:
<select name="" id="" class="form-control">
<option value="">安徽</option>
<option value="">江苏</option>
</select>
</p>
<p>性别:
<input type="radio" name="性别" checked>男
<input type="radio" name="性别">女
</p>
<input type="submit" class="btn-success btn-block" >
<input type="button" class="btn-danger btn-block" value="退出">
</form>
组件
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
2.导航条
class="navbar navbar-inverse"
