前端笔记汇总

2019年12月05日 阅读数:88
这篇文章主要向大家介绍前端笔记汇总,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。
JS 1、流程控制语句 程序三种基本结构–顺序结构、选择结构、循环结构 一、选择结构: if语句 if (判断条件) { 执行语句 }else if (判断条件) { 执行语句 }else{ 执行语句 } switch语句 case里必须是具体的值,可是若是表达式能够返回一个具体的值true或者false也能够是表达式,这时switch里面是true switch(表达式) { case 取值: 执行语句 break; case 取值: 执行语句 break; default: 执行语句 } 二、循环结构: for语句:1初始化表达式、2控制表达式、3循环后表达式 for(var i = 0; i # Id选择器 . 类选择器 element 标签选择器 层级选择器 符号(名称) 说明 空格 后代选择器 > 子代选择器 one+two 选取全部one元素同辈的下一个元素two(若是有几个one,就有几个two,除非紧挨着one后面没有同级元素two) one~two 选取one元素同辈的two的全部元素 基本过滤选择器 符号(名称) 说明 :first 选取第一个元素 :last 选取最后一个元素 :not(selector) 选取不是这个元素的其余元素 :eq(index) 选择索引号为index的一个元素,index从0开始 :odd 选择索引号为奇数的全部元素,index从0开始 :even 选择索引号为偶数的全部元素,index从0开始 :gt(index) 选取索引大于index的元素 :lt(index) 选取索引小于index的元素 :header 选取全部的标题元素,如h1,h2,h3 :animated 选取当前正在执行动画的全部元素 :focus 选取当前获取焦点的元素 四、筛选选择器(方法) 符号(名称) 说明 find(selector) 查找指定元素的全部后代元素(子子孙孙) children() 查找指定元素的直接子元素(亲儿子元素) siblings() 查找全部兄弟元素(不包括本身) :parent() 查找父元素(亲的) :nth-child(index/even/odd/equation) 选取父元素下的第index个子元素或者奇偶元素,index从1算起 :first-child 获取个父元素的第一个子元素 :last-child 选取父元素的最后一个子元素 :eq(index) 查找指定元素的第index个元素, index是索引号,从0开始 index() 获取指定元素的索引号(从0开始的) prevAll() 获取指定元素以前的全部兄弟元素 nextAll() 获取指定元素以后的全部兄弟元素 内容过滤选择器 :contains(text) 选取含有文本内容为“text”的元素 :empty 选取不包含子元素或者文本的空元素 :has(selector) 选取含有选择器所匹配的元素的元素 :parent() 选取含有子元素或者文本的元素 可见性过滤选择器 :hidden 选取全部不可见的元素 :visible 选取全部可见的元素 属性过滤选择器 [ attribute ] 选取拥有此属性的元素 [ attribute = value ] 选取属性的值为value的元素 [ attribute != value ] 选取属性的值不等于value的元素 [ attribute ^= value ] 选取以属性的值value开始的元素 [ attribute = v a l u e ] v a l u e [ a t t r i b u t e = v a l u e ] v a l u e [ a t t r i b u t e | = v a l u e ] [ a t t r i b u t e   = v a l u e ] v a l u e i f ( (“#tt”).length > 0) {} jQuery次日 1、样式操做 一、样式属性操做 .css() 做用:设置或获取元素的样式属性值 a设置单个样式: ( s e l e c t o r ) . c s s ( c o l o r , r e d ) ; b (selector).css({“color”: “red”, “font-size”: “30px”}) var cssStyle = {“color”: “red”, “font-size”: “30px”}; ( s e l e c t o r ) . c s s ( c s s S T y l e ) ; c (selector).css(“font-size”); 二、类操做 添加类样式: ( s e l e c t o r ) . a d d C l a s s ( c l a s s N a m e ) c l a s s N a m (selector).removeClass(className) 为指定元素移除类 className ( s e l e c t o r ) . r e m o v e C l a s s ( ) ; (selector).hasClass(calssName) 判断指定元素是否包含类 className 切换类样式: ( s e l e c t o r ) . t o g g l e C l a s s ( c l a s s N a m e ) j Q u e r y 1 1 s h o w ( ) (selector).show(2000, function() {}); hide方法做用:让匹配元素隐藏掉 二、滑入滑出动画 (1)滑入动画效果(联想:生活中的卷帘门) 做用:让元素如下拉动画效果展现出来 ( s e l e c t o r ) . s l i d e D o w n ( s p e e d , c a l l b a c k ) ; 400 f a d e I n / s l i d e D o w n / s l i d e U p 2 (selector).slideUp(speed,callback); (3)滑入滑出切换动画效果 ( s e l e c t o r ) . s l i d e T o g g l e ( s p e e d , c a l l b a c k ) ; 3 1 线 (selector).fadeIn(speed, callback); (2) 淡出动画效果 ( s e l e c t o r ) . f a d e O u t ( 1000 ) ; 3 (selector).fadeToggle(‘fast’,function(){}); (4)改变不透明度到某个值 与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 彻底不透明 到彻底透明;而fadeTo能够指定元素不透明度的具体值。而且时间参数是必需的! 做用:调节匹配元素的不透明度 ( s e l e c t o r ) . f a d e T o ( 1000 , .5 ) ; 1 2 0 1 j Q u e r y C S S h e i g h t : 400 p x ; w i d t h : 300 p x ; o p a c i t y : .4 ; C S S 4 (selector).animate({params},speed,callback); 做用:执行一组CSS属性的自定义动画 参1:要执行动画的CSS属性(必选) 参2:执行动画时长(可选) 参3:动画执行完后当即执行的回调函数(可选) 五、stop()中止动画 ( s e l e c t o r ) . s t o p ( c l e a r Q u e u e , j u m p T o E n d ) ; 1 2 s t o p ( ) c l e a r Q u e u e t r u e j u m p T o E n d t r u e C S S s l i d e U p ( ) s o t p ( ) j Q u e r y 1 1 v a r s p a n N o d e = (“ 我是一个span元素”); (2)添加元素append() 参数jQuery对象 ( s e l e c t o r ) . a p p e n d ( node);// 在 ( s e l e c t o r ) node 做用:在被选元素的最后一个子元素(或内容)后面插入内容(页面中存在或者建立出来的元素均可以) 若是是页面中存在的元素,那么调用append()后,会把这个元素从原先的位置移除,而后再插入到新 的位置。若是是给多个目标追加一个元素,那么append()方法的内部会复制多份这个元素,而后追加到多个目标里面去。 (3) ( s e l e c t o r ) . a p p e n d ( < d i v >< / d i v > ) ; / / (selector)中追加div元素,参数为htmlString ①appendTo() ( s e l e c t o r ) . a p p e n d T o ( n o d e ) ; (selector)追加到node中去 ②prepend() ( s e l e c t o r ) . p r e p e n d ( n o d e ) ; a f t e r ( ) (selector).after(node);做用:在被选元素以后,做为兄弟元素插入内容或节点 ④before() ( s e l e c t o r ) . b e f o r e ( n o d e ) ; 4 h t m l 使 h t m l (selector).html(‘ 传智播客’);// 动态建立元素 ③获取内容 ( s e l e c t o r ) . h t m l ( ) ; / / h t m l 5 (selector).empty();// 清空指定元素的全部子元素(光杆司令)// 没有参数 ( s e l e c t o r ) . h t m l ( ) ; / / (selector).remove(); (6)复制元素 (selector).clone();// 复制$(selector)所匹配到的元素// 返回值为复制的新元素 总结:推荐使用html(“ ”)方法来建立元素或者html(“”)清空元素 二、操做form表单 (1)属性操做 ①设置属性: ( s e l e c t o r ) . a t t r ( t i t l e , ) ; 1 2 2 (selector).prop(); 参2不存在返回false 用法和attr 同样,设置input和button的disabled属性,以及checkbox的checked属性 、selected属性,这几种动态改变的属性必须用prop ②获取属性: ( s e l e c t o r ) . a t t r ( t i t l e ) ; (selector).removeAttr(“title”); // 参数为:要移除的属性的名称 ④:selected 选择selected中被选中的元素 注意:设置selected、checked、disabled要使用.prop()方法。 (2)值和内容 ①val()方法: 做用:设置或返回表单元素的值,例如:input,select,textarea的值 ( s e l e c t o r ) . v a l ( ) ; / / (selector).val(“具体值”);// 设置全部匹配到的元素的值 另外:val()能使select、checkBox、radio相应的选项被选中 val(’ 上海 ‘); ②text() 方法: 做用:设置或获取匹配元素的文本内容 ( s e l e c t o r ) . t e x t ( ) ; / / (selector).text(“我是内容”);//参数表示要设置的文本内容,会清空原有内容 三、尺寸位置操做 (1)高度操做height() : 做用:设置或获取匹配元素的高度值 ( s e l e c t o r ) . h e i g h t ( 200 ) ; / / (selector).height();//不带参数获取高度 (2)宽度操做width() : 做用:设置或获取匹配元素的宽度值 (selector).width(200);//带参数表示设置宽度 ( s e l e c t o r ) . w i d t h ( ) ; / / 3 o f f s e t ( ) (selector).offset();// 无参数表示获取,返回值为:{top:num,left:num},值是相对于document的位置 ( s e l e c t o r ) . o f f s e t ( l e f t : 100 , t o p : 150 ) ; / / p o s i t i o n r e l a t i v e s t a t i c o f f s e t ( s t a t i c ) r e l a t i v e s c r o l l T o p ( ) (selector).scrollTop();// 无参数表示获取偏移 ( s e l e c t o r ) . s c r o l l T o p ( 100 ) ; / / s c r o l l T o p 0 s c r o l l L e f t ( ) (selector).scrollLeft(100); jQuery第三天 jQuery事件机制 jQuery的事件机制,指的是:jQuery对JavaScript操做DOM事件的封装,包括了:事件绑定、事件解绑、事件触发。 1、事件绑定 简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on【重点】 一、简单事件绑定:VC click() 单击事件 mouseenter() 鼠标进入事件 mouseleave() 鼠标离开事件 dbclick() 双击事件 change() 改变事件,如:文本框值改变,下拉列表值改变等 focus() 得到焦点事件 blur() 失去焦点事件 keydown() 键盘按下事件 二、on方式 语法: ( s e l e c t o r ) . o n ( e v e n t s , [ s e l e c t o r ] , [ d a t a ] , f u n c t i o n ( ) ) ; / / e v e n t s / / s e l e c t o r , / / d a t a e v e n t . d a t a 使 ( ) / / f u n c t i o n ( ) (selector).on(“click mouseenter”, function(){}); 表示给 ( s e l e c t o r ) o f f o f f o n (selector).off(); 解绑匹配元素的全部事件 ( s e l e c t o r ) . o f f ( c l i c k ) ; c l i c k , (selector).off(“click”,“**”); 参1:要解绑的事件,参2:解绑动态建立的事件。自身绑定的事件还在 3、事件触发 事件触发的时候只会触发当前元素被执行的事件,单击按钮触发div的单击事件 一、 ( s e l e c t o r ) . c l i c k ( ) ; c l i c k 2 t r i g g e r ( ) (“button”).on(“click”,function(){ (“div”).trigger(“click”);}); (selector).trigger(“click”);参数:要触发事件的名称 三、triggerHandler触发 事件响应方法,不触发浏览器行为 ( s e l e c t o r ) . t r i g g e r H a n d l e r ( f o c u s ) ; : (function(event){}): event 事件对象 event.data 传递给事件处理程序的额外数据 event.delegateTarget 代理绑定事件的元素 event.currentTarget 绑定事件的元素,等同于this,this:哪一个元素触发的事件,this就指向这个元素 event.target 触发事件的元素,不必定===this event.pageX 鼠标相对于页面的位置 event.clientX 距离浏览器的位置 event.screenX 相对于电脑屏幕 event.offsetX 相对于定位的父元素,或者body event.stopPropagation(); 阻止事件冒泡 event.preventDefault(); 阻止浏览器默认行为 event.type 事件类型:click,dbclick… event.which 鼠标的按键类型:左1 中2 右3 event.keyCode 键盘按键代码 事件执行的顺序: 若是是单击的按钮,首先会触发按钮的单击事件,而后再触发div的单击事件 阻止事件冒泡: event.stopPropagation(); 阻止事件冒泡 return false; 同时具备阻止冒泡和阻止默认行为的功能 5、链式编程 链式编程代码示例: ( l i ) . p a r e n t ( u l ) . p a r e n t ( d i v ) . s i b l i n g s ( d i v ) . c h i l d r e n ( d i v ) . h t m l ( ) ; r e t u r n t h i s ; t h i s e n d ( ) ; / / / / (“div”).css(“color”, “red”); // 获取操做 ( d i v ) . c s s ( c o l o r ) ; / / 1 2 e a c h 使 e a c h j Q u e r y