发现自己老是会遇到一些小问题,在百度解决过后有的时候很快就忘记了,决定用一个专门的地方记录这些问题,从今天开始。
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:该类型的第一个元素,不一定要是第一个子元素