前端学习3-bootstrap、jQuery
学习随记
1.bootstrap 使用步骤
（1）引入相关js代码，先jQuery，再bootstrap
（2）复制HTML结构
（3）更改css样式
（4）复制js代码并修改相关参数
2.
（1）入口函数 $(function(){ });
（2）获取当前元素的索引号 $(this).index();
（3）显示相应索引号的东西，$("li").eq(index).show(); index要先声明
（4）隐藏兄弟，$("li").eq(index).sblings().hide();
3.jQuery效果
3.1 显示隐藏效果
show( )，hide()，toggle()
说明书内方法的参数写在中括号，表示参数可省略
4.事件切换 hover 就是鼠标经过和离开的复合写法
$(".nav>li ").hover(function(){},function(){})第一个function写鼠标经过时的动作，第二个function写鼠标离开时发生的动作
5.jQuery知识，老师讲的动画效果有：
滑动：slideDown() slideUp() slideToggle()
淡入淡出：fadeIn() fadeOut()
6.要使用当前元素的子代元素时，可以用find("li");
要使用当前元素的兄弟元素时，用sibilings();
7.jQuery属性操作 prop() ，attr() ，data()
获取原有属性值 $("a").prop("href");
给属性赋值 $("a").prop("title","提示文字");
获取自定义属性值 $("div").attr("index");
给自定义属性赋值 $("div").attr("index",3);
数据缓存 data()，数据不在dom展示
8.入口函数，等页面加载完再执行代码
$(function(){
})9.change() 用于复选框、文本域等的改变
$("checkbox").change(function(){
})10. $("checkbox:checked").length
:checked选择器，查找被选中的表单元素
length，方法，获取元素个数
11.程序遇到false，就不会再执行
12.获取/设置元素内容（包含标签） html()
$("div").html(); $("div").html("123");获取/设置元素文本内容 text()
$("div").text();
$("div").text("123");获取表单值 val()
$("input").val("123");13.截取字符串的值，如获取￥15.6的数字，p=￥15.6，使用 p.substr(1)
14.toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
如 num=13.37，num.toFixed(num)结果为13.4
15.祖先选择器
parents(" ");16.修改文本框的值可以用change()事件
17.toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
// 选中就修改背景 添加类 check-cart-item
$(this).parents(".cart-item").toggleClass("check-cart-item"); //类名前不能加点18.jQuery尺寸
width()/height()，返回元素的宽度和高度
innerWidth()/innerHeight() ，返回的宽度和高度包含padding
outerWidth()/outerHeight()，返回的宽度和高度包含padding、border
outerWidth(true)/outerHeight(true)，返回的宽度和高度包含padding、border、margin以上返回的值都是数字型，要赋值则直接在括号写值，不用加单位
19.jQuery元素位置
（1）offset 元素距离文档的位置，跟父级和定位没有关系
$("div").offset().top，offset().left；
设置参数如：
$(".son").offset({
top: 200,
left: 200
});（2）position 获取距离带有定位父级位置（偏移）， 如果没有带有定位的父级，则以文档为准。只能获取，不能设置。
（3）页面被卷去的位置，scrollTop() / scrollLeft()，可设置参数
20.animate() 动画函数
有scrollTop属性，可以设置位置
// 不能使用document文档做动画，只能使用html、body元素
$("body,html").stop().animate({
scrollTop: 0
});21.获取当前格式的索引号 index()
22.正则表达式
（1）边界符 ^ $ 分别代表一行（line）的开始和结束的位置
var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
/abc/ 只要包含有abc这个字符串返回的都是true
var reg = /^abc/; 以abc开头
var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc')); // true
（2）字符类: [ ] 表示有一系列字符可供选择，只要匹配其中一个就可以了
/[abc]/; 只要包含有a 或者 包含有b 或者包含有c 都返回为true
andy baby color
（3）/^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 true
aa a b c
（4）/^[a-z]$/; // 26个英文字母任何一个字母返回 true - 表示的是a 到z 的范围
a b c 对，aa 错
（5）字符组合： /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true
a b ……z ，A,Z, _ - 对，aa ！错
（6）/^[^a-zA-Z0-9_-]$/，如果中括号里面有^ 表示取反的意思，千万不要和边界符 ^ 别混淆
a B 7 _ - 错，！对
23.事件处理on() 绑定事件
（1）在一个元素上同时绑定多个事件
$("div").on({
mouseenter:function(){$(this).css("background","red");},
click:function(){$(this).css("background","blue");}
)}
// 鼠标经过和离开都会触发
$("div").on("mouseenter mouseleave", function () {
$(this).toggleClass("current");
});（2） on可以实现事件委托（委派），把原来加给子元素身上的事件绑定在父元素身上
// $("ul li").click();
$("ul").on("click", "li", function () {
alert(11);
});
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li24.动态创建li
var li=$("")25.jQuery拷贝对象
26.js插件使用步骤
（1）引入相关文件。（jQuery文件和插件文件）
（2）复制相关html、css、js（调用插件）。
27.本地存储localStor age
localStorage.setItem('myCat', 'Tom');
var todolist = [{
titlt: '我今天吃八个馒头',
done: false
}, {
titlt: '我今天学习jq',
done: false
},];（1）本地存储里面只能存储字符串的数据格式，把我们的数组对象转换为字符串个数JSON.stringify(参数)
localStorage.setItem("todo", JSON.stringify(todolist)); //数组转换成字符串存进去（2）获取本地存储的数据，我们需要把里面的话字符串数据转换为对象格式 JSON.parse(参数)
var data = localStorage.getItem("todo"); //取出来
data = JSON.parse(data); //取出之后转换格式