属性操作
属性操作就是给标签增加删除等的操作
1.js操作属性
1.增 node.setAttribute('k','v');
2.查 node.getAttribute('k');
2.删 node.removeAttribute('k');
2.jQuery操作属性
1. 查 jQuery对象.attr('属性名'） 返回第一个匹配元素的属性值
2. 增 jQuery对象.attr('属性名'，‘值’) 为所有匹配元素设置一个属性值
jQuery对象.attr({k1: v1, k2:v2}) 为所有匹配元素设置多个属性值
3.删 removeAttr() 从每一个匹配的元素中删除一个属性
//4.prop() checkbox radio
//5.removeProp()
//ps:
//对于标签的自动移属性，使用attr方法，不要使用prop方法
//总结。。。
<body>
<div id="d1"></div>
<div id="d2"></div>
<script>
//1.js设置属性
var div1 = document.getElementById('d1')
div1.setAttribute('name','username')
console.log(div1.getAttribute('name')) //username
div1.removeAttribute('name')
console.log(div1) //<div id="d1"></div>
//2.jQuery设置属性
$('#d2').attr('name','username')
console.log($('#d2').attr('name')) //username
$('#d2').attr({'age':18,'gender':'male'})
console.log($('#d2').attr('age'))//18
$('#d2').removeAttr('age')
console.log($('#d2')) //S.fn.init [div#d2
</script>
</body>
用于checkbox和radio
1.prop() 获取属性
2.removeProp() 移除属性
ps:1.在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
2.对于标签的自定义属性，使用attr方法获取，而不要使用prop方法
<body>
<input type="checkbox" id="d3">
<input type="radio" id="d4" username="kevin">
<script>
$('#d3').prop('checked',true)
console.log($('#d3').prop('checked')) ///true
$("#d3").removeProp('checked')
console.log($('#d3').prop('checked'))
$("#d4").attr('checked', "checked");
console.log($('#d4').prop('checked')) //true
</script>
</body>
总结一下：
1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
也叫做节点操作
1.js中如何创建一个标签出来
document.createElement('标签名');
2.jQuery如何创建一个标签
1.创建标签
var a = $('<标签名>')
2.添加文本
a.text('aaa')
a.html('bbb')
3.添加属性
a.attr('id','d1')
4.t添加至另一个标签里
elej.append(a)
<body>
<div id = 'd1'></div>
<script>
var a = $('<a>')
a.attr('href','http://www.baidu.com')
a.text('点我')
$('#d1').append(a)
console.log($('#d1'))
</script>
</body>
克隆-clone
1.clone方法不加参数true，克隆标签但不克隆标签带的事件
2.clone方法加参数true，克隆标签并且克隆标签带的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<style>
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
}
#b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>
<script>
$('#b1').click(function () {
//产生新的标签
$(this).clone().insertAfter(this) //// clone克隆默认情况下只克隆标签的样子，不可隆事件
})
$('#b2').click(function () {
//产生新的标签
$(this).clone(true).insertAfter(this) //clone方法加参数true，克隆标签并且克隆标签带的事件
})
</script>
</body>
</html>
事件
常用事件
1.click(function(){...})
2.hover(function(){...})
3.blur(function(){...})
4.focus(function(){...})
5.change(function(){...})
6.keyup(function(){...})
7.input监控
8.$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})
绑定事件的两种方式
1.jQuery对象.事件(匿名函数)
2.jQuery对象.on('事件'，匿名函数) ---功能更强大，支持事件委托
<body>
<button id="btn1">点击</button>
<button id="btn2">点击</button>
</body>
<script>
//方式一
$('#btn1').click(function (){
alert(123)
})
//方式二
$('#btn2').on('click',function (){
alert(321)
})
</script>
hover事件
jQuery对象.事件( ，)
第一个参数鼠标移进去操作，第二个移出去操作
<body>
<p id="p1"></p>
<script>
$('#p1').hover(function (){
console.log("进去")
},function (){
console.log("出去")
})
</script>
</body>
input事件--实时监听
1.如github登陆页面-输入框
<body>
<div>
username:<input type="text" id = 'd1' >
<input type="submit" id = 'd2'>
</div>
<script>
$('#d1').on('input',function () {
console.log(this.value)
})
</script>
</body>
阻止后续事件的执行
1.匿名函数里添加return false
2.在形参里添加e，函数体里加e.preventDefault()
<body>
<form action="">
<span id = 'd2'></span>
<input type="submit" id = 'd1'>
</form>
<script>
//需求：点击提交按钮，在按钮前出现加油两字
// $('#d1').click(function (){
// $("#d2").text('加油')
// })
// //1. 匿名函数里添加return false
// $('#d1').click(function (){
// $("#d2").text('加油')
// return false
// })
//2.在形参里添加e，函数体里加e.preventDefault()
$('#d1').click(function (e){
$("#d2").text('加油')
e.preventDefault()
})
</script>
</body>
阻止事件冒泡
1.匿名函数里添加return false
2.在形参里添加e，函数体里加e.stopPropagation()
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script>
//需求：点击三个标签，分别打印一些东西，但点击span标签只出现span字母
$('div').click(function (){
console.log('divdivdivdiv')
})
$('p').click(function (){
console.log('pppppppp')
})
//问题：点击‘点我’，打印了三行字母
// $('span').click(function (){
// console.log('span')
// })
//方式一：匿名函数里添加return false
// $('span').click(function (){
// console.log('span')
// return false
// })
//方式二：在形参里添加e，函数体里加e.stopPropagation()
$('span').click(function (e){
console.log('span')
e.stopPropagation()
})
</script>
</body>
页面载入
等待页面加载完毕之后再执行的代码
1.js中如何等待页面载入
window.onload = function () {}
2.在jQuery中如何等待页面载入
1.方式一：
$(document).ready(function(){
// 在这里写你的JS代码...
})
2.方式二：简写
$(function(){
// 你在这里写你的代码
})
3.方式三：把js代码放在body的最下面，最后加载就可以了
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
1.jQuery对象.on('事件'，匿名函数) ---功能更强大，支持事件委托
2.$('选择区域').on('事件'，‘选择器’，函数) 在指定的区域中委托事件的执行
<body>
<button class="btn">按钮</button>
<div>
<p>
</p>
</div>
<script>
// 给body中的所有button按钮绑定一个点击事件
// $('.btn').click(function (){
// console.log('触发') // 这种绑定事件的方式不能影响动态创建的标签
// })
//解决：利用事件委托
$('body').on('click','.btn',function (){
console.log('触发')
})
</script>
</body>
补充
each
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<script>
$('div').each(function (index,value){
console.log(index,value)
})
var arr = [1, 2, 3, 4, 5];
$.each(arr, function (index, value) {
console.log(index, value);
})
</script>
</body>
data
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。用于保存数据
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
$('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');
bootstrap
简介
1.它的内部封装了好多的css样式、js代码，使用时，只需要把它的类库文件下载下来，引入到你的文档中去，就可以使用了
2.使用的时候，只需要对标签操作class类即可，就是增加class和删除class属性值来达到某个效果
3.资源：去百度搜索bootstrap：https://www.bootcss.com/
4.版本建议选择v3版本
如何使用bootstrap
1.下载bootstrap --用于生产环境
1.官网下载
2.bootcdn
3.使用CDN
2.下载的压缩包需要解压，重要文件：min.js min.css
3.如果只使用bootstrap的css样式，直接引入一个css文件即可
如果你使用了bootstrap 的js代码，必须引入js代码和jQuery文件，因为bootstrap依赖于jQuery文件
学习：https://www.bootcss.com/
布局容器
1.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
2.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
我们在写页面的时候，上来先写一个div class=container,我在写页面的时候，会经常加class=container
栅格系统
1.row col-md-n col-md-offset-n
<div class="container c1">
<div class="row">
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
<hr>
<div class="col-md-8 c1 col-md-offset-2"></div>
</div>
</div>
表格
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>
表单、按钮、图标...
fontawesom、layui、xadmin
作业
//找到本页面中id是i1的标签
undefined
$('#i1');
r.fn.init [div#i1.container]0: div#i1.containerlength: 1[[Prototype]]: Object(0)
//到本页面中所有的h2标签
undefined
$('h2');
r.fn.init [h2, prevObject: r.fn.init(1)]0: h2length: 1prevObject: r.fn.init [document][[Prototype]]: Object(0)
//找到本页面中所有的input标签
undefined
$('input');
r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]0: input#exampleInputEmail1.form-control1: input#exampleInputPassword1.form-control2: input#exampleInputFile3: input4: input5: input6: input7: input#optionsRadios18: input#optionsRadios2length: 9prevObject: r.fn.init [document][[Prototype]]: Object(0)
//找到本页面所有样式类中有c1的标签
undefined
$('.c1');
r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]
//找到本页面所有样式类中有btn-default的标签
undefined
$('.btn-default');
r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]0: button#btnSubmit.btn.btn-defaultlength: 1prevObject: r.fn.init [document][[Prototype]]: Object(0)
//找到本页面所有样式类中有c1的标签和所有h2标签
undefined
$('.c1,h2');
r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]0: h1.c11: h1.c12: h2length: 3prevObject: r.fn.init [document][[Prototype]]: Object(0)
//找到本页面所有样式类中有c1的标签和id是p3的标签
undefined
$('.c1,#p3');
r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]
//找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
undefined
$('.c1,.btn');
r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)]
//找到本页面中form标签中的所有input标签
undefined
$('form input');
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]0: input#exampleInputEmail1.form-control1: input#exampleInputPassword1.form-control2: input#exampleInputFilelength: 3prevObject: r.fn.init [document][[Prototype]]: Object(0)
//找到本页面中被包裹在label标签内的input标签
undefined
$('label>input');
r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]0: input1: input2: input3: input4: input#optionsRadios15: input#optionsRadios2length: 6prevObject: r.fn.init [document][[Prototype]]: Object(0)
//找到本页面中id为p2的标签后面所有和它同级的li标签
undefined
$('#p2~li');
r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)]0: li1: li2: li3: li4: li5: li6: li7: lilength: 8prevObject: r.fn.init [document][[Prototype]]: Object(0)
//找到id值为f1的标签内部的第一个input标签
undefined
$('#f1 input:first');
r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]0: input#exampleInputEmail1.form-controllength: 1prevObject: r.fn.init [document][[Prototype]]: Object(0)
//找到id值为my-checkbox的标签内部最后一个input标签
undefined
$('#my-checkbox input:last');
r.fn.init [input, prevObject: r.fn.init(1)]0: inputlength: 1prevObject: r.fn.init [document][[Prototype]]: Object(0)
//找到id值为my-checkbox的标签内部没有被选中的那个input标签
undefined
$('#my-checkbox input[checked!="checked"]' );
r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document][[Prototype]]: Object(0)
//找到所有含有input标签的label标签
undefined
$('label>input');
r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]