前端问题记录表

发现自己老是会遇到一些小问题,在百度解决过后有的时候很快就忘记了,决定用一个专门的地方记录这些问题,从今天开始。

1、jQuery中想阻止子元素触发父元素事件

使用类似

$('a').click(function(e){e.stopPropagation();})

方法,这是阻止事件冒泡。

2 、

var $td=$("#file tr").find("td");

       alert($td);

会输出[object, object],这是为什么呢?明明$td是数组。

3、jQuery搜索操作(父辈元素、同辈、子元素搜索)

父元素搜索

(1)parents([selector]) 方法

$("p").parents().css("border","1px solid #999"); //给p元素的父元素添加边框样式
$("p").parents("div").css(...); //给p元素的父元素中的div元素添加样式

(2)closest(selector[,context]) 方法

$("p").closest("div").css("color","blue");       //给指定p元素的第一个匹配的上级元素设置字体颜色

(3)parent([selector]) 方法

$("p").parent().css("border","1px solid #999");     //给p元素的父元素添加边框样式

(4)parentsUtil([selector]) 方法
(5)offsetParent() 方法

同辈元素搜索

(1)next([selector])

(2)nextAll([selector])

(3)nextUtil([selector])

(4)prev([selector])

(5)prevAll([selector])

(6)prevUtil([selector])

(7)siblings([selector]) //搜索所有同辈元素

子元素搜索

(1)children([selector]) //只搜索所有直接子元素
(2)find(selector)  //必须有参数,搜索所有子元素

4、怎么用jquery实现用enter键代替点击的效果?

思路:检测输入的键,若为enter键则实现对应的效果,回车键keycode为13。

$(document).keydown(function(event){ 
    if(event.keyCode==13){ $("#mouse").click(); } 
}); 

5、手机端,输入法挡住了输入框的问题怎么解决?

思路:检测输入框的输入事件,focus,click,当事件发生时将输入框的位置移动到页面上部。
问题:

  • Q: 怎么将输入框的位置移到页面首部?
  • A:发现页面没有撑开,导致页面不能往上移,最后用了增加margin-bottom来使页面撑开来实现效果,但是当收起输入法的事件无法获取,导致不能及时把margin-bottom改回来,有点不太友好。
    $('textarea').focus(function(){
        $("body").css("margin-bottom","60%");
    });
    $('textarea').blur(function(){
        $("body").css("margin-bottom","0");
    })

6、边框的CSS重叠,导致像素变粗

  • 设置div的margin值为边框值的相反数就行

border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。

7、eval("("+")"),记得要加括号,不然它不会把它解析成对象!!!

8、CSS outline属性

在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。

outline 与 border 的区别
border 可应用于几乎所有有形的html元素,而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出,那就是: outline 的效果将随元素的 focus 而自动出现,相应的由 blur 而自动消失。这些都是浏览器的默认行为,无需JavaScript配合CSS来控制。outline 不会象border那样影响元素的尺寸或者位置。

去除焦点虚线:
outline:none;
IE7以下:hidefocus="true";

9、JavaScript的月份范围用整数表示是0~11,0表示一月,1表示二月……

10、使用navigator.userAgent来判断浏览器类型

1、浏览器版本号函数

var br=navigator.userAgent.toLowerCase();  
var browserVer=(br.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, '0'])[1]; 

2、js浏览器判断函数

function userBrowser(){  
    var browserName=navigator.userAgent.toLowerCase();  
    if(/msie/i.test(browserName) && !/opera/.test(browserName)){  
        alert("IE");  
        return ;  
    }else if(/firefox/i.test(browserName)){  
        alert("Firefox");  
        return ;  
    }else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){  
        alert("Chrome");  
        return ;  
    }else if(/opera/i.test(browserName)){  
        alert("Opera");  
        return ;  
    }else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){  
        alert("Safari");  
        return ;  
    }else{  
        alert("unKnow");  
    }  
}  

11、URL 绝对路径、相对路径

"./" 代表当前目录,"../"代表上级目录

12、<div>包含<img>边距问题

  • Q:在写一个<div>里包含一个<img>时发现总是会有一个间距,但是就是找不到为什么。
  • A:设置<img>的display:none;

13、编写一个jQuery插件的原则:

  • 给$.fn绑定函数,实现插件的代码逻辑;
  • 插件函数最后要return this;以支持链式调用;
  • 插件函数要有默认值,绑定在$.fn.<pluginName>.defaults上;
  • 用户在调用时可传入设定值以便覆盖默认值。

来源:廖雪峰的官方网站

14、JS生成二维码

在工作中遇到一个需求就是要使用JS生成二维码而不是单纯的图片,在网上看了一下解决方法,基本上是使用jquery.qrcode.js插件。以下笔记来源:http://www.cnblogs.com/CraryPrimitiveMan/p/4293998.html
http://blog.wpjam.com/m/jquery-qrcode/
具体用法
qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode。可以到https://github.com/jeromeetienne/jquery-qrcode 获取最新的代码。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

在页面上,需要显示二维码的地方加入一个空元素(此处用div)

<div id="qrcode"></div>

在需要生成二维码的时候,调用一下语句直接生成。

$("#qrcode").qrcode("http://www.cnblogs.com/CraryPrimitiveMan/");//需要生成的页面

15、《JS高级程序设计第三版》疑问

在5.6 基本包装类型中有一句话> 对基本包装类型的实例调用typeof会发挥“object”,而且所有基本包装类型的对象都会被转换为布尔值true。后半句不是很理解。

16、:first-child和:first-of-type区别

first-child:需要满足是父元素的第一个子元素
first-of-type:该类型的第一个元素,不一定要是第一个子元素

17、图片懒加载

https://github.com/tuupola/jquery_lazyload

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容