<!--http://www.css88.com/jqapi-1.7--> background: rgba(0, 0, 0, 0.9); filter: alpha(opacity = 90); /*-----------------------------HTML START----------------------------------*/ 设置浏览器的记忆功能 <input type="password" name="password" id="password1" autocomplete="off"/> 具有图片上传功能的表单添加enctype属性 <form id="form1" name ="form1" method="post" enctype="multipart/form-data"> <input type="file" name="fileUp"/> </form> /*-----------------------------JQuery START-------------------------------------*/ 设置radio选中 $("input[name='club']")[0].checked = true; $("input[name='club']")[1].checked = true; 获取myText的value var myTextValue = $("#myText").val(); /*-----------------------------JQuery END-------------------------------------*/ 进入到a文件夹中,输入cmd命令:tree /f > a.txt 可以把a文件夹中的所有文件树目录结构打印到a.txt文件中 <!--***********html*****************--> <html> <head> <script type="text/JavaScript"> /*---------------------jQuery------------------------*/ //获取myText的value var myTextValue = $("#myText").val(); //隐藏myText $("#myText").css('dispaly','none'); $("#myText")[0].style.display = "none"; $("#myDiv").hide(); //显示myText $("#myText").css('display','block'); $("#myText")[0].style.display = "block"; $("#myDiv").show(); //myText获取焦点 $("#myText").focus(); //获取myText的下一个兄弟节点 var myTextNextNote = $("#myText").next(); //获取myText的上一个兄弟节点 var myTextNextNoteValue = $("#myText").pre(); //获取myText的下一个兄弟节点的值 var myTextNextNoteValue = $("#myText").next().val(); //获取myText的上一个兄弟节点的值 var myTextNextNoteValue = $("#myText").pre().val(); //获取myRadio的值 var myRadioValue = $('input:radio[name="myRadio"]:checked').val(); var myRadioValue = $("input[name='myRadio']:checked").val(); //设置值为1的Radio被选中 $("input[name=myRadio]:eq(1)").attr("checked",'checked'); //获取checkBox的值 $('input[name="myCheckBox"]:checked').each(function(){$(this).val();}); //清除tdMultiLang的子节点 $("#tdMultiLang").empty(); // 判断是否显示 true显示 false隐藏 $("#id").is(":visible"); // 判断是否隐藏 true隐藏 false显示 $("#id").is(":hidden"); // 判断是否无效 true无效 false有效 $("#id").is(":disabled"); // 判断是否被选中 true:选中 false未选中 $("#id").is(":checked"); //页面加载完成的时候弹出窗口 //document是dom对象 //$(document)是jquery对象 $(document).ready(function(){ alert("这是弹窗的第一行内容! 这是弹窗的第二行内容!"); }); //or $(function(){ alert("这是弹窗的第一行内容! 这是弹窗的第二行内容!"); }); /* jquery是一个轻量级的js库. 目前流行的js库有:1.jquery;2.extjs;3.prototype;4.dwr(运行服务器);5.dojo 在zend studio中安装aptana插件可以提示js的函数和属性.www.aptana.org */ //原型 function Dog(){ } Dog.prototype = { ready:function(){ alert("汪汪......"); }, name:"旺财" } var myDog = new Dog(); myDog.ready(); alert("我的名字是" + myDog.name ); //Dom和JQuery之间的转换 var obj1 = document.getElementById("myText"); var $obj1 = $("#myText"); //Dom->JQuery var $obj2 = $(obj1); //JQuery->Dom var obj2 = $obj1[0]; //or var obj2 = $obj1.get(0); //背景色 document.getElementById("myDiv").style.background = "red"; //html this.innerHTML; $(this).html(); $('button').click(function(){ alert("给Id=button的按钮绑定了click事件"); $(this).val(); $("#myDiv").css('background','red'); }); //基本选择器 //id选择器,选中id="myDiv"的标签,改变它们的背景色(id) $("#myDiv").css('background','red'); //类选择器,选中所有class="classname"的标签,改变它们的背景色(class) $('.classname').css('background','red'); //类型选择器,选中所有div,改变它们的背景色(element) $('div').css('background','red'); document.getElementsByTagName("tagName"); //选中所有元素(通配符) $("*").css('background','red'); //选中所有div,Id="myText"和class="className"的元素改变它们的背景色(组合选择器) $('div,#myText,.className').css('background','red'); //层次选择器 //body的所有后代div节点 $('body div').css('background','red'); //parent > child //body儿子节点中的所有div(不包含孙子div) $('body > div').css('background','red'); //改变Id="myDiv"的下一个兄弟div的背景色 $('#myDiv + div').css('background','red'); //改变Id="myDiv"后面的所有兄弟div的背景色 $('#myDiv ~ div').css('background','red'); //改变Id="myDiv"所有兄弟div的背景色 $("#myDiv").siblings("div").css('background','red'); //过滤选择器 //改变第一个div的背景色 $('div:first').css('background','red'); //改变最后一个div的背景色(从上到下,从左到右) $('div:last').css('background','red'); //改变Id!="myDiv"的所有div的背景色 $('div:not(#myDiv)').css('background','red'); $("div").not($("#myDiv"))? $("div").not($("#myDiv")[0])? //改变class!="className"的所有div的背景色 $('div:not(.className)').css('background','red'); //改变所有序号为偶数的div背景色(从上到下,从左到右) $('div:even').css('background','red'); //改变所有序号为奇数的div背景色(从上到下,从左到右) $('div:odd').css('background','red'); //改变所有序号大于3的div背景色 $('div:gt(3)').css('background','red'); //改变所有序号小于3的div背景色 $('div:lt(3)').css('background','red'); //改变所有序号等于3的div背景色 $('div:eq(3)').css('background','red'); //改变所有标题背景颜色 $(':header').css('background','red'); //改变当前正在执行动画的元素的背景色 $(":animated").css('background','red'); //第一个table的所有偶数行 $("#table:eq(0) tr:even").css('background','red'); //内容选择器 //改变含有文本"文本包含我的div"的div元素的背景色 $("div:contains('文本包含我的div')").css('background','red'); //改变不含有文本"文本不包含我的div"的div元素的背景色 $("div:not(:contains('文本不包含我的div'))").css('background','red'); //改变不含有文本或者子元素的div元素的背景色 $("div:empty").css('background','red'); //改变含有class="classname"的div元素的背景色 $("div:.classname").css('background','red');//(选中了本身) $("div:has('.classname')").css('background','red');//(选中了它的父亲) //改变含有文本或者子元素的div元素的背景色 $("div:parent").css('background','red'); //选择器均有第二种写法 比如has,not等如下: $('div').has('p');//包含p元素的div $('div').not('.myClass');//class不等于myClass的div $('div').filter('.myClass');//class等于myClass的div //可见度选择器 //选中可见的div的背景颜色 $("div:visible").css('background','red'); //选中不可见的div的背景色并且显示出来(包括hidden和display:none) $("div:hidden").css('background','red'); $(":hidden").show();//显示所有隐藏的元素 //遍历符合要求的元素的值 $(":hidden").each(function(){ alert($(this).val()) }); //遍历数组 var arr = [000,111,222]; $.each(arr,function(index,element){ alert(index+" "+element); }); $.each(arr,function(){ alert(this.value); }); var arr1 = [{"name":"xiaoming1","age":"21"},{"name":"xiaoming1","age":"22"},{"name":"xiaoming2","age":"23"}]; $.each(arr1,function(index,element){ alert(index+" "+element.name+" "+element.age); }); $.each(arr1,function(){ alert(this.name+" "+this.age); }); //属性过滤选择器 //改变含有属性title的div背景色 $("div[title]").css('background','red'); //改变含有属性title = "text"的div背景色 $("div[title = 'text']").css('background','red'); //改变含有属性title != "text"的div背景色 $("div[title != 'text']").css('background','red'); //改变含有属性title以"text"开头的div背景色 $("div[title ^= 'text']").css('background','red'); //改变含有属性title以"text"结尾的div背景色 $("div[title $= 'text']").css('background','red'); //改变含有属性title含有"text"的div背景色 $("div[title *= 'text']").css('background','red'); //改变含有属性name的并且含有属性title含有"text"的div背景色 $("div[name][title *= 'text']").css('background','red'); //子元素选择器 //每个class为one的div父亲元素下的第二个子元素 $('div .one:nth-child(2)').css('background','red'); //每个class为one的div父亲元素下的第1个子元素 $('div .one:first-child').css('background','red'); //每个class为one的div父亲元素下的第1个子元素 $('div .one:last-child').css('background','red'); //每个class为one的div父亲元素下只有1个子元素则选中 $('div .one:only-child').css('background','red'); //每个class为one的div父亲元素下只奇数子元素则选中 $('div .one:nth-child(even)').css('background','red'); //每个class为one的div父亲元素下只有偶数子元素则选中 $('div .one:nth-child(odd)').css('background','red'); //表单对象选择器 //选中所有的button $(':button') //表单对象属性选择器 //设置 $("input[type='text']:enabled").val("hello"); $("input[type='text']:disabled").val("hello"); $(':checkbox') $(':checkbox:checked') //总结 $("div:contains('text')");//内容 $("div[title='text']");//属性 $("div .className");//选中div中含class="className"的div //区分 $("div,.className");选中div和class="className"的元素 //获取下拉框中的内容 $("select option:selected").text();//所有匹配的text值 $("select option:selected").val();//所有匹配中的第一个value值 //通过attr设置和获取属性 //设置class属性 $("#myDiv").attr('class','className'); $("#myDiv").addClass('className'); //移除class样式 $("#myDiv").removeClass('className'); //切换class样式 $("#myDiv").toggleClass('className'); //三个函数循环切换执行 $("#myDiv").toggle(function(){alert(1);},function(){alert(2);},function(){alert(3);}); //判断是否含有class样式 $("#myDiv").hasClass('className'); //<ul id="city"> //<li id="bj" name="beijing">北京</li> //<li id="sh" name="shanghai">上海</li> //</ul> $cq = $('<li id="sh" name="shanghai">上海</li>'); //内部插入 //需求:在上海下插入重庆 $("#city").append($cq); $cq.appendTo($("#city")); //需求:在北京上插入重庆 $("#city").prepend($cq); $cq.prependTo($("#city")); //一步一步添加 $cq = $("<li></li>");//<li></li> $cq.text("重庆"); //<li>重庆</li> $cq.attr("id","cq");//<li id="cq">重庆</li> $cq.attr("name","chongqing");//<li id="cq" name="chongqing">重庆</li> $("#city").append($cq); //传统方法 var cq = document.createElement("li"); cq.setAttribute("id","cq"); cq.setAttribute("name","chongqing"); cq.innerHTML="重庆"; document.getElementById("city").appendChild(cq); //外部插入 //在北京后面插入重庆 $("#bj").after($cq); $cq.insertAfter($("#bj")); //在北京前面插入重庆 $("#bj").before($cq); $cq.insertBefore($("#bj")); //<ul id="city0"> //<li id="bj" name="beijing">北京</li> //<li id="sh" name="shanghai">上海</li> //</ul> //<ul id="city1"> //<li id="cd" name="beijing">成都</li> //<li id="dl" name="shanghai">大连</li> //</ul> $("#city0").append($("#cd"));//city1中成都节点移动到city0的最后 $("#sh").after($("#cd"));//city1中成都节点移动到上海的后面 //删除节点 $("#city0").empty();//清空city0下的所有城市 $("#city0").remove();//删除city0节点 //复制节点(clone) //<body> //<p>段落1</p> //<p>段落2</p> //<p>段落3</p> //<p>段落4</p> //<p>段落5</p> //</body> $("p").click(function(){ window.alert($(this).text()); })//鼠标单机段落2,弹出"段落2" $("p").clone().appendTo($("body"))//复制对象,不复制对象的事件 $("p").clone(true).appendTo($("body"))//复制对象并且复制对象的事件 //替换 //<p>段落1</p> //<p>段落2</p> //<p>段落3</p> $("p").replaceWith("<input type='button' value='按钮'/><br/>"); $("<input type='button' value='按钮'/><br/>").replaceAll($("p")); //双击处理 $("p").dblclick(function(){ }); //在jquery中有这样几个函数即可以获取值,同时也可以设置值 //设置值 val(); html(); text(); width(); atrr(name); css(cssName); //获取值 val(value); html(value); text(value); width(value); atrr(name,value); css(cssName,value); removeAttr();//删除指定元素的指定属性 $("#myDiv").removeAttr("class"); //默认值this.defaultValue $("#myText").focus(function(){ $curVal = $(this).val(); if($curVal == this.defaultValue){ $(this).val(""); }else{ $(this).val($curVal); } }); $("#myText").blur(function(){ $curVal = $(this).val(); if($curVal == ""){ $(this).val(this.defaultValue); }else{ $(this).val($curVal); } }); //myDiv的所有子孩子 $("#myDiv").children() //myDiv的第一个子孩子 $("#myDiv").children().eq(0); //myDiv的下一个兄弟 $("#myDiv").next(); //myDiv后面的所有class="myDivStyle"的兄弟 $("#myDiv").nextAll('.myDivStyle'); //myDiv后面的所有兄弟 $("#myDiv").nextAll(); //myDiv后面的第二个兄弟 $("#myDiv").nextAll().eq(1); //myDiv的前一个兄弟 $("#myDiv").prev(); //myDiv前面的所有兄弟 $("#myDiv").prevAll(); //myDiv前面的第二个兄弟 $("#myDiv").prevAll().eq(1); //获取myDiv所有的兄弟 $("#myDiv").siblings(); //checkBox全选 //<input type="checkBox" id="checkAll" />全选/全不选 //<input type="button" id="checkRevBtn" value="反选"/> //<input type="checkBox" name="items" value="足球"/>足球 //<input type="checkBox" name="items" value="篮球"/>篮球 //<input type="checkBox" name="items" value="乒乓球"/>乒乓球 //<input type="checkBox" name="items" value="网球"/>网球 $("#checkAll").click(function(){ if(this.checked){ $("input[name='items']").attr("checked","checked"); } $("input[name='items']").attr("checked",""); } }); $("#checkRevBtn").click(function() $("input[name='items']").each(function(){ if(this.checked){ $(this).removeAttr("checked"); }else{ $(this).attr("checked","checked"); } }) }); var myName =""; $tr = $("<tr></tr>"); $td1 = $("<td></td>"); $td1.text(myName); $td2 = $("<td></td>"); $td2.text(myAge); $tr.append($td1 ); $tr.append($td2 ); //父节点 $(this).parent(); //确认框 window.confirm("是否删除?");//点击确定返回true;取消返回false //JQuery //官网:http://www.jquery.com //理念:write less,do more //原生的写法 window.onload = function(){ var oMyDiv = document.getElementById("myDiv"); oMyDiv.onclick = function(){ alert(this.innerHTML); } } //jquery写法 $(function(){ $("#myDiv").click(function(){ alert($(this).html()); }) }); //<div> //<h3>1</h3>> //<h3>2</h3>> //<h3>3</h3> //</div> $("div").find("h3").eq(1).html("hello"); $("div").find("h3").eq(1).html("hello").end().eq(2).html("hello");//end()使结果集回退一步 // $.trim($("#myDiv").text()); $("div").click(function(){}); $("div").mouseover(function(){}); $("div").bind("click mouseover",function(){});//同时绑定了click和mouseover事件 $("div").unbind("click mouseover",function(){});//同时解除了绑定的click和mouseover事件 $("div").one("click",function(){});//表示只有第一次单机div执行function,之后点击无效 $("div").one("click",function(ev){ alert(ev.pageX); return false; });//阻止默认和冒泡 // $("div").fadeIn();//div淡入 $("div").fadeOut();//div淡出 $("div").slideDown(4000);//4秒内向下展开 $("div").slideUp(4000);//4秒内向上卷起 $("div").hover(function(){//放大缩小 $(this).stop().animate({ 200px; height:200px; }) },function(){ $(this).stop().animate({ 300px; height:300px; }) }); //原生 window.onload = function(){ var oDiv = document.getElementById('div1'); var aInput = oDiv.getElementsByTagName('input'); var aCon = oDiv.getElementsByTagName('div'); for(var i=0;i<aInput.length;i++){ aInput[i].index = i; aInput[i].onclick = function(){ for(var i=0;i<aInput.length;i++){ aInput[i].className = ''; aCon[i].style.display = 'none'; } this.className = 'active'; aCon[this.index].style.display = 'block'; }; } }; //jq $(function(){ $('#div1').find('input').click(function(){ $('#div1').find('input').attr('class',''); $('#div1').find('div').css('display','none'); //or $('#div1').find('div').fadeOut(); $(this).attr('class','active'); $('#div1').find('div').eq($(this).index()).css('display','block'); //or $('#div1').find('div').eq($(this).index()).fadeIn(); }); }); //引入ui组件 $('div').draggable();//拖拽 //自写插件 //创建一个jquery_myChaJian.js文件,内容如下: //JavaScript Document //$.fn:扩展插件的方法 (function($){ $.fn.myChaJianFuntion = function(){ $(this).click(function(){ alert("自写插件的写法"); }); }; })(jQuery); //HTML中调用 $('#div').myChaJianFuntion(); //判断日期的正则表达式 var reg = /^(d{4})-(d{2})-(d{2})$/; var resultArr = reg.exec(strDate); //比较日期(YYYY-mm-DD)的大小(返回日期之差) function compareDate(DateOne,DateTwo){ var OneMonth = DateOne.substring(DateOne.indexOf ("-")+1,DateOne.lastIndexOf ("-")); var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ("-")+1); var OneYear = DateOne.substring(0,DateOne.indexOf ("-")); var TwoMonth = DateTwo.substring(DateTwo.indexOf ("-")+1,DateTwo.lastIndexOf ("-")); var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ("-")+1); var TwoYear = DateTwo.substring(0,DateTwo.indexOf ("-")); var one = new Date(OneYear,OneMonth-1,OneDay); var two = new Date(TwoYear,TwoMonth-1,TwoDay); //如果带时分秒 //var one = new Date(OneYear,OneMonth-1,OneDay,oneH,oneM,oneS); //var two = new Date(TwoYear,TwoMonth-1,TwoDay,TwoH,TwoM,TwoS); var days_diff=(one.valueOf()-two.getTime())/86400000; return days_diff; } //合并单元格 function myRowSpan(){ var salesroomTypeTdArr = $("td[name='salesroomTypeTd']"); var orderAgentNameTdArr = $("td[name='orderAgentNameTd']"); var productTypeTdArr = $("td[name='productTypeTd']"); myRowSpanCom(salesroomTypeTdArr); myRowSpanCom(orderAgentNameTdArr); myRowSpanCom(productTypeTdArr); } function myRowSpanCom(arr){ var $myFirstTd; var myRowSpan; $.each(arr,function(i){ if(i==0){ $myFirstTd = $(this); myRowSpan = 1; }else{ if($myFirstTd.text() == $(this).text()){ myRowSpan++; $(this).remove(); $myFirstTd.attr("rowSpan",myRowSpan); }else{ $myFirstTd = $(this); myRowSpan = 1; } } }); } /*---------------------------------JavaScript------------------------------*/ //table var table = document.createElement("table"); var tr = document.createElement("tr"); var td = document.createElement("td"); //disable document.getElementById("myText").disabled = false; document.getElementById("myText").disabled = true; //display document.getElementById("myText").style.display="none"; document.getElementById("myText").style.display="block"; //function //为myTd动态添加子table function addTable(){ //myTd子table的id数组 var myArray = new Array(); myArray[0] = "myChildTable0"; myArray[1] = "myChildTable1"; myArray[2] = "myChildTable2"; //获取myTd对象 var myTdObj = document.getElementById("myTd"); //获取myTd子节点的长度 var myTdChildNodesLength = myTdObj.childNodes.length; //为myTd添加的子table字符串 var innerHtml; innerHtml = "<table id='" + myArray[myTdChildNodesLength] + "'>"; innerHtml += "<tr>"; innerHtml += "<td>"; innerHtml += "<strong>myTd的第"+(parseInt(myTdChildNodesLength,10)+1)+"个子table</strong>"; innerHtml += "</td>"; innerHtml += "</tr>"; innerHtml += "</table>"; //为myTd添加的子table myTdObj.innerHTML += innerHtml; } //myTd任意删除一个子table function deleteTable(){ //获取myTd对象 var myTdObj = document.getElementById("myTd"); //获取myChildTable0对象 var myTblObj = document.getElementById("myChildTable0"); //成功获取myTd对象后删除第一个子表myChildTable0 if(myTdObj){ myTdObj.removeChild(myTblObj); //修改myTd第二个子表信息 var obj; obj = myTdObj.childNodes.item(0); obj = obj.childNodes.item(0); obj = obj.childNodes.item(0); obj = obj.childNodes.item(0); obj.innerHTML = "myTd的第1个子table"; } } //时时监听myJSFunction() function listenAction(){ myJSFunction(); setTimeout(function() { listenAction(); }, 500); } setInterval(myJSFunction,500); //form.submit function fSubmit(){ document.myForm.action = ""; document.myForm.target = ""; document.myForm.submit(); } //调用父页面的JS函数 window.opener.func(); //开启子页面的JS语句 window.showModalDialog("url...","","resizable:yes;scroll:yes;dialogWidth:950px;dialogHeight:650px"); //resizable:yes->窗口可以自由拉伸大小 //scroll:yes->窗口有滚动条 window.open("url...","winName","width=350,height=450,scrollbars=yes"); //关闭本页面的JS语句 window.close(); function toFloat(value) { return parseFloat(value.replace(/,/g, "")); } function formatWithComma(value) { var tempStr = value.toString(); var reStr = ""; if (tempStr.indexOf(".") > 0) { reStr = tempStr.substr(tempStr.indexOf(".")) + "0"; reStr = reStr.substr(0, 3); tempStr = tempStr.substring(0, tempStr.indexOf(".")); } else { reStr = reStr + ".00" } while (tempStr.length > 3) { reStr = "," + tempStr.substr(tempStr.length - 3) + reStr; tempStr = tempStr.substr(0, tempStr.length - 3); } return tempStr + reStr; } // 判断控件是否可见 $("#bindNewEmail").is(":hidden"); $("#bindNewEmail").is(":visible"); </script> </head> <body onload="listenAction();" style="overflow-x:scroll;overflow-y:hidden;" > <form name="myForm" method="post"> <input type="text" id="myText" style="display:none" value="myValue"/> <input type="radio" name="myRadio" value="myRadio1" checked="checked"/> <input type="radio" name="myRadio" value="myRadio2"/> <input type="hidden" name="myHidden" value="myHiddenValue"/> <input type="button" value="myClose" onclick="JavaScript:window.close();" /> <input type="button" value="mySubmit" onclick="fSubmit();" /> <input type="submit" /> <input type="reset" /> <button></button> <input type="checkBox" id="myCheckBox1" name="myCheckBox" value="myCheckBoxValue1" checked="checked"/> <input type="checkBox" id="myCheckBox2" name="myCheckBox" value="myCheckBoxValue2" checked="checked"/> <textarea name="myTextArea" cols="80" rows="3"></textarea> <b style = "color: #d81921;">*</b><!--加粗--> <select> <option>option1</option> <option>option2</option> </select> <select multiple="multiple"></select> <a href=""></a> <img src="图片位置路径" title="鼠标划过显示的内容"/> <div id="myDiv"></div> <span></span> <br/> <table> <tr> <td id="myTd"> <table id="myChildTable0"> <tr> <td nowrap> <strong>myTd的第1个子table</strong> </td> </tr> </table> <table id="myChildTable1"> <tr> <td nowrap> <strong>myTd的第2个子table</strong> </td> </tr> </table> </td> </tr> </table> <ul> <li></li> <li></li> <li></li> </ul> <em>倾斜</em> </form> </body> </html>