<!--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("这是弹窗的第一行内容!\n这是弹窗的第二行内容!");
});
//or
$(function(){
alert("这是弹窗的第一行内容!\n这是弹窗的第二行内容!");
});
/*
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({
width:200px;
height:200px;
})
},function(){
$(this).stop().animate({
width: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>
