在jQuery 3.0的版本前, ready经典用法是用一个匿名函数，像这样：$(document).ready(function() {// Handler for .ready() called. }); jQuery 3.0 ready() 变化在jQuery 3.0发布之前，有以下几种方法称之为ready方法： 在document元素上操作： $(document).ready(handler); 在空元素上操作: $().ready(handler); 或者直接（即不在一个具体的元素上）操作: $(handler);上述所有命名的变种在功能上是等价的。无论是哪个元...
相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多，用鼠标操作的时候相信都见过这样的效果：进入qq空间，向下拉动空间，到底部时，会动态加载剩余的说说或者是日志 ，今天我们就来看看他们的实现思路和js控制动态加载的代码。 下面的代码主要是控制滚动条下拉时的加载事件的，无论是加载图片还是加载记录数据 都可以。 加载jQuery库后我们可以这样使用： $(window).scrol...
本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子，供大家参考，具体内容如下HTML5 Ajax Uploader/*原生JS版*/ document.getElementById("upJS").onclick = function() {/* FormData 是表单数据类 */var fd = new FormData();var ajax = new XMLHttpRequest();fd.append("upload", 1);/* 把文件添加到表单里 */fd.append("upfile", document.getElementById("upfile").files[0]);ajax.open("post", "test.php", true);aja...
关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释. 另有几点说明: 1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){…}与jQuery的$(document).ready(function(){…});的区别,这也是我为什么不用样式定...
已知BUG: Ubuntu系统下, onkeyup事件失效,详见: Ubuntu系统下onkeyup/onkeydown对中文输入失效bug. 查看演示: 点此查看DEMO 核心代码: 代码如下: //原生JavaScript版本 window.onload=function(){ var js=document.getElementById(js);//获取文本域 var info=document.getElementsByTagName(p)[0];//获取要插入提示信息的元素 var submit=info.getElementsByTagName(input)[0];//获取提交按钮 var max=js.getAttribute(maxlength)...
需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原...
代码如下: $(document).ready(function(){ $("#selectAll").click(function(){ //这里也可以直接用this,原生js语句 if($(this)[0].checked){ $('[name=items]:checkbox').attr("checked",true); }else{ $('[name=items]:checkbox').attr("checked",false); } }); $("#XOR").click(function(){ $("[name=items]:checkbox").each(function(){ this.checked=!this.checked; }); }); }); Untitled Document 足球 足球 足球 足...
一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下： 代码如下: 函数传参，改变Div任意属性的值 body,p{margin:0;padding:0;} body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} #outer{width:300px;margin:0 auto;} p{margin-bottom:10px;} button{margin-right:5px;} label{width:5em;display:inline-block;text-align:right;} input{padding:3px;font-family:inherit;border:1px solid #cc...
现在有一id=test的下拉框，怎么拿到选中的那个值呢？ 分别使用javascript原生的方法和jquery方法 代码如下: text1 text2 一：javascript原生的方法 1:拿到select对象： var myselect=document.getElementById("test"); 2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index 3:拿到选中项options的value： myselect.options[index].value; 4:拿到选中项options的text： myselec...
在日常开发的网站中，常常会用到设置透明度问题，最简单的就是图片的淡入淡出效果。下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点： 1 透明度样式设置 透明度在IE浏览器和其他相关浏览器中的设置方法不太相同，IE使用filter：alpha属性，firefox使用opactiy属性，下面示例设置透明度为30%： IE：filter: alpha(opacity:30)； firefox：opacity(0.3)； 2 原生js设置透明度 为了兼容IE与其他浏览器对透明度的设置，...
说明：1、因为获取高度的情况跟获取宽度的情况一样，所以以下只说获取宽度的情况。 2、以下所说的所有方法与属性所返回的值都是不带单位的。 3、为了方便说明，以下情况采用缩写表示： obj -> 在原生JS中表示DOM对象；在JQuery中表示JQuery对象 Width -> obj.style.width OffsetWidth -> obj.offsetWidth $width -> obj.width() $innerWidth -> obj.innerWidth() $ou...
jq的extend()方法能很方便的实现扩展对象方法，语法如下：$.extend(obj1,boj2,obj3); 现在要实现的是：原生js实现复制对象，扩展对象，类似jq中的extend()方法，具体实例如下： 现有3个对象字面量：var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999};实现目标： 复制o1对象，把 o2,o3的对象属性和方法都扩展进前面复制得到的对象中并输出。var o1={hello:1,old:555}...
一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下：函数传参，改变Div任意属性的值body,p{margin:0;padding:0;} body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} #outer{width:300px;margin:0 auto;} p{margin-bottom:10px;} button{margin-right:5px;} label{width:5em;display:inline-block;text-align:right;} input{padding:3px;font-family:inherit;border:1px solid #ccc;} #div1{color:#f...
（1）首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分（其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方（也就是一个banner吧） 3.然后是一个图片组（可以用新的div 也可以直接使用 ul-->li形式） 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层，放在图片底部 6.然后是一个图片描述info层，放在透明背景层的左下角（div 或 ul-->li) 7.然后是一个按钮层，用来定位图片组的index吧,放在...
图片轮播有很多种方式，这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现，jquery因为封装了很多用法，所以用起来就简单许多，转换成js使用，其实也就是用js原生模拟出这些用法。 但不管怎样，构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成。 对于淡入淡出式 1.首先是个外围部分（其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方（也就是一个banner吧） 3.然后是一个图片组（可以用新的d...