序言 准备 如何嵌入网页? 写在网页中 在链接上使用伪协议 使用独立的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,脚本语言)
element实现动态路由+面包屑
软件技术NINI
vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件,它用于显示当前页面的路径,帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中,如果你已经安装了ElementUI,就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例:安装ElementUI(如果你还没有安装的话):你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
C#中使用split分割字符串
互联网打工人no1
c#
1、用字符串分隔:usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果:aaabbbc
PHP环境搭建详细教程
好看资源平台
前端 php
PHP是一个流行的服务器端脚本语言,广泛用于Web开发。为了使PHP能够在本地或服务器上运行,我们需要搭建一个合适的PHP环境。本教程将结合最新资料,介绍在不同操作系统上搭建PHP开发环境的多种方法,包括Windows、macOS和Linux系统的安装步骤,以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类:集成开发环境:例如XAMPP、WAMP、MAMP,这
【华为OD机试真题2023B卷 JAVA&JS】We Are A Team
若博豆
java 算法 华为 javascript
华为OD2023(B卷)机试题库全覆盖,刷题指南点这里WeAreATeam时间限制:1秒|内存限制:32768K|语言限制:不限题目描述:总共有n个人在机房,每个人有一个标号(1<=标号<=n),他们分成了多个团队,需要你根据收到的m条消息判定指定的两个人是否在一个团队中,具体的:1、消息构成为:abc,整数a、b分别代
数组去重
好奇的猫猫猫
整理自js中基础数据结构数组去重问题思考?如何去除数组中重复的项例如数组:[1,3,4,3,5]我们在做去重的时候,一开始想到的肯定是,逐个比较,外面一层循环,内层后一个与前一个一比较,如果是久不将当前这一项放进新的数组,挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低,代码量还多,思考?有没有更好的方法这时候不禁一想当然有了!!!hashtable啊,通过对象的hash办法
【JS】执行时长(100分) |思路参考+代码解析(C++)
l939035548
JS 算法 数据结构 c++
题目为了充分发挥GPU算力,需要尽可能多的将任务交给GPU执行,现在有一个任务数组,数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务,一次执行耗时1秒,在保证GPU不空闲情况下,最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数,取值范围[1,10000]第二个参数为任务数组长度,取值范围[1,10000]第三个参数为任务数组,数字范围
node.js学习
小猿L
node.js node.js 学习 vim
node.js学习实操及笔记温故node.js,node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础,三大框架vuereactangular离不开node.jsnode.js是什么官网:node.js是一个开源的、跨平台的运行JavaScript的运行
docker
igotyback
eureka 云原生
Docker容器的文件系统是隔离的,但是可以通过挂载卷(Volumes)或绑定挂载(BindMounts)将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径,可以使用以下方法:查看容器配置:使用dockerinspect命令可以查看容器的详细配置信息,包括挂载的卷。例如:bashdockerinspect在输出的JSON格式中,查找"Mounts"部分,这里会列出所有的挂载信息
在Ubuntu中编译含有JSON的文件出现报错
芝麻糊76
Linux kill_bug linux ubuntu json
在ubuntu中进行JSON相关学习的时候,我发现了一些小问题,决定与大家进行分享,减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
Xinference如何注册自定义模型
玩人工智能的辣条哥
人工智能 AI 大模型 Xinference
环境:Xinference问题描述:Xinference如何注册自定义模型解决方案:1.写个model_config.json,内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
Python神器!WEB自动化测试集成工具 DrissionPage
亚丁号
python 开发语言
一、前言用requests做数据采集面对要登录的网站时,要分析数据包、JS源码,构造复杂的请求,往往还要应付验证码、JS混淆、签名参数等反爬手段,门槛较高。若数据是由JS计算生成的,还须重现计算过程,体验不好,开发效率不高。使用浏览器,可以很大程度上绕过这些坑,但浏览器运行效率不高。因此,这个库设计初衷,是将它们合而为一,能够在不同须要时切换相应模式,并提供一种人性化的使用方法,提高开发和运行效率
Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net
佛一脚
error react mongodb 数据库
背景每天都能遇到奇怪的问题,做个记录,以便有缘人能得到帮助!换了一台电脑开发nextjs程序。需要连接mongodb数据,对数据进行增删改查。上一台电脑好好的程序,新电脑死活连不上mongodb数据库。同一套代码,没任何修改,搞得我怀疑人生了,打开浏览器进入mongodb官网毫无问题,也能进入线上系统查看数据,网络应该是没问题。于是我尝试了一下手机热点,这次代码能正常跑起来,连接数据库了!!!是不
Vue( ElementUI入门、vue-cli安装)
m0_l5z
elementui vue.js
一.ElementUI入门目录:1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程
2401_85194651
java maven
首先就是技术框架:后端:Java+SpringBoot数据库:MySQL前端:Vue.js数据库连接:JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架(Java + Python)
有一只柴犬
爬虫系列 爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
vue 创建项目报错:command failed: npm install --loglevel error
那鱼、会飞
vue.js vue-cli3
这个问题其实很好解决,只是很多种情况,逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0,(永远不要尝试最新版本)node各种版本下载地址:以往的版本|Node.js(nodejs.org)vue/
[email protected] @vue/
[email protected] (注意vue/cli2和vue/cli3的下载命名有所改变,2是-形式,3是/形式)其实报错
更改npm镜像源为淘宝镜像
骆小骆
基于node.js
npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies(生产环境依赖)中,即你的package.json文件的dependencies字段中;–--save-dev、-D参数意思是把模块版本信息保存到devDependencies(开发环境依赖)中,即你的package.json文件的de
COCO 格式的数据集转化为 YOLO 格式的数据集
QYQY77
YOLO python
"""--json_path输入的json文件路径--save_path保存的文件夹名字,默认为当前目录下的labels。"""importosimportjsonfromtqdmimporttqdmimportargparseparser=argparse.ArgumentParser()parser.add_argument('--json_path',default='./instances
NPM私库搭建-verdaccio(Linux)
Beam007
npm linux 前端
1、安装nodelinux服务器安装nodea)、官网下载所需的node版本https://nodejs.org/dist/v14.21.0/b)、解压安装包若下载的是xxx.tar.xz文件,解压命令为tar-xvfxxx.tar.xzc)、修改环境变量修改:/etc/profile文件#SETPATHFORNODEJSexportNODE_HOME=NODEJS解压安装的路径exportPAT
前端代码上传文件
余生逆风飞翔
前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
golang获取用户输入的几种方式
余生逆风飞翔
golang 开发语言 后端
一、定义结构体typeUserInfostruct{Namestring`json:"name"`Ageint`json:"age"`Addstring`json:"add"`}typeReturnDatastruct{Messagestring`json:"message"`Statusstring`json:"status"`DataUserInfo`json:"data"`}二、get请求的
VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。
焚木灵
node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料:xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS):1、安装依赖:npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块,
spring mvc @RequestBody String类型参数
zoyation
spring-mvc spring mvc
通过如下配置:text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时,默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
Vue 项目运行时,报错 Error: Cannot find module ‘node:path‘
周bro
vue.js 前端 javascript node.js npm
node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本
[email protected] 执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
python中文版下载官网-Python下载 v3.8.3 官方中文版
weixin_37988176
Python中文版是一款非常专业的通用型计算机程序设计语言安装包,Python具有比其他语言更有特色语法结构,而且在设计上坚持了清晰划一的风格,使得它成为一门易读、易维护并且被大量用户所欢迎的、用途广泛的语言,随着版本的不断更新和语言新功能的添加,越来越多被用于独立的、大型项目的开发。Python中文版软件介绍Python中文版是一门跨平台的脚本语言,Python规定了一个Python语法规则,实
360前端星计划-动画可以这么玩
马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点:灵活度、可控性、性能
【vite 自动配置路由】
CODER-V
前端 javascript vue.js 前端 软件构建
手动配置路由,是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置,我们就需要遵循以下目录规则:每一个页面对应一个包,当前包下的主页面命名为index.vue;每个包里必须配置一个page.js;在每一个page.js里边配置,额外的路由信息,比如:exportdefault{title:'商品',men
探索Zebra4J:构建高效企业级Web应用的微服务框架
叶准鑫Natalie
探索Zebra4J:构建高效企业级Web应用的微服务框架ZebraZebra4J/Zebra4Js基于SpringBoot的JavaWeb/Nodejs框架项目地址:https://gitcode.com/gh_mirrors/zebra/Zebra项目介绍在当今快速发展的技术环境中,构建高效、可扩展的企业级Web应用是每个开发团队的追求。Zebra4J作为一款基于SpringBoot的全新微服务
学会这招!用python爬取微博评论(无重复数据)
Python白白白白
python爬取微博评论(无重复数据)前言一、整体思路二、获取微博地址1、获取ajax地址2、解析页面中的微博地址3、获取指定用户微博地址三、获取主评论四、获取子评论1、解析子评论2、获取子评论五、主函数调用1、导入相关库2、主函数执行3、结果写在最后Tip:本文仅供学习与交流,切勿用于非法用途!!!前言前段时间微博上关于某日记的评论出现了严重的两极分化,出于好奇的我想对其中的评论以及相关用户做一
【JS】前端文件读取FileReader操作总结
程序员-张师傅
前端 前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI,它允许web应用程序异步读取用户计算机上的文件(或原始数据缓冲区)的内容,例如读取文件以获取其内容,并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用,尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先,你需要创建一个Fi
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