前端学习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 里面的小li

24.动态创建li

var li=$("<li></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);  //取出之后转换格式