前端(七)
jQuery
属性操作
# 属性操作就是给标签增加删除之类的
# js中如果是自带属性就是点语法不是自带属性就是div.setAttritube('k','v')
JQuery：
1. attr(attrName); # 获取匹配到的属性
2. attr(attrName, value); # 设置一个属性
3. romoveAttr(attrName); # 删除一个属性
操作CheckBox和radio
prop('checked',true); # 增加一个属性
removeProp('checked'); # 删除一个属性
# 在处理CheckBox和radio的时候尽量使用prop不要使用attr
attr和prop的区别：
1. 标签上有的和自定义的属性都使用attr
2. 对于返回布尔值的如CheckBox，radio，option都使用prop
文档处理
# 也可叫节点操作
js创建一个标签：
var a = document.createElement('a');
jQuery创建一个标签：
var a = $('<a>');
let pEle = $('<p>')
pEle.text('你好')
pEle.attr('id','d1')
$('#d1').append($pEle) # 内部尾部追加
克隆
.clong() # 默认只克隆样子，不克隆事件
.clong(true) # 加个true，就可以克隆事件了
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
input监控
绑定事件
$('#btn').click(function () {
alert(123);
})
$('#btn').on('click', function () { # 支持事件委托功能更加强大
alert(123);
})
hover事件
<script>
$("#p1").hover(function () {
console.log(123);
}, function () {
console.log(345);
})
</script>
# 第一个参数是鼠标移进去触发的动作，第二个参数是鼠标移走触发的动作
input
<script>
$('#d1').on('input', function () {
console.log(this.value);
// 只需要在这里向后端发起一个请求携带这此时的值后端给我返回一个结果，我放到页面上去
// ajax朝后端发起请求----------->django中学
})
</script>
阻止后续事件执行
<script>
$("#btn").click(function (e) {
$('.s1').text('趁年轻，学技能');
return false; // 阻止手续事件的执行
e.preventDefault(); // 阻止手续事件的执行
})
</script>
阻止事件冒泡
return false; // 阻止事件冒泡1
e.stopPropagation(); // 阻止事件冒泡2
页面载入
# 等待页面加载完毕之后再执行的代码
# js中如何做的?
window.onload = function () {}
# 在jquery中
# 1.
$(document).ready(function(){
// 在这里写你的JS代码...
})
# 2.
$(function(){
// 你在这里写你的代码
})
# 3.
# 把你的js代码放在body的最下面，最后加载就可以了
事件委托
$('body').on('click', '.btn', function () { // 利用事件委托
console.log('触发了');
})
补充
1. each
2. data
$('div');
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$('div').each(function (value) {console.log(value);});
VM296:1 0
VM296:1 1
VM296:1 2
VM296:1 3
VM296:1 4
VM296:1 5
VM296:1 6
VM296:1 7
VM296:1 8
VM296:1 9
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$('div').each(function (value, index) {console.log(value,index);});
VM430:1 0 <div>1</div>
VM430:1 1 <div>2</div>
VM430:1 2 <div>3</div>
VM430:1 3 <div>4</div>
VM430:1 4 <div>5</div>
VM430:1 5 <div>6</div>
VM430:1 6 <div>7</div>
VM430:1 7 <div>8</div>
VM430:1 8 <div>9</div>
VM430:1 9 <div>10</div>
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$('div').each(function (index, value) {console.log(value,index);});
VM533:1 <div>1</div> 0
VM533:1 <div>2</div> 1
VM533:1 <div>3</div> 2
VM533:1 <div>4</div> 3
VM533:1 <div>5</div> 4
VM533:1 <div>6</div> 5
VM533:1 <div>7</div> 6
VM533:1 <div>8</div> 7
VM533:1 <div>9</div> 8
VM533:1 <div>10</div> 9
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
# BBS项目中用
var arr = [1, 2, 3, 4, 5];
$.each(arr, function (index, value) {
console.log(index, value);
})
##########data的用法
$('div').data('username', 'kevin');
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$('div').first().data('username');
'kevin'
$('div').last().data('username');
'kevin'
$('div').first().removeData('username');
S.fn.init [div, prevObject: S.fn.init(10)]
$('div').first().data('username');
bootstarp
# 内部封装了很多的css样式和js代码。要用只需要下载内库文件，并引入文档中
"""
我们在使用的时候，只需要对标签操作class类即可，就是增加class和删除class属性值来达到某个效果
去百度中搜索bootstrap：https://www.bootcss.com/
版本建议选择v3版本
"""
如何使用bootstrap
1. 在官网下载
2. 使用CDN
3. bootcdn
# 如果你只使用bootstrap 的css样式，直接引入一个css文件即可
# 如果你使用了bootstrap 的js代码，必须引入js代码和jQuery文件，因为bootstrap依赖于jQuery文件
布局容器
<div class="container">
# 左右两边留空白
</div>
<div class="container-fluid">
# 不留空白
</div>
# 所以，以后我们在写页面的时候，上来先写一个div class=container,我在写页面的时候，会经常加class=container
栅格系统
<div class="row"></div> # 把一个div等分成12份
# 如何兼容四种情况的设备呢？
# 给标签添加4个类
表格
table
<table class="table table-striped table-hover table-bordered"> # 务必记住
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
表单
# 针对于单选和复选不要加form-control
按钮
<a href="……" class="btn btn-primary btn-xs">角色</a> # 通过class="btn"可变为按钮 btn-primary改变颜色 btn-xs改变大小
图标
# https://fontawesome.dashgame.com/------------->fontawesome图标库