-
//封装ajaxGET函数 var ajaxGet=function(url,callback){ var req=null; if(window.XMLHttpRequest){ req=new XMLHttpRequest(); //非IE }else if(window.ActiveXObject){ req=new ActiveXObject("Msxml2.XMLHTTP"); //IE } req.onreadystatechange=function(){ if(req.readyState==4&&req.status==200){ callback(JSON.parse(req.responseText)); } }; req.open('GET',url,true); req.send(null); };查看全部
-
addEvent('search-form','keyup',function(){ var text=getDOM('input-text').value; ajaxGet('http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q='+text,function(d){ var d =data.AS.Results[0].Suggests; var html=""; for(var i=0;i<d.length;i++){ html+='<li>'+d[i].Txt+'</li>'; } getDOM('list').innerHTML=html; getDOM('suggest').style.top=getElementTop(getDOM('search-form'))+getDOM('search-form').offsetHeight+'px'; getDOM('suggest').style.left=getElementLeft(getDOM('search-form'))+'px'; getDOM('suggest').style.position='absolute'; getDOM('suggest').style.display='block'; getDOM('suggest').style.width=getDOM('search-form').offsetWidth+'px'; }); });查看全部
-
原生JS事件代理：利用事件冒泡，冒到document或其前辈元素，让document或其前辈元素来代理当前元素的事件。 //封装事件代理函数： var onEvent=function(target,event,fn){ addEvent(document,event,function(e){ if(e.target.nodeName==target.toUpperCase()){ fn.call(e.target); } }); }; //调用事件代理函数 onEvent('li','click',function(){ var keyword=this.innerHTML; location.href="http://cn.bing.com/search?q="+keyword; });查看全部
-
addEvent('search-form','keyup',function(){ getDOM('suggest').style.top=getElementTop(getDOM('search-form'))+getDOM('search-form').offsetHeight+'px'; getDOM('suggest').style.left=getElementLeft(getDOM('search-form'))+'px'; getDOM('suggest').style.position='absolute'; getDOM('suggest').style.display='block'; getDOM('suggest').style.width=getDOM('search-form').offsetWidth+'px'; });查看全部
-
1//DOM获取函数 var getDOM=function(id){ return document.getElementById(id); }; 2//绑定事件函数 var addEvent=function(id,event,fn){ var el=getDOM(id)||document; if(el.addEventListener){ el.addEventListener(event,fn,false);//适配非IE浏览器 ，第3个参数直接写false }else if(el.attachEvent){ el.attachEvent('on'+event,fn);//适配IE浏览器 } }; 3//获取距浏览器左边距离 var getElementLeft=function(element){ var left=element.offsetLeft;//获取距离父元素左边距离 var current=element.offsetParent; while(current!==null){ left+=current.offsetLeft; current=current.offsetParent; } return left; }; 4//获取距浏览器顶部距离 var getElementTop=function(element){ var top=element.offsetTop;//获取距离父元素顶部距离 var current=element.offsetParent; while(current!==null){ top+=current.offsetTop; current=current.offsetParent; } return top; };查看全部
-
为动态添加的li元素绑定click事件：事件代理： $('#suggest').on('click','li',function(){ var text=$(this).text(); location.href="http://cn.bing.com/search?q="+text; });查看全部
-
$('#input-text').on('keyup',function(){ var inputtext=$('#input-text').val(); if(inputtext.trim()!=""){ $.ajax({ type:'GET', url: 'http://sg1.api.bing.com/qsonhs.aspx?type=cb&cb=callback&q='+inputtext, dataType:'jsonp', jsonp:'cb', success:function(data){ console.log('成功'); var d =data.AS.Results[0].Suggests; var html=""; for(var i=0;i<d.length;i++){ html+='<li>'+d[i].Txt+'</li>'; } $('#list').html(html); $('#suggest').show().css({ width:$("#search-form").outerWidth(), position:'absolute', top:$("#search-form").offset().top+$("#search-form").outerHeight(), left:$("#search-form").offset().left-1, }); }, error:function(e){ console.log(e.responseText); } }); }else{ console.log("错误"); } });查看全部
-
ajax使用jsonp处理跨域请求 var inputtext=$('#input-text').val(); $.ajax({ url: 'http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q='+inputtext, type: 'GET', dataType: 'jsonp', jsonp:'cb', success:function(d){ console.log(d); }, error:function(e){ console.log(e); } });查看全部
-
JavaScript事件代理是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。 它是怎么运作的呢？ 事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理，我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以得知这个事件是从哪个元素开始的。 这对我有什么好处呢？ 想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。 用代码写出来是什么样呢？ 代码很简单，我们所要关心的只是如何检测目标元素而已。比方说我们有一个table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断传到table来的事件的目标元素。我们把它单独放到一个名为getEventTarget的函数中： function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; } e这个变量表示的是一个事件对象，我们只需要写一点点跨浏览器的代码来返回目标元素，在IE里目标元素放在srcElemnt属性中，而在其它浏览器里则是target属性。一旦我们得到了目标元素，剩下的事情就是看看它是否是我们所需要的那个元素了查看全部
-
1. 行高line-height一般设置为25-29px; 2. a:hover{}、ul li:hover{}……称为伪类 3. ul设置padding:0;margin:0去掉浏览器默认边距 设置图片时要同时设置图片的宽高 cursor: pointer; float: left; border: 0; background: url(http://img1.sycdn.imooc.com//52da5df800012b1e02220137.jpg) no-repeat -30px -107px; width: 30px; height: 30px;查看全部
-
position:relative 相对定位 position:absolute 绝对行为 cursor:pointer 设置鼠标为“手”的形状 cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。 cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。 所以为了兼容各个主流浏览器，尽量使用cursor:pointer，而不要使用cursor:hand。 附：cursor属性 光标类型 CSS 十字准心 cursor: crosshair; 手 cursor: pointer; cursor: hand; 写两个是为了照顾IE5，它只认hand。 等待/沙漏 cursor: wait; 帮助 cursor: help; 无法释放 cursor: no-drop; 文字/编辑 cursor: text; 可移动对象 cursor: move; 向上改变大小(North) cursor: n-resize; 向下改变大小(South) cursor: s-resize; 向右改变大小(East) cursor: e-resize; 向左改变大小(West) cursor: w-resize; 向上右改变大小(North East) cursor: ne-resize; 向上左改变大小(North West) cursor: nw-resize; 向下右改变大小(South East) cursor: se-resize; 向下左改变大小(South West) cursor: sw-resize; 自动 cursor: auto; 禁止 cursor:not-allowed; 处理中 cursor: progress; 系统默认 cursor: default; 用户自定义（可用动画） cursor: url(‘ # ‘); # = 光标文件地址 (注意文件格式必须为：.cur 或 .ani)。查看全部
-
IE兼容视图：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,使IE浏览器按照正常文档模式来渲染。查看全部
-
outline：none;去除输入框轮廓 submit中url(river.png)插入一张图片；必须设置宽度和高度，否则图片不显示查看全部
-
form标签 action提交信息到哪里的端口 _blank在新页面打开内容 get 设置请求是查询请求 input提交按钮自带有提交服务器功能，button按钮需要有次功能需要添加在form标签内查看全部
-
<input/>的局限性: <input/>是自闭合标签,即不能嵌套其他html标签,不能定义复杂样式按钮 使用button标签替代:<button><img src="icon.jpg" width="20"/>this is button</button> 要实现type="submit"的按钮，必须把input放在form标签内，可以提交到服务区 input标签作为按钮的局限性，是自闭合标签，不能内嵌其他标签。图文混排的复杂按钮因使用button标签。查看全部
举报
0/150
提交
取消