jquery笔记2020

空，undefine，null ，0，false，这些在JS里面都是false

v2 = null;
alert(typeof v2); //object

JavaScript的最初版本是这样区分的： null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

1 .dom与jquery对象区别

     ----jquery对象是js对象的集合；

    ----jquery有自己的方法，js有自己的方法，不可互用；

    ----js与jquery的转化

    jquery遍历------js

    js加$--------jquery

2，交集选择器

    li.green       class为green的选择器

    s1,s2      并集选择器

    s1  s2    后代选择器

    s1>s2    子代选择器   （只是下一代并非其他）

3，事件

    js

        mouseover鼠标经过事件

        mouseout鼠标离开事件

jquery

        mouseenter鼠标经过事件

        mouseleave鼠标离开事件

         mouseover

        鼠标经过被选元素和子元素都被触发，效率低

        mouserenter   只有经过被选元素才触发，推荐使用

slideDown（200）向下滑动

slidUp（200）向上滑动   

4，jquery节点操作

    ---- addclass添加class

    ----removeclass移除节点

    ----hasclass判断是否有class

    ----toggleclass   toggle切换

    ----attr修改属相值

    ----css修改节点

    ----text修改文本值

    attr与prop方法

对于布尔类型要使用prop方法，如checked

5，动画

     show（）     hide（）

    slideup（）    slideup（）

    slidetoggle（）

    fadein（）    fadeout（）

    fadetoggole

6，轮播图

animate（）

$( ".published" ).animate({left : 0 }, 2000 );

动画队列，顺序执行

$（this）.childen("ul"). stop() .slideup();  

音频，视频jquery没有进行封装要用js方法

$("").get(0).play();

7,创建节点和添加节点

    jquery$('')括号里直接写html代码

    append添加到子元素对后面

    prepend添加到子元素最前面

    appendto将p元素添加到div里面，同append

    prependto

    after添加到后面作为兄弟元素

    before添加到前面作为兄弟元素

*::after   css中子元素最后面

 ::before     css中子元素最前面

 opotion：selected选中select选项

清除：empty（）不会清除本身，会把事件移除，会把子元素移除

html（""）会发生内存泄露

remove（）清空本身

clone（）克隆

clone（false）深复制   默认深复制

clone（true）深复制    会复制事件

parentint    操作字符串

random实现随机数

Math.random 返回大于等于0.0小于1.0的double值

8，事件绑定

bind可以同时注册多个事件或者一个事件

delegate委托 、代理-----动态创建的元素也会执行事件（给父级添加委托）

$("div").delegate("p","click",function(){})

事件最终由p执行（p为div子元素）

    ---一定要给父元素添加/祖先元素添加delegate

    ---子元素执行父元素注册

缺点----只可注册委托事件作用于子元素

注册事件

---

    （1）简单事件bind

    （2）委托事件delegate（很少用）

    （3）on整合上面两个事件（推荐）

<div><p></p></div>

$("div").on("click","p",function(){})

    on简单事件（自己执行）

    on委托件事（3个参数）

    若同时有自己的事件又有委托事件，则先执行委托事件

    on事件可触发动态创建的元素添加事件

事件解绑

    onbind（不用）

    ondelegate（不用）

$("p").on("click mouseenter",function(){})

$("p").off()不传参数，解绑所有事件；传一个参数，解绑一个事件

toggle切换    trigger触发

$("p").trigger("click",function(){})

9，阻止冒泡和阻止浏览器默认行为

   1》return false即可阻止事件冒泡也可阻止浏览器默认

   2》e.preventDefault(),阻止默认，即阻止跳转（跳转为浏览器默认行为）

  e.stopgropagation阻止冒泡

10，方法

prevAll（）前面所有兄弟元素

each（）遍历

11，$冲突

    <itcast.js><jquery.js>冲突

    解决方法jquery释放$的控制权

    $.noconflict()//conflict冲突，noconflict不冲突

    Jquery（"div"）或var c=$.noconflict()//把控制权给了c

12，插件

    jquery.clolr.js颜色渐变，动画颜色改变

    jquery.lazyload.js    图片懒加载

13，制作jquery插件

    Array.prototype.sayhi=function(){

    alery("123")}

    给array数组的属性添加一个方法，所有的array都有了sayhi方法

  $.prototype.sayhi=$.fn.sayhi=Jquery. prototype.sayhi=function()    { alery("123")}

jquery实质是给jquery原生上添加方法

color=color||0   如果color为空则为0

es6   数组去重

function unique(arr = []) {
  if (arr.length === 0 || arr.length === 1) {
    return arr;
  }
  return [...new Set(arr)];
}

---

bootstrap

1，基于jquery，响应式布局，核心媒体查询，栅格系统

    响应式开发原理----媒体查询

    屏幕大小 <768px        768<=x<992     992<=x<1200                     >=1200

/* 在 screen 类型 大于560px 加载 */

@media screen and (min-width: 560px) { .box { background-color: red; } }

/* 在 screen 类型 大于560px 小于 700px 加载 */

@media screen and (min-width: 560px) and (max-width: 700px) { .box1 { background-color: burlywood; } }

2，首先有一个大的容器1》，container累预定义类    2》，container-fluid类100%宽度，用于移动版

3，栅格系统，把页面内容划分若干等分

划分12列

栅格系统通过行和列row与column必须放在container中

每一行为12列

        份数相加不等于或小于12列时，占不满整个container，会有空白

    份数相加大于12列时，多出来的会再起一行

每一列都有左右为15px的值

3.3，列嵌套最好添加一个row，这样可取消父元素的padding值

3.4，列偏移

偏移份数=12-2个盒子的份数（两个盒子）

左边占4份数              右边占4份数

class=col-md-offset-4

偏移数=（12-盒子份数）/2（1个盒子）

3.5

.hidden-xs

.hidden-sm

.hidden-md  只在中屏显示

.hidden-lg

.hidden-xs