序言 准备 如何嵌入网页? 写在网页中 在链接上使用伪协议 使用独立的js脚本 语言核心 关于分号 输出Html最简单的方式 alert : 弹出窗口,调试必备 命名规则 基本类型 字符串 十六进制 浮点 特殊常量 布尔值 基于对象 创建 构造函数 成员函数 继承 公共基类的属性 数组 创建 数组的函数 Date对象 null 和 undefined 函数 定义函数 一个函数,多个函数名 函数嵌套函数 函数参数 函数自身的length arguments.callee : 递归无名函数 函数的静态变量 作用域 引用 等于 全等 (否定为!==) +加 比较大小 in instanceof typeof new delete void [] switch label(标签)/break/continue throw / try...catch...finally 正值表达式 浏览器中的Javascript概览 window对象 简单的对话框 状态栏 定时器 错误处理onerror 浏览器信息navigator 屏幕screen 打开窗口open 移动窗口/改变大小moveTo , moveBy , resizeTo , resizeBy 焦点控制 focus 和 blur 文档滚动 当前地址栏 location 历史History 框架 文档Documents 基本常识 属性 数组 DOM树 搜索文档的特定元素 动态改变文档内容 一个动态改变Document内容的演示 一个把文章中字母都变为大写的演示 把指定标签改为粗体 更改属性 临时容器DocumentFragment 选中内容 getSelection CSS 当前的CSS设置 指定样式表 事件驱动 HTML中事件设置 Javascript中事件设置 事件列表 原始事件vs语义事件 同时执行原有动作和自定义动作 事件的返回值 this关键字 2级DOM标准的消息机制 Event事件对象 UIEvent事件对象 MouseEvent事件对象 MutationEvent IE事件模型 Key Event事件对象 加载事件 onload Event 合成事件 Synthetic Events cookie JS库:prototype $()等价getElementById() $F()返回输入控件的值 $A()参数转Array $H()转类似联合数组的Hash对象 Try.these()尝试直到一个成功
1. 序言 现在学的东西很容易忘记,写这篇文章的目的是能让我在需要时快速找回当时的感觉.
入门学习和参考手册建议翻阅JavaScript.The.Definitive.Guide.5th.Edition的附录(有电子版).
2. 准备 设置服务器*.xml的MIME为text/xml ,Windows Xp自带的IIS的设置如下图 js_0000.png
Firefox上有许多插件是开发必备的,用法大家Google,我列一下名称
FireBug
Web Developer Toolbar GreaseMonkey 和 XmlHttpRequestDebugging
Html Validator 另外建议安装一下DreamWaver和EditPlus. EditPlus中可以快速切换IE和Js脚本,快捷键Ctrl+B 强烈建议学习时便学边调试
3. 如何嵌入网页?
3.1. 写在网页中
3.2. 在链接上使用伪协议 Open
3.3. 使用独立的js脚本
4. 语言核心
4.1. 关于分号 javascript的分号是选加的,如果不加,javacript会在换行处自动加上分号.
但是,建议你不要省略分号,理由如下
加了分号的代码可以用软件压缩,来节省带宽(附带效果是加密你的Js代码:) )(Ajax基础教程 上的理由) 良好的编程习惯(Javascript权威指南 上的理由)
4.2. 输出Html最简单的方式 见例子1_1
doucment.write("Hello World");
4.3. alert : 弹出窗口,调试必备 见例子1_2
alert("弹出窗口,调试必备");
4.4. 命名规则 区分大小写,开头必须是字母或 $ 或 _
4.5. 基本类型
4.5.1. 字符串 使用Unicode字符,如
"test"
'name="zsp"' //双引号可以放在单引号中,反之亦然
'You/'re right' //转义字符,和C++的转义相同
字符串的属性
str="zsp007@gmail.com"
str.length //字符串的长度
str.charAt(str.length-1) //字符串的最后一个字符(注意,第一个字符的索引是0,和C++数组类似)
str.indexOf("@") //第一个 @ 字符的位置
str.substring(str.lastIndexOf(".")+1,str.length); //提取后缀"com",提取规则是左开右闭(就是包括左边参数所代表的元素,而不包括右边的)
str.toUpperCase(); //返回大写形式
4.5.2. 十六进制 0xff //15*16+15=255 , 0x为十六进制前缀
4.5.3. 浮点 -3.14 6.02E-23 //6.02 X 10-23(10的负23次方)
4.5.4. 特殊常量 Infinity 无穷大 Number.POSITIVE_INFINITY 正无穷大 Number.NEGATIVE_INFINITY 负无穷大 NaN 或 Number.NaN 非法的值 Number.MAX_VALUE 可表示的最大值 Number.MIN_VALUE 可表示的最接近0的值
4.5.5. 布尔值 true==1 false==0
4.5.6. 基于对象
4.5.6.1. 创建 方式1:
var o = new Object(); o.x=2.3; o.y=-1.2; 方式2:
var o={x:2.3 , y:-1.2}; 调用 ox //返回2.3
一个复杂点的例子 见例子1_3
var point={x:2.3,y:-1.2}; var side=4; var square={ upperLeft : {x:point.x , y:point.y}, lowerRight : {x:(point.x + side) , y:(point.y+side)} };
alert(square["upperLeft"]["x"]);//显示2.3 备注:内建类型字串不是Object(),即用typeof得到的是"string",和"object"不等价,但在任何需要的地方他会自动转化为一个String对象
4.5.6.2. 构造函数
function Rectangle(w,h)//构造函数.不要返回值,因为返回值会使this失效 { this.width=w; this.height=h; } var rect1=new Rectangle(2,4);//创建对象
4.5.6.3. 成员函数
function Rectangle_area(){return this.width * this.height;}//声明函数
function Rectangle(w,h) { this.width=w;this.height=h;
this.area = Rectangle_area;//关联函数为成员函数 }
var r=new Rectangle(3,2); r.area();//返回6
4.5.6.4. 继承 Javascript的类都自动继承了原型对象 Object.prototype 继承的属性为只读的,既子类不可以给继承的属性赋值 子类的同名属性/函数将覆盖父类的同名属性/函数 String和Date等内部类也有原型对象
//定义一个父类 function Complex(real , imaginary){ this.x=real; this.y=imaginary; }
//为父类添加一个方法,通过定义父类原型prototype的函数 //该方法同时覆盖了Object.prototype中的同名函数 Complex.prototype.toString=function(){ return this.x+"+"+this.y+"j"; }
//定义一个Complex函数,该函数不会被继承(这时不要加this了) Complex.magnitude=function() { return Math.sqrt(x*x+y*y); }
//定义一个子类 function MoreComplex(real , imaginary){ this.x=real; this.y=imaginary; }
//继承父类,注意这时MoreComplex的构造函数被父类的构造函数覆盖 MoreComplex.prototype=new Complex(0,0);
//明确指定,使MoreComplex使用自己的构造函数 MoreComplex.prototype.constructor=MoreComplex;
//定义子类自己的函数 MoreComplex.prototype.swap=function(){ var tmp=this.x; this.x=this.y; this.y=tmp; }
a=new MoreComplex(11,33);
alert(a);//自动调用Complex.toString() a.swap(); alert(a);
4.5.6.5. 公共基类的属性 Object.prototype是所有类的公共基类
constructor属性 构造器,由于构造函数确定了一个对象的类型,可以用如下代码确定一个对象的类型 if((typeof o=="object" )&& o.constructor == Date)//........... 但不能保证constructor属性总是存在,类的创建者可以指定一个对象来取代原型的构造器,而指定的对象可以没有 constructor (PS:此句抄书,我看不懂)
toString() 返回一个字串,内容为对象的值或类型. 默认的toString对于对象返回
[object class] //class为类名,如自定义对象为Object //类似的还有Array,Function,Date,Math,Error,Window,Document,Form 由于可以重载toString.所以,如果你想明确的调用默认的toString来获得类型信息,你可以这样
Object.prototype.toString.apply(x); toLocaleString() Object默认的toLocaleString返回值和toString相等;Array,Date,Number都绑定了自己的toLocaleString valueof() Object默认定valueof不执行任何转换,Number和Boolean等有自定义的valueof(). 当你自定义了valueof时需要注意的是:valueOf()优先级比toString()高,所以,你常不得不明确的调用toString() hasOwnProperty() var o = new Object(); o.hasOwnProperty("undef"); //false:没有定义该属性 o.hasOwnProperty("toString"); //false:该属性是继承的
Math.hasOwnProperty("cos");//true:Math有cos属性 * propertylsEnumerable() 一个属性如果可以由for...in循环枚举出来就返回true,否则,返回false
var o = {x:1}; o.propertylsEnumerable("x");//true o.propertylsEnumerable("y");//false,无该属性 o.propertylsEnumerable("valueOF");//false,该属性不可枚举 isPrototypeOf() 调用该函数的对象如果是参数的原型,就返回true var o=new Object(); Object.prototype.isPrototypeOf(o); //true,o.constructor == Object
Object.isPrototypeOf(o);//false o.isPrototypeOf(Object.prototype);//false
Function.prototype.isPrototypeOF(Object); //true:Object.constructor == Function
4.5.7. 数组
4.5.7.1. 创建 方式1
var a = new Array(); a[0]=2; a[1]="I'm a earthman ." a[2]=true; a[3]={x:1 , y:3} 方式2
var a=new Array(2,"I'm a earthman .",true,{x:1 , y:3}); var a2=new Array(10);//注意,这个10是表示a有10个未定义元素!(因为这时候只传给Array一个参数) 方式3
var a=[2,"I'm a earthman .",true,{x:1 , y:3}]; var a2=[[1,2,3],[1,2,3]];//可以嵌套
var base=11; var a3[base,base+1,base+2];//可以为变量
var a4=[1,,,,5];//有3个未定义的元素
4.5.7.2. 数组的函数 * join() 把所有的元素转换为字串,参数作为分隔符(默认分隔符是 ,)
var a=[1,2,3]; a.join();//1,2,3 a.join(" : ");//1 : 2 : 3 * reverse() 对数组反向排序 * sort() 默认按照UTF-8码的顺序排序,可以传一个参数,如果返回一个小于等于0的数,第1个参数出现在第2个参数前面,反之同理.
function randOrd(){ return (Math.round(Math.random())-0.5); }
anyArray = new Array('3','a','5','F','x','47'); anyArray.sort( randOrd ); //把数组乱序排列 * concat() 返回一个数组,包含了原数组和参数
anyArray = new Array(47,33);
anyArray.concat(8,99,88 ); //[47,33,8,99,88]
anyArray.concat([8,99],[88,53] ); //[47,33,8,99,88,53],会自动把参数中数组拆包一层
anyArray.concat(2,[3,[4,5]]); //[47,33,2,3,[4,5]],拆包只拆一层 * slice() 返回一个数组的切片,返回规则如下
var a = [1,2,3,4,5] a.slice(0,3); //返回a[0]至a[2],即[1,2,3] a.slice(3); //返回a[3]至结尾,即[4,5] a.slice(1,-1);//返回a[1]至最后一个元素[2,3,4] a.slice(-3,-2);//返回[3] * splice() 可以删除/添加原数组元素,同时返回删除的值
var a = [1,2,3,4,5,6,7]; a.splice(4); //删除a[4]至结尾,同时返回删除的值,即a=[1,2,3,4],返回[5,6,7]
var a = [1,2,3,4,5,6,7]; a.splice(3,3,"a","b"); //从a[3]开始,删除3个元素(包括a[3]),同时在从a[3]开始插入"a","b"作为新的元素,返回删除的值 //即a=[1,2,3,"a","b",7],返回[4,5,6]
var a = [1,2,3,4,5,6,7]; a.splice(3,0,["a",2],"k"); //返回[],a=[1,2,3,["a",2],"k",4,5,6,7] ,splice()不会对添加的数组拆包 * push()和pop()
var stack=[];
stack.push(1,2);//stack=[1,2],return 2(2表示数组长度)
stack.pop();//stack=[1],return 2
stack.push(3);//stack=[1,3],return 2(2表示数组长度)
stack.pop();//stack=[1],return 3
stack.push([4,5]);//stack=[1,[4,5]],return 2
stack.pop();//stack=[1],return [4,5]
stack.pop();//stack=[],return 1 * unshift()和shift() 和push()和pop()类似,不过是在数组的头进行操作
var a=[2]; a.unshift(1); //a=[1,2] //IE(包括IE7)和标准的规定返回值却不同,Gecko/Opera 中返回值为新数组的长度,而 IE 中没有返回值,也就是返回值是 undefined。因此,编程时不要依赖这个返回值。
a.unshift(3,[4,5]);//a=[3,[4,5],1,2]
a.shift(); //返回3 * toString() toString等价于不加参数的join
4.5.8. Date对象
var now = new Date(); //默认是当前的时间和日期
var christmas = new Date(2000,11,25); //月份从0开始计数,所以这是表示2000年12月25日
christmas.toLocaleString();//返回时间的本地表示,如果是中国大陆,这里返回"2000年12月25日 0:00:00 " //如果不加toLocalString,christmas自动转换为string时会用GMT时间 //GMT时间这里就是"Mon Dec 25 00:00:00 UTC+0800 2000 "
christmas.getDay() //返回该日期是星期几,比如这里返回1,注意星期天返回的是0
4.5.9. null 和 undefined null : 无值,表示它的不是有效的Javascript类型 undefined : 已经声明但是没有定义的变量的值,对象的一个不存在的属性也是该值 ==运算符将两者视为相等,
可以用===区别null和undefinedes
4.6. 函数
4.6.1. 定义函数 方式1:
function square(x){ return x*x; } 方式2:
var square = function(x){return x*x;} 方式3://比较笨拙
var square = new Funtion("x","return x*x");
4.6.2. 一个函数,多个函数名
var square = function(x){return x*x;} var b=square; var c=b(5);//c=25
4.6.3. 函数嵌套函数
function hypotenuse(){ function square(x){ return x*x; } return Math.sqrt(square(a)+square(b)); }
4.6.4. 函数参数 尽管函数定义时参数个数是固定的,但调用时可以传递任意多个参数,这些参数可以通过arguments[]访问,即使是无名的.
arguments.length可以说明它所含的元素个数
注意:arguments不是数组(不可以用for...in循环),它是一个Aguments对象
arguments可以用于参数个数检查,或接受任意数目参数...
function max() { var m=Number.NEGATIVE_INFINITY; for(var i=0;i< arguments.length;i++) if(arguments[i]>m)m=arguments[i]; return m; }
4.6.5. 函数自身的length 返回函数声明中的参数的个数,通过arguments.callee.length访问
//一个检查参数是否相符的函数 function check(args){ var actual=args.length; var expected=args.callee.length; if(actual!=expected){ throw new Error("Wrong number of arguments"); } }
function f(x,y) { check(arguments); return x+y; }
4.6.6. arguments.callee : 递归无名函数 callee可以引用当前正在执行的函数
function(x) { if(x<1)return 1; return x*arguments.callee(x-1);
4.6.7. 函数的静态变量 类似在C++函数中声明一个static变量
uniqueInteger.counter=0;//静态变量 function uniqueInteger(){//每个返回一个不同的数 return uniqueInteger.counter++; }
4.7. 作用域 没有块级作用域,其他类似于Java和C++.
即函数中无论在那里声明的变量,在整个函数体中都是有定义的.如:
(见例1_4)
var i="global";
function test(o){
document.write(i);//i为undefined,即函数中i已被声明,但没定义 var i="local";
if(typeof o == "object") { var j=0; //j在整个函数中都有定义,不限于这个循环 for(var k=0;k<10;k++){//k在整个函数中都有定义,不限于这个循环 document.write(k); } document.write("out loop k=",k);//k仍然有定义,值为10 }
document.write("out loop j=",j);//仍然有定义,如果o不是object(),则j没有被初始化,值为undefined,否则为9
}
备注:把所有的变量集中在函数开头声明(不一定要定义)可以避免许多诡异的错误.
4.8. 引用 对与 数组 , 对象 , 函数 的拷贝只是拷贝了引用(相当于是个快捷方式),对任何一个副本的改动都会改动所有的副本
var a = [1 , 2 , 3]; var b = a; a[0] = 99; alert(b); //为99,2,3
a={x:1} b=a; a.x=2; alert(b.x);//为2
4.9. ==(等于)和===(全等)
4.9.1. 等于 等于可以进行类型自动转换,如
"2"==2 true==1 一个对象和字串或数字比较,会尝试valueOf()和toString()转换
null == undinfined
4.9.2. 全等 (否定为!==) 如果类型不同,则不相同 NaN永远不与任何值全等,包括它本身(可以用IsNaN()测试一个值是否是NaN) 按字符原有编码进行比较(等于操作在比较前先统一了编码) null != undinfined 对于数组,对象,函数等引用类型只有当他们是指向同一个实体时才相等,如
var a = [1,2,3]; var b = [1,2,3]; alert(a==b);//false
4.10. +加 加法是从左到右的 a=1+2+" blind mine" // a="3 blind mine" b="blind mine "+1+2 // a="blind mine 12"
4.11. 比较大小 符号> , < , >= , <=
任何和NaN的比较都返回false 字串和数字比较,会把字串转换为数字(如果转换不成功,则其值为NaN),再比较 如果对象可以被转换为数字和字串,将执行数字转换来比较
4.12. in in运算符左边是一个字串,右边是一个对象,如果字串是对象的一个属性名则返回true
var point = {x:1}; var has_x = "x" in point ; //true var has_y = "y" in point; //false var ts = "toString" in point; //true,继承属性
4.13. instanceof instanceof运算符要求左边是一个对象的实例,右边是对象名,如果两者相符返回true
var d=new Date(); d instanceof Date;//true d instanceof Object;//true,所有的对象都是Object的实例 d instanceof Number;//false
4.14. typeof 返回对象的类型
typeof 1; //number typeof "1";//string typeof true;//boolean
typeof [1,2];//object typeof {x:1};//object
typeof function(x){};//function
typeof xxx;//未定义的对象返回undefined
4.15. new 创建一个新的对象
o=new Date;
4.16. delete 删除对象的属性
var o={x:1,y:2};
delete o.x; //返回true typeof o.x;//返回undefined
delete o.x;//删除不存在的属性,返回true
delete o;//不能删除var声明的对象,返回true
x=1;//不用var关键字,隐式声明一个变量 delete x;//返回true x;//一个运行时错误,IE6显示为 " 'x'未定义 " 注意:delete只能删除属性值,不能删除引用对象 如
var my = new Object;
my.hire = new Date; my.fire = my.hire;
delete my.hire;
alert(my.fire);//显示当前的时间
4.17. void 可以出现在任何操作数前,它作用是舍弃运算的结果,返回undefined.
常用于javascript : URL中.可以计算一个计算一个表达式的值,又不让浏览器显示它.如
Open
4.18. []
//用于数组 var a=[21,3]; a[0];//21
//用于对象,比"."运算符的优势是其要取的属性名可以动态生成 var b={x1:1,x2:"zsp"}; b['x1'];//1 b['x'+2];//zsp
for(f in o){ alert('o.'+f+'='+o[f]);//由于f是动态生成的,所有不能用" . "运算符 } == if/else/while/do...while/for== 和C++类似
== for...in === 可循环对象的所有用户定义属性,包括继承的(但是不包括内建属性)
var o={x:1,y:2}; var a=[]; var i=0;
for(a[i++] in o);//把o的属性名复制到一个数字中(注意,顺序不固定)
for (i in a) { alert(a[i]);//循环一个数组 }
4.19. switch
function convert(x){ switch(typeof x){ case 'number': //case后可以接任意表达式,不限于常量 return x.toString(16);//转换为16进制 case 'string': return '"'+x+'"'; case 'boolean': return x.toSting().toUpperCase(); default: return x.toString(); } }
4.20. label(标签)/break/continue break,continue的基本用法和C++中类似,不过他们可以和label配合使用(有的像Java中的label,功能限制版的goto)
outerloop: for(var i=0;i!=10;i++) { for (var j=0;j<10;j++){ if(j>3)break; if(i==2)break outerloop;//跳出外层循环 alert("j = "+j); } alert("i = "+i); }
4.21. throw / try...catch...finally throw用来抛出异常,异常对象通常是一个Error对象或其子类型
function factorial(x){ if(x<0)throw new Error("x must not be negative");//x是负数就抛出异常 return x; } try...catch...finally捕捉异常
try{ //代码 } catch(e) { //仅当try块抛出异常,才会执行,e为异常实例 //这个块可以处理异常,也可以什么都不做 } finally{ //无论是否有异常,这个块中的语句都将被执行 }
4.22. 正值表达式 //todo
5. 浏览器中的Javascript概览 window对象代表显示浏览器的窗口,document对象代表文档中窗口. 定义函数的js文件一般放在head区
和
的onload在文档被完全加载完成时触发,onunload在文档被卸载时触发
5.1. window对象 window是全局对象,它的函数/属性一般可以不加前缀直接调用。有时为了避免名字冲突,可以加window前缀
5.1.1. 简单的对话框 注意:对话框中显示的是纯文本. * alert() 见图js_0001.png
* confirm() 见图js_0002.png
if(confirm("看我的非技术Blog吗?/n/n我写了不少诗哦 :)")) location.replace("http://www.cnweblog.com/zuroc/"); * prompt() 见图js_0003.png
n=prompt("你叫什么名字呢?","");//第二个参数是输入的默认值
document.write("
你好, "+n+"! 我叫张沈鹏. ");
5.1.2. 状态栏 * status 浏览器状态栏的显示文本 * defaultStatus 浏览器状态栏显示文本的默认值 该属性在firefox默认关闭,不介绍了
5.1.3. 定时器 * setTimeout() 安排一个JavaScript代码在指定的时间后执行 * clearTimerout() 取消setTimeout的执行 * setInterval() 每隔指定的时间调用指定的函数 * clearInterval() 取消Interval的执行
function hi(){alert("hi!");} setInterval("hi()",2000);//2000ms=2s
5.1.4. 错误处理onerror 只要给这个属性赋了一个函数,那么这个窗口只要发生了javascript错误,该函数就会被调用.传给错误处理函数的参数有三个,第一个是错误类型,第二个是引发错误的js脚本的Url,第三是发生错误的行号.
如果onerror返回true,它将屏蔽系统的错误处理程序
//如果你不想错误消息打搅用户,无论你的代码有多Bug window.onerror = function(){return true;} //不过,不建议你这样做
5.1.5. 浏览器信息navigator 包含了浏览器的信息
* appName Web浏览器的名称 * userAgent 浏览器在USER-AGENT HTTP标题中发送的字符串,通常包含了appName和appVersion * platform 平台,如Win32
//一个简单浏览器探测器 var browser = { version: parseInt(navigator.appVersion), isNetscape: navigator.appName.indexOf("Netscape") != -1, isMicrosoft: navigator.appName.indexOf("Microsoft") != -1 };
5.1.6. 屏幕screen * width,height 分辨率的宽和高 * availWidth , availHeight 去除了任务栏这样的特性的宽和高 * colorDepth 屏幕的色深 见例子1_5.html
5.1.7. 打开窗口open
//注意,直接弹出窗口容易被浏览器广告拦截了 window.open("http://www.cnweblog.com/zuroc/","窗口名","width=200,height=200,status=yes,resizable=yes"); //具体属性希望那位大哥可以帮我列一下 //被打开的窗口可以用opener引用父窗口,如果是用户自己打开的opener为null //用open时一般要明确加上window前缀,因为Document也有open属性 见例子1_5.html
window.close可以关闭你用javascript打开的窗口
5.1.8. 移动窗口/改变大小moveTo , moveBy , resizeTo , resizeBy * moveTo 把窗口左上角移到指定的坐标 * moveTo 把窗口相对现在的位置移动指定的象素 * resizeTo 按照绝对大小调整窗口 * resizeBy 按照相对大小调整窗口 见例子1_5.html
5.1.9. 焦点控制 focus 和 blur * focus() 将焦点给指定窗口,同时把窗口移动到最前端,使窗口可见,当open()打开窗口,如果第二个参数指定的窗口名已经存在,open不会自动使那个窗口可见,这时就要调用该函数 * blur() 放弃焦点,这时窗口将被至于窗口队列的最后(这就什么sohu背投广告的原理吧) 见例子1_5.html
5.1.10. 文档滚动 * scrollBy() 相对当前位置滚动指定的象素 * scrollTo() 将文档滚动到一个绝对位置,文档的左上角的坐标为(0,0)
5.1.11. 当前地址栏 location 它本身代表当前窗口的URL,它还有各个属性如下 * location.protocol 用的协议,如在本地直接打开网页则是file: * location.host 用的域名 * location.pathname 域名后的网址路径.如"/F:/Javascript绝对简明教程/example/test.html " * location.search 查询的内容 * location.reload() 刷新当前线 * location.replace() 跳转到指定的URL,与直接给location赋值不同的是,这样不会在浏览历史中留下记录(也就是后退不会到该页)
//一个把URL串中查询内容解析为键值对的函数 function getArgs(){ var args=new Object; var query=location.search.substring(1);//或取查询串 var pairs=query.split(","); //在逗号处分开 for(var i=0;i var pos=pair[i].indexOf("="); var argname=pairs[i].substring(0,pos); var value=pairs[i].substring(pos+1); args[argname]=decodeURIComponent(value); } return args; } //调用可以这样 var args=getArgs(); if(args.x)x=parseInt(args.x);
//检查浏览器是否支持DOM,如果不支持则跳转 if (!document.getElementById) location = "staticpage.html";
5.1.12. 历史History 脚本不能真正访问History数组,但是可以调用它的函数 * back() 后退 * forward() 前进 * go() 后退/前进指定的页数
5.1.13. 框架 一个窗口可以用frames,parent,top引用其他属性
每个窗口有一个frame[]数组(如果一个窗口没有框架则它的frame[]是空的,frames.length==0),frame[0]表示它的第一个子框架,如此类推
每个窗口还有一个parent属性,为包含这个窗口的window对象,这样一个窗口通过诸如parent.frames[1]的方式,引用他的兄弟窗口
对于顶层窗口,有parent==window
对于框架中的框架,可以用top直接引用最顶层的窗口
见图js_0004.png
框架可以用name指定名字,这个名字可以为链接的target值.当这个链接被激活的时候会在指定的框架中显示内容
在javascript也可以通过名字访问框架,如一个框架如下
则可以通过parent.table_of_contents方法访问该框架
需要注意的在一个框架定义的函数/变量,在另一个框架中要通过框架名来调用
见例1_6.html
5.2. 文档Documents
5.2.1. 基本常识
5.2.1.1. 属性 * bgColor , fgColor 文档背景色,前景色(不赞成使用的属性) * lastModified 文档的最后修改时间
//可以在文档末加入 最后更新: * referrer 如果该属性存在,则返回一个链接,表示用户是由哪个网页链接到该页的
5.2.1.2. 数组 * title 文档标题 * URL 等同于window的location.href * anchors[] 所有有name属性的a标记 * forms[] 所有form标记,每个form还有一个element[]数组 * images[] 所有的 标签,可以改变它的src属性来改变图象 * link[] 文档中所有的超链接,和window的location一样有protocol, hostname,pathname等属性
//如果一个元素有name还可以这样访问 document.forms.f1 document.forms["f1"]
//对于它的子元素可以这样访问 document.shipping.zipcode
//如果有重名的元素,以上的引用方法将返回一个数组
5.2.2. DOM树 见图js_0005.png 对于树上的节点可以用firstChild, lastChild, nextSibling, previousSibling, 和 parentNode属性来历遍
appendChild(), removeChild(), replaceChild(), 和 insertBefore() 可以在文档中动态的添加/删除节点
每个节点都有一个nodeType属性,表明了它的类型
Interface nodeType constant nodeType value
Element Node.ELEMENT_NODE 1 Text Node.TEXT_NODE 3 Document Node.DOCUMENT_NODE 9 Comment Node.COMMENT_NODE 8 DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 Attr Node.ATTRIBUTE_NODE 2
getAttribute(), setAttribute(), removeAttribute() 可以用来操作属性,标准的Html元素的属性也可以通过这种方式访问 getAttributeNode()可以返回一个Attr对象,它有一个specified属性,可以判断文档是否指定了该属性,或判断它是否是默认值
//历便一个DOM树 function countTags(n) { // n is a Node var numtags = 0; // Initialize the tag counter if (n.nodeType == 1 /*Node.ELEMENT_NODE*/) // Check if n is an Element numtags++; // Increment the counter if so var children = n.childNodes; // Now get all children of n for(var i=0; i < children.length; i++) { // Loop through the children numtags += countTags(children[i]); // Recurse on each one } return numtags; // Return the total } alert('This document has ' + countTags(document) + ' tags');
5.2.2.1. 搜索文档的特定元素 * document.getElementsByTagName() 返回指定标签名的数组
//虽然只有一个body,还是返回一个数组 document.getElementsByTagName("body")[0];
//有多少表格 var tables = document.getElementsByTagName("table"); alert("This document contains " + tables.length + " tables");
* document.getElementById() 返回id号为指定值元素,因为每个id应该的独一无二的,所以该方法最多返回一个元素
var myParagraph = document.getElementById("specialParagraph"); * document.getElementsByName() 返回name属性为指定值的元素的数组
// Find var link = document.getElementsByName("top")[0]; // Find all elements var choices = document.getElementsByName("shippingMethod");
5.2.2.2. 动态改变文档内容 * Document.createElement() * Document.createTextNode() * Node.appendChild() * Node.insertBefore() * Node.replaceChild()
5.2.2.3. 一个动态改变Document内容的演示
test
Sort list
5.2.2.4. 一个把文章中字母都变为大写的演示
// This function recursively looks at Node n and its descendants, // converting all Text node data to uppercase function upcase(n) { if (n.nodeType == 3 /*Node.TEXT_NODE*/) { // If the node is a Text node, change its text to uppercase. n.data = n.data.toUpperCase(); //你也可以用appendData(), insertData(), deleteData(), replaceData()来更改数据 } else { // If the node is not a Text node, loop through its children // and recursively call this function on each child. var kids = n.childNodes; for(var i = 0; i < kids.length; i++) upcase(kids[i]); } }
5.2.2.5. 把指定标签改为粗体
This is paragraph #1.
This is paragraph #2.
Embolden
5.2.2.6. 更改属性
var headline = document.getElementById("headline"); // Find named element headline.setAttribute("align", "center"); // Set align='center'
5.2.2.7. 临时容器DocumentFragment DocumentFragment是一个用来装载DOM对象的临时容器,将他写入文档其实是将它的子元素写入节点
// 翻转元素 function reverse(n) { // Create an empty DocumentFragment as a temporary container var f = document.createDocumentFragment(); // Now loop backward through the children, moving each one to the fragment. // The last child of n becomes the first child of f, and vice-versa. // Note that appending a child to f automatically removes it from n. while(n.lastChild) f.appendChild(n.lastChild);
// Finally, move the children of f all at once back to n, all at once. n.appendChild(f); } ==== 直接插入Html代码innerHTML ==== 虽然不是W3C的标准,但是事实上的标准,类似的还有outerHTML, innerText, 和outerText var table = document.createElement("table"); // Create the
element table.border = 1; // Set an attribute // Add a Name|Type|Value header to the table
5.2.2.8. 选中内容 getSelection 还不是标准,但还是可用的,参考 http://www.quirksmode.org/js/selected.html
Hi , everybody . My name is Zsp . function getSelectedText() { if (window.getSelection) { // This technique is the most likely to be standardized. // getSelection() returns a Selection object, which we do not document. return window.getSelection().toString(); } else if (document.selection) { // This is the IE-specific technique. // We do not document the IE selection property or TextRange objects. return document.selection.createRange().text; } //现在可以省略了 else if (document.getSelection) { // This is an older, simpler technique that returns a string return document.getSelection(); } }
//一个实际使用的演示 Look Up Selected Text In Wikipedia
5.2.3. CSS
//一个用来隐藏广告代码的演示 var imgs = document.getElementsByTagName("img"); // Find all images for(var i = 0; i < imgs.length; i++) { // Loop through them var img=imgs[i]; if (img.width == 468 && img.height == 60) // If it's a 468x60 banner... img.style.visibility = "hidden"; // hide it! } * javascript与css的名字映射,如font-family映射为fontFamily,诸如此类.另外css中的float映射为cssFloat,如此类推
e.style.position = "absolute"; e.style.fontFamily = "sans-serif"; e.style.backgroundColor = "#ffffff"; e.style.left = "300px"; e.style.margin = topMargin + "px " + rightMargin + "px " + bottomMargin + "px " + leftMargin + "px";
5.2.3.1. 当前的CSS设置 W3C规定了getComputedStyle()函数来获取CSS元素的经过各种效果复合过后的当前值
但是IE不支持标准,但它有每个元素都有一个currentStyle属性,可以取得同样的效果
//一段兼容的代码
Look Up Selected Text In Wikipedia
5.2.3.2. 指定样式表
id="ss1" title="Large Type"> id="ss2" title="High Contrast">
5.2.4. 事件驱动
5.2.4.1. HTML中事件设置 html元素对事件进行响应(不要放在
This is another paragraph
6.2. $F()返回输入控件的值
6.3. $A()参数转Array 这个方法加上对Array类的扩展,可以很容易的转换或者复制任意的列举列表到Array对象, 一个被推荐使用的用法就是转换DOM的NodeLists到一个普通的数组里,可以被更广泛高效的使用, 看下面的例子。
Buchanan, Steven Callahan, Laura Davolio, Nancy
6.4. $H()转类似联合数组的Hash对象 $H()方法把对象转化成可枚举的貌似联合数组Hash对象。
==$R()简单的遍历 == 用方法$R()方法是new ObjectRange(lowerBound, upperBound, excludeBounds)的一个简单快捷的使用方式。
6.5. Try.these()尝试直到一个成功 方法Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易, 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行,返回成功执行的那个方法的返回值。
在下面的例子中, xmlNode.text在一些浏览器中好用,但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。
== Ajax.RequestXML响应==
如果你不使用任何的帮助程序包,你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程,然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。
为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。
假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它返回下面这样的XML响应。
1234 1998-01 $8,115.36 1234 1998-02 $11,147.51 用 Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。
Buchanan, Steven Callahan, Laura Davolio, Nancy 1996 1997 1998 你注意到传入 Ajax.Request构造方法的第二个对象了吗? 参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性,另一个属性名为 parameters 包含HTTP请求的查询字符串,和一个onComplete 属性/方法包含函数showResponse。
还有一些其它的属性可以在这个对象里面定义和设置,如 asynchronous,可以为true 或 false 来决定AJAX对服务器的调用是否是异步的(默认值是 true)。
这个参数定义AJAX调用的选项。在我们的例子中,在第一个参数通过HTTP GET命令请求那个url,传入了变量 pars包含的查询字符串, Ajax.Request 对象在它完成接收响应的时候将调用showResponse 方法。
也许你知道, XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段:Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ,Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用,这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。
还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法,当AJAX无误的执行完后调用, 相反的,也可以在onFailure选项处传入一个方法,当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样,这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。
我们的例子没有用任何有趣的方式处理这个 XML响应, 我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息,然后更新页面中的某些元素, 或者甚至可能做某些XSLT转换而在页面中产生一些HTML。
在1.4.0版本中,一种新的事件回传外理被引入。如果你有一段代码总是要为一个特殊的事件执行,而不管是哪个AJAX调用引发它,那么你可以使用新的Ajax.Responders对象。 假设你想要在一个AJAX调用正在运行时,显示一些提示效果,像一个不断转动的图标之类的,你可以使用两个全局事件Handler来做到,其中一个在第一个调用开始时显示图标,另一个在最后一个调用完成时隐藏图标。看下面的例子。
Loading...
更完全的解释,请参照 Ajax.Request 参考 和 Ajax选项参考。
MoinMoin PoweredPython PoweredValid HTML 4.01 推荐使用支持W3C标准的浏览器进行阅读,获得最佳页面效果,谢绝IE的混乱解析! Searching all CPUG sites and mailist:: Web getACL = 0.006s getPageList = 0.204s loadLanguage = 0.005s load_multi_cfg = 0.003s run = 0.364s send_page = 0.112s send_page_content = 0.052s total = 0.378s
你可能感兴趣的:(js,ajax,脚本语言)
uniapp安卓端后台定时任务不能触发问题
张小勇
uni-app
如果用vue界面就会导致这个问题,因为实际上是加载了一个浏览器内核,有的手机一旦退出到后台就会停止运行js代码而用nvue则用原生技术实现,就能有一定的后台运行能力尤其是app.vue里面如果有全局定时任务的时候,要把app.vue改为app.nvue
探究Fingerprintjs:了解浏览器指纹技术的原理和应用
Bj陈默
javascript
一、什么是FingerprintjsFingerprintjs是一个用于生成浏览器指纹的JavaScript库。浏览器指纹是一种通过收集浏览器的各种信息来识别用户设备的技术。它类似于人的指纹,具有一定的独特性,可以用于区分不同的用户设备。二、浏览器指纹技术的原理(一)基本信息收集用户代理(UserAgent)用户代理字符串包含了浏览器的类型、版本、操作系统等信息。例如,一个典型的用户代理字符串可能
react中关于组件的一些概念(有无状态组件、组件封装与继承 、高阶组件)
不能懒鸭
react基础 面试 react.js javascript 前端
怎么理解“在react中,一切皆为组件”句话react采用组件化的思想,最小的组件单位就是原生HTML元素,采用JSX语法组件声明调用react的虚拟dom,就是一个大的组件树,从父组件层到子组件,在react-routerv4版开始,路由本身也是组件各个库提供的hoc返回也是组件,如withRouter、connectreact中的基础数据stateprops的传递也是以组件为基础1.什么是组件
精讲 JS return 语句的作用
谦虚的w
javascript 前端
函数作用域的限制-在JavaScript中,函数有自己的作用域。在函数内部定义的变量和对象(如localObj)默认情况下在函数外部是无法直接访问的。这是因为函数的作用域是封闭的,它将内部的变量和对象隐藏起来,以防止外部代码随意访问和修改。return语句的作用-当在函数内部使用return语句返回一个对象(如returnlocalObj;)时,实际上是将这个对象的引用传递到函数外部。这样,在函数
基于SpringBoot+JWT实现单点登录解决方案
买女孩的火柴盒
spring boot 后端 java
基于SpringBoot和JWT(JSONWebTokens)实现单点登录(SSO,SingleSign-On)是一个流行的选择,因为它能够简化身份验证流程,并在多个应用之间共享用户的登录状态。1.添加依赖在你的pom.xml中添加JWT和SpringSecurity的依赖:org.springframework.bootspring-boot-starter-weborg.springframe
Three.js 后期处理(Post-Processing)详解
山楂树の
Three.js javascript 开发语言 ecmascript 图形渲染 计算机视觉
目录前言一、什么是后期处理?二、Three.js后期处理的工作流程2.1创建EffectComposer2.2添加渲染通道(RenderPass)2.3应用最终渲染三、后期处理实现示例3.1基础代码四、常见的后期处理效果4.1辉光效果(UnrealBloomPass)4.2景深(BokehPass/DepthofField)4.3运动模糊(MotionBlurPass)4.4边缘检测(Outlin
除了layui.js还有什么比较好的纯JS组件WEB UI?在谷歌浏览上显示
专注VB编程开发20年
javascript 前端 layui
以下是一些比较好的纯JS组件WEBUI,可以在谷歌浏览器上良好显示:1.Sencha特点:提供超过140个高性能UI组件,用于构建现代应用程序。支持与Angular和React集成,提供企业级网格解决方案。适用场景:适用于需要高性能、可定制的UI组件的项目,尤其是企业级应用。2.Webix特点:包含102个UI组件,支持跨平台和跨浏览器,提供快速的渲染速度和纯JavaScript代码。适用场景:适
Node.js 全局对象
wjs2024
开发语言
Node.js全局对象引言在Node.js中,全局对象是JavaScript环境中的一部分,它提供了对Node.js运行时环境的访问。全局对象在Node.js中扮演着重要的角色,它使得开发者能够访问和操作Node.js的许多核心功能。本文将详细介绍Node.js的全局对象,包括其特点、常用方法和应用场景。全局对象概述Node.js的全局对象是global,它是Node.js中所有模块的父对象。在N
pytest之通过yaml实现数据驱动
董林夕
自动化测试 pytest python
一、安装pyyamlpipinstallpyyaml二、yaml基本语法略过三、将测试用例数据写入yaml#用例1-interfaceName:首屏-考试数据接口url:http://stupad-stre****headers:{'Content-Type':'application/json','requestid':'021618985865','token':'eyJ0eXAiOiJKV1
在js中使用createElement创建HTML对象和元素
Dove言和
1.创建链接 var o=document.body; //创建链接 function createA(url,text) { var a=document.createElement("a"); a.href=url; a.innerHTML=text; a.style.color= "red"; o.appendChild(a); } createA("http://www.ffasp.com
Node.js学习:深入解析Express中间件body-parser的源码
碧海蓝天·
node.js 学习 express
Node.js学习:深入解析Express中间件body-parser的源码在Node.js开发中,Express是一个非常受欢迎的Web应用框架。它提供了许多功能强大且易于使用的中间件,其中之一是body-parser,它用于解析HTTP请求体中的数据。在本文中,我们将深入探讨body-parser中间件的源码,了解它是如何实现的。首先,让我们来看一下body-parser中间件的基本用法:co
鸿蒙OH实战开发:基于webview拉起自定义键盘
彭家大少
鸿蒙开发 移动开发 HarmonyOS harmonyos ArkUI 鸿蒙开发 openharmony 移动开发
往期学习笔录:鸿蒙应用开发与鸿蒙系统开发哪个更有前景?嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?记录一场鸿蒙开发岗位面试经历~持续更新中……场景描述在特殊的H5场景下需要应用拉起自定义键盘进行输入。场景一:使用jsBridge拉起自定义弹窗写自定义键盘,再通过jsBridge传参实现输入。场景二:使用web的同层渲染将原生textI
华为OD2024机试最新E卷题库-(A+B+C+D+E)
蜗牛快快快快跑
华为od 算法 数据结构 贪心算法 排序算法 动态规划
在这个精心策划的专栏中,我们聚焦于华为OD2024机试的最新E卷题库,涵盖JS、C、C++、Java与Python五大编程语言,旨在为挑战者提供全面而深入的备战资源。这里不仅有精选的实战题目,还有详尽的解题思路与代码实现,帮助你掌握核心算法,理解数据结构,提升编程技巧。以下是每个卷宗的详细,可以通过直接点击试卷链接查看练习试卷编号备注OD-E卷原题+个人代码+思路解析,95%以上的通过率,方便大家
python requests json_python json requests request 模块
weixin_39782355
python requests json
1、json通过Python的json模块,可以将字符串形式的json数据转化为字典,也可以将Python中的字典数据转化为字符串形式的json数据。之前使用这个模块时,都是随用随查,浅尝辄止,对模块的功能了解不深。随着使用次数的增加,我对这个功能完善的模块有了更多的了解,记录如下。json.loads将字符串装换成python基本数据类型json.dumps将python数据类型转换成字符串方式
pythonrequests发送数据_对python requests发送json格式数据的实例详解
weixin_39652869
requests是常用的请求库,不管是写爬虫脚本,还是测试接口返回数据等。都是很简单常用的工具。这里就记录一下如何用requests发送json格式的数据,因为一般我们post参数,都是直接post,没管post的数据的类型,它默认有一个类型的,貌似是application/x-www-form-urlencoded。但是,我们写程序的时候,最常用的接口post数据的格式是json格式。当我们需要
python json requests request 模块
weixin_33868027
json python
1、json通过Python的json模块,可以将字符串形式的json数据转化为字典,也可以将Python中的字典数据转化为字符串形式的json数据。之前使用这个模块时,都是随用随查,浅尝辄止,对模块的功能了解不深。随着使用次数的增加,我对这个功能完善的模块有了更多的了解,记录如下。json.loads将字符串装换成python基本数据类型json.dumps将python数据类型转换成字符串方式
Python的Json方法
weixin_34293059
json python javascript ViewUI
Json简介:Json,全名JavaScriptObjectNotation,是一种轻量级的数据交换格式。Json最广泛的应用是作为AJAX中web服务器和客户端的通讯的数据格式。现在也常用于http请求中,所以对json的各种学习,是自然而然的事情。dumps方法将字典数据类型转换为json字符串类型例子:importjsonm={'a':123,'b':'hahaha'}json_str=js
如何使用jwt 完成注销(退出登录)功能
前端 贾公子
node.js
目录JSONWebTokens(JWT)注销Token过期很酷,但我还是想注销!结论JSONWebTokens(JWT)JSONWebTokens(JWT)是一种无状态处理用户身份验证的方法。什么意思?JWT帮助建立认证机制而不将身份验证状态存储在任何存储中,无论是会话内存还是数据库,因此,当检查用户的身份验证状态时,不需要访问会话内存或执行数据库查询。相反,根据你选择的用户payload生成to
Python使用JSON
桂亭亭
python python json 开发语言
案例1dumps将python中的字典数据编码为JSON字符串字符串importjsontest_dict={'one':1,'two':{2.1:['a','b']}print(test_dict)print(type(test_dict))#dumps将数据转换成字符串json_str=json.dumps(test_dict)print(json_str)print(type(json_st
一文解锁 NVM:Node版本随意切换不再发愁
一个小白的小白人
前端 nvm node.js 前端 node.js
前言搞前端开发的朋友肯定都对Node.js不陌生,它在咱们的工作里,就像得力助手,没了它,很多工作都没法顺利开展。但Node.js更新得那叫一个快,新特性、新优化不断冒出来。这就好比你本来开着一辆顺手的车,开得正稳呢,突然厂家说出了新款,性能更强,功能更多,你心里肯定痒痒,想试试新的。可实际情况是,每个项目就像不同的乘客,需求不一样。我之前做一个老项目维护,它就像个念旧的乘客,只认Node.js的
Mongo数据库简介
chqj_163
作者:[佚名]-发布:2010-11-1810:16:59-来源:无忧技术网转载http://www.liqwei.com/database/other/2010/778.shtmlMongo是一个高性能,开源,无模式的文档型数据库,它在许多场景下可用于替代传统的关系型数据库或键/值存储方式。Mongo使用C++开发,提供了以下功能:◆面向集合的存储:适合存储对象及JSON形式的数据。◆动态查询:
图书管理系统 Axios 源码 __删除图书功能
还是鼠鼠
javascript bootstrap ajax vscode 前端 前端框架 node.js
目录代码实现(index.js)代码解析使用方法下面是完整的删除图书功能代码,基于HTML+Bootstrap+JavaScript+Axios开发。代码实现(index.js)//删除图书功能document.querySelector('.list').addEventListener('click',(e)=>{//判断是否点击了删除按钮if(e.target.classList.conta
【2024年华为OD机试】(A卷,100分)- 单向链表中间节点 (Java & JS & Python&C/C++)
妄北y
算法汇集笔记总结(保姆级) 华为od java javascript python c语言 链表
一、问题描述题目描述求单向链表中间的节点值,如果奇数个节点取中间,偶数个取偏右边的那个值。输入描述第一行链表头节点地址后续输入的节点数n后续输入每行表示一个节点,格式节点地址节点值下一个节点地址(-1表示空指针)输入保证链表不会出现环,并且可能存在一些节点不属于链表。输出描述单向链表中间的节点值用例输入000104000003-1000105123091145160000012309711451输
ASP.NET Core与配置系统的集成
AAA猪饲料批发李师傅
.NET .netcore
目录配置系统默认添加的配置提供者加载命令行中的配置。运行环境读取方法UserSecrets注意事项Zack.AnyDBConfigProvider案例配置系统默认添加的配置提供者加载现有的IConfiguration。加载项目根目录下的appsettings.json。加载项目根目录下的appsettings.{Environment}.json。当程序运行在开发环境下,程序会加载“用户机密”配置
labelme_json_to_dataset ValueError: path is on mount ‘D:‘,start on C
广药门徒
json
这是你的labelme运行时label照片的盘和保存目的地址的盘不同都值得报错labelme_json_to_datasetValueError:pathisonmount'D:',startonC只需要放一个盘但可以不放一个目录
Vue.js `v-memo` 性能优化技巧
轻口味
VUE.JS 入门与实践 vue.js 性能优化 前端
Vue.jsv-memo性能优化技巧今天我们来聊聊Vue3.2引入的一个性能优化指令:v-memo。如果你在处理大型列表或复杂组件时,遇到性能瓶颈,那么v-memo可能会成为你的得力助手。什么是v-memo?v-memo是Vue3.2新增的内置指令,用于缓存特定元素节点的虚拟DOM(VNode)。在节点更新时,通过复用之前的VNode,减少重新创建和比较的开销,从而提升渲染性能。使用场景v-mem
npm、cnpm、yran、pip、django命令查询、安装、删除、更新及运行、打包汇总积累
亲,你有多少时间可以重来
前端 npm 前端 node.js
npm、cnpm、yran这三个命令,不同的项目适合不同的命令,原因未知。精通一种我觉得就行了。npm命令的安装、删除、更新常见命令汇总了一下:1.查看当前npm信息:npm-v2.查看当前npm信息返回https://registry.npmjs.org/npmconfiggetregistry3.更换当前的镜像源,用淘宝或者华为要快不少。npmconfigsetregistryhttp://r
使用Elasticsearch和SelfQueryRetriever实现智能电影检索
hgSdaegva
elasticsearch jenkins 大数据 python
在当今信息爆炸的时代,快速而准确地检索数据变得尤为重要。Elasticsearch是一个强大的分布式搜索和分析引擎,能够高效地处理大量数据。在这篇文章中,我们将结合Elasticsearch和SelfQueryRetriever,展示如何通过语言模型实现智能电影查询。技术背景介绍Elasticsearch提供多租户能力和无模式的JSON文档存储,广泛应用于全文搜索和分析场景。通过将其与语言模型结合
Qpython+Flask监控添加发送语音中文信息功能
eybk
flask python 后端
对Qpython+Flask实现对小孩学习的监控-CSDN博客中html页面进行改造,利用Ajax,提交一段文字,发送到数据库,再在服务器,发送该段文件给手机端,然手机端TTS朗读出来,增加了父母监控小孩学习,自定义提醒小孩的功能。一、index.html的更改。实时**学习情况图//设置定时器,每20秒(20000毫秒)刷新一次页面setInterval(function(){location.
Three.js + GIS:打造三维地理信息系统的教程
全栈探索者chen
threeJS javascript 开发语言 ecmascript 学习 three.js 前端 3d
Three.js+GIS:打造三维地理信息系统的教程Three.js是构建WebGL3D应用的强大工具,而结合GIS(地理信息系统)后,可以实现炫酷的三维地理可视化效果。本教程将从基础入手,教你如何用Three.js打造一个简单的三维GIS应用。一、项目规划1.目标功能我们希望实现以下功能:加载三维地图:加载全球地图或指定区域。添加三维数据:在地图上展示建筑、标注等3D数据。交互功能:用户可以缩放
java类加载顺序
3213213333332132
java
package com.demo;
/**
* @Description 类加载顺序
* @author FuJianyong
* 2015-2-6上午11:21:37
*/
public class ClassLoaderSequence {
String s1 = "成员属性";
static String s2 = "
Hibernate与mybitas的比较
BlueSkator
sql Hibernate 框架 ibatis orm
第一章 Hibernate与MyBatis
Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。
MyBatis 参考资料官网:http:
php多维数组排序以及实际工作中的应用
dcj3sjt126com
PHP usort uasort
自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8&q
DOM改变字体大小
周华华
前端
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&q
c3p0的配置
g21121
c3p0
c3p0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是:http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。
以在spring中配置dataSource为例:
<!-- spring加载资源文件 -->
<bean name="prope
Java获取工程路径的几种方法
510888780
java
第一种:
File f = new File(this.getClass().getResource("/").getPath());
System.out.println(f);
结果:
C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin
获取当前类的所在工程路径;
如果不加“
在类Unix系统下实现SSH免密码登录服务器
Harry642
免密 ssh
1.客户机
(1)执行ssh-keygen -t rsa -C "
[email protected] "生成公钥,xxx为自定义大email地址
(2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上,xxx为服务器地址
(3)执行cat
Java新手入门的30个基本概念一
aijuans
java java 入门 新手
在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。 Java概述: 目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合
Memcached for windows 简单介绍
antlove
java Web windows cache memcached
1. 安装memcached server
a. 下载memcached-1.2.6-win32-bin.zip
b. 解压缩,dos 窗口切换到 memcached.exe所在目录,运行memcached.exe -d install
c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo
数据库对象的视图和索引
百合不是茶
索引 oeacle数据库 视图
视图
视图是从一个表或视图导出的表,也可以是从多个表或视图导出的表。视图是一个虚表,数据库不对视图所对应的数据进行实际存储,只存储视图的定义,对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图
为什么oracle需要视图;
&
Mockito(一) --入门篇
bijian1013
持续集成 mockito 单元测试
Mockito是一个针对Java的mocking框架,它与EasyMock和jMock很相似,但是通过在执行后校验什么已经被调用,它消除了对期望 行为(expectations)的需要。其它的mocking库需要你在执行前记录期望行为(expectations),而这导致了丑陋的初始化代码。
&nb
精通Oracle10编程SQL(5)SQL函数
bijian1013
oracle 数据库 plsql
/*
* SQL函数
*/
--数字函数
--ABS(n):返回数字n的绝对值
declare
v_abs number(6,2);
begin
v_abs:=abs(&no);
dbms_output.put_line('绝对值:'||v_abs);
end;
--ACOS(n):返回数字n的反余弦值,输入值的范围是-1~1,输出值的单位为弧度
【Log4j一】Log4j总体介绍
bit1129
log4j
Log4j组件:Logger、Appender、Layout
Log4j核心包含三个组件:logger、appender和layout。这三个组件协作提供日志功能:
日志的输出目标
日志的输出格式
日志的输出级别(是否抑制日志的输出)
logger继承特性
A logger is said to be an ancestor of anothe
Java IO笔记
白糖_
java
public static void main(String[] args) throws IOException {
//输入流
InputStream in = Test.class.getResourceAsStream("/test");
InputStreamReader isr = new InputStreamReader(in);
Bu
Docker 监控
ronin47
docker监控
目前项目内部署了docker,于是涉及到关于监控的事情,参考一些经典实例以及一些自己的想法,总结一下思路。 1、关于监控的内容 监控宿主机本身
监控宿主机本身还是比较简单的,同其他服务器监控类似,对cpu、network、io、disk等做通用的检查,这里不再细说。
额外的,因为是docker的
java-顺时针打印图形
bylijinnan
java
一个画图程序 要求打印出:
1.int i=5;
2.1 2 3 4 5
3.16 17 18 19 6
4.15 24 25 20 7
5.14 23 22 21 8
6.13 12 11 10 9
7.
8.int i=6
9.1 2 3 4 5 6
10.20 21 22 23 24 7
11.19
关于iReport汉化版强制使用英文的配置方法
Kai_Ge
iReport汉化 英文版
对于那些具有强迫症的工程师来说,软件汉化固然好用,但是汉化不完整却极为头疼,本方法针对iReport汉化不完整的情况,强制使用英文版,方法如下:
在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数,即可变为英文版。
# ${HOME} will be replaced by user home directory accordin
[并行计算]论宇宙的可计算性
comsci
并行计算
现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识......
那么,这种概念让我们推论出一个结论
&nb
用OpenGL实现无限循环的coverflow
dai_lm
android coverflow
网上找了很久,都是用Gallery实现的,效果不是很满意,结果发现这个用OpenGL实现的,稍微修改了一下源码,实现了无限循环功能
源码地址:
https://github.com/jackfengji/glcoverflow
public class CoverFlowOpenGL extends GLSurfaceView implements
GLSurfaceV
JAVA数据计算的几个解决方案1
datamachine
java Hibernate 计算
老大丢过来的软件跑了10天,摸到点门道,正好跟以前攒的私房有关联,整理存档。
-----------------------------华丽的分割线-------------------------------------
数据计算层是指介于数据存储和应用程序之间,负责计算数据存储层的数据,并将计算结果返回应用程序的层次。J
&nbs
简单的用户授权系统,利用给user表添加一个字段标识管理员的方式
dcj3sjt126com
yii
怎么创建一个简单的(非 RBAC)用户授权系统
通过查看论坛,我发现这是一个常见的问题,所以我决定写这篇文章。
本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。 数据库
首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限 扩展 CWebUser 类
在配置文件(一般为 protecte
未选之路
dcj3sjt126com
诗
作者:罗伯特*费罗斯特
黄色的树林里分出两条路,
可惜我不能同时去涉足,
我在那路口久久伫立,
我向着一条路极目望去,
直到它消失在丛林深处.
但我却选了另外一条路,
它荒草萋萋,十分幽寂;
显得更诱人,更美丽,
虽然在这两条小路上,
都很少留下旅人的足迹.
那天清晨落叶满地,
两条路都未见脚印痕迹.
呵,留下一条路等改日再
Java处理15位身份证变18位
蕃薯耀
18位身份证变15位 15位身份证变18位 身份证转换
15位身份证变18位,18位身份证变15位
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 201
SpringMVC4零配置--应用上下文配置【AppConfig】
hanqunfeng
springmvc4
从spring3.0开始,Spring将JavaConfig整合到核心模块,普通的POJO只需要标注@Configuration注解,就可以成为spring配置类,并通过在方法上标注@Bean注解的方式注入bean。
Xml配置和Java类配置对比如下:
applicationContext-AppConfig.xml
<!-- 激活自动代理功能 参看:
Android中webview跟JAVASCRIPT中的交互
jackyrong
JavaScript html android 脚本
在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面举例说明之:
1 JAVASCRIPT脚本调用android程序
要在webview中,调用addJavascriptInterface(OBJ,int
8个最佳Web开发资源推荐
lampcy
编程 Web 程序员
Web开发对程序员来说是一项较为复杂的工作,程序员需要快速地满足用户需求。如今很多的在线资源可以给程序员提供帮助,比如指导手册、在线课程和一些参考资料,而且这些资源基本都是免费和适合初学者的。无论你是需要选择一门新的编程语言,或是了解最新的标准,还是需要从其他地方找到一些灵感,我们这里为你整理了一些很好的Web开发资源,帮助你更成功地进行Web开发。
这里列出10个最佳Web开发资源,它们都是受
架构师之面试------jdk的hashMap实现
nannan408
HashMap
1.前言。
如题。
2.详述。
(1)hashMap算法就是数组链表。数组存放的元素是键值对。jdk通过移位算法(其实也就是简单的加乘算法),如下代码来生成数组下标(生成后indexFor一下就成下标了)。
static int hash(int h)
{
h ^= (h >>> 20) ^ (h >>>
html禁止清除input文本输入缓存
Rainbow702
html 缓存 input 输入框 change
多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录。
如果不想让浏览器缓存input的值,有2种方法:
方法一: 在不想使用缓存的input中添加 autocomplete="off";
<input type="text" autocomplete="off" n
POJO和JavaBean的区别和联系
tjmljw
POJO java beans
POJO 和JavaBean是我们常见的两个关键字,一般容易混淆,POJO全称是Plain Ordinary Java Object / Pure Old Java Object,中文可以翻译成:普通Java类,具有一部分getter/setter方法的那种类就可以称作POJO,但是JavaBean则比 POJO复杂很多, Java Bean 是可复用的组件,对 Java Bean 并没有严格的规
java中单例的五种写法
liuxiaoling
java 单例
/**
* 单例模式的五种写法:
* 1、懒汉
* 2、恶汉
* 3、静态内部类
* 4、枚举
* 5、双重校验锁
*/
/**
* 五、 双重校验锁,在当前的内存模型中无效
*/
class LockSingleton
{
private volatile static LockSingleton singleton;
pri