javaScript基础知识
1、javascript对象:
内置对象;
BOM对象;
DOM对象;
1. 数学对象:
2、 字符串对象:
Match的使用方法,返回的是一个数组,使用 /home/g 正则表达式,g的意思是匹配所有,不加g的话就是只匹配到一个,返回的数组只有一个数据。
Search match和replace都可以使用正则匹配:
/正则表达式/ig 表示去匹配忽略大小写的所有字符串;
/正则表达式/g 表示去匹配所有的字符串。
Split也支持正则分割,但是正则表达式中要注意特殊符号的转化。
3、数组对象:
属性:length
slice(x,y):从索引x处截取到y处,但是y不取;
splice(x,y):从索引x处截取y个,数组中的元素直接被截取走,元素组被截取的元素现在已经没有了。
大小写的转换:
3、 正则表达式:
是
向
后
引
用
,
将
(
)
中
的
内
容
放
到
是向后引用,将()中的内容放到
是向后引用,将()中的内容放到中,1,2,3代表的是就是第几个(),在replace中用到。
4、 js的事件:
- 鼠标事件:
- 键盘事件:
5、 屏幕高度:
6、 表单事件:
7、 其他事件:
8、 网页加载的时机:
9、 定位:
10、事件方法:
11、阻止表单的默认行为:
- dom对象:
获取dom元素对象:
获取元素对象的方法:
- 元素对象的标准属性:
就是某些标签必备的属性:form的action、method或者其他的元素的属性。
- 非标准属性:
为了辅助标签完成某些功能,js中没有定义的,仅仅是自己定义为了完成某些功能自己添加的属性。
如何获取非标准属性:
1、 getAttribute(‘name’)//万能的方法
2、 setAttribute(‘name’,’jianglinsheng’);//万能的方法
- 元素对象js属性:
- 直接获取dom元素对象集合:
links:获取连接元素集合;
forms:获取表单元素集合;
anchors:获取锚点元素集合;
tableObj.rows:获取行号;
tableObj.cells:获取列号;
selecObj.options:获取下拉框中的选项。
- BOM全称:browers object model(浏览器对象模型)
bom浏览器对象:
1、window对象;
2、navigator浏览器特性;
3、screen屏幕对象;
4、history对象;
5、location地址栏;
6、document对象;- window对象:
window有很多重要的方法; - navigator浏览器特性:
属性:userAgent:获取不同浏览器的特性; - screen屏幕对象:
方法:
height:显示屏幕分辨率的高;
width:显示屏幕分辨率的宽;
availheight:显示屏幕分辨率的有效的高;
availwidth:显示屏幕分辨率的有效的宽; - history对象:
方法:
forward():网页向前跳转;
back():网页向后跳转;
go(1/-1):参数可以为正,也可以为负,向前或向后跳转; - location地址栏:
属性:
host:主机名/域名;
port:端口号;
location:浏览器中地址栏的信息;
还有许多属性; - document对象:
document对象比较复杂
Ext.componentQuery.query用法
- window对象:
12、选择器使用
在容器中查询query方法查询过程中,默认会遍历所有组件。显然这个是十分影响效率的,把搜索范围限定起来,能使查询速度大大提高。还记得query方法的第二个参数吗?我们这样做:
var btnRefresh = Ext.ComponentQuery.query('#btnRefresh', container);
另一种方式个人比较推荐,因为它看起来特别地干净利落:
var btnRefresh = container.query('#btnRefresh');
说到这里,就不能不提提Container类中用于查询组件的几个方法了。
Container中的query方法、down方法、child方法和up方法,都是基于组件选择器而实现的组件查询方法,调用这些方法,可以很轻松地获取想要的组件。
区别列举如下:
- query 后代组件 所有符合条件的组件集合
- down 后代组件 第一个符合条件的组件
- child 子组件 第一个符合条件的组件
- up 祖先组件 第一个符合条件的组件
-
ID选择器:
根据组件id或者itemid来选择,具有唯一性,前面加 # 号标记,返回panel实例:
var panel = Ext.componentQuery.query(’#id’); -
类别选择器:
根据组件的xtype选择,可选择前面是否有"."号来标记,比如:根据xtype返回所有的Ext.GridPanel的组件:
var panel = Ext.componentQuery.query(‘gridpanel’);
var panel = Ext.componentQuery.query('gridpanel#mypanel);
(panel#myPanel 可以通过xtype与id,itemId组件匹配 查找xtype为panel并且id或者itemId为myPanel的所有组件); -
属性选择器:
根据组件的属性来选择,可以选择具有某个属性的组件,或者属性为特定值的组件:
var btnpanel = Ext.ComponentQuery.query(‘button[iconCls]’); //返回具有iconCls属性的button组件
= Ext.componentQuery.query(‘component[autoScroll]’); //返回xtype为component且属性autoScroll不等于空的所有组件
= Ext.componentQuery.query(‘button[text=“ok”]’); //返回xtype为button且属性text="ok"的组件
= Ext.componentQuery.query(‘button[myAttribute=“attr”]’); //属性可以使任何自定义的组件 -
后代选择器也称为包含选择器,用来选择特定容器或特定容器组的后代,后代选择器有两个常用选择器,中间加一个空格表示。前面的选择父组件,后面的选择后代组件:
var panelwithfathercomponent = Ext.ComponentQuery.query(’#MyPanel form’); //返回所有id为MyPanel组件中xtype为form的组件(不是子组件)
E F All descendant Components of E that match F (官方说明-递归向下查询所有可以匹配的组件) -
子选择器:
请注意这个选择器与后代选择器的区别,子选择器(child selector)仅是指它的直接后代,而后代选择器是作用于所有子后代组件。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择,我们看下面的代码:
var directChildPanel = Ext.ComponentQuery.query(’#myCt > panel’); --返回所有id为“myCt”的容器的子组件中的Ext.Panel实例
E > F All direct children Components of E that match F (官方说明-查询直接后代,子孙后代则不匹配)
子组件和后代组件的差异:
Ext.create(“Ext.Panel”, {
itemId: “myCt”,
itmes:[{
xtype: “panel”,
html : “我是myCt的直接后代”,
itmes: [{
xtype: “panel”,
html : “我是myCt的子孙后代”,
}]
}]
}); -
向上选择:
E ^ F All parent Components of E that match F
Ext.ComponentQuery.query(‘textfield ^ form’) 查找给定元素 的父容器 (递归向上查找所有匹配元素) -
pseudo classes(伪类选择器)
:first //查询满足条件的第一个组件
:last //查询满足条件的最后一个组件
Ext.ComponentQuery.query(‘panel>button:first’);
:focusable
//返回可以获得焦点的组件
panel.down(’:focusable’).focus();
:not
//给定一个选择器,匹配相反的结果,返回所有field 但是xtype不是hiddenfield的组件
form.query(‘field:not(hiddenfield)’);
红色部分可以放任何选择器表达式 比如 title^=hello
:nth-child 查询奇数,偶数 每隔3个
// Find every odd field in a form
form.query(‘field:nth-child(2n+1)’); // or use shortcut: :nth-child(odd)
// Find every even field in a form
form.query(‘field:nth-child(2n)’); // or use shortcut: :nth-child(even)
// Find every 3rd field in a form
form.query(‘field:nth-child(3n)’); -
Attribute matching operators(属性匹配运算符)
Ext.ComponentQuery.query(‘panel[cls=my-cls]’); --精确匹配,匹配xtype为panel的元素,并且cls=‘my-cls’
会匹配如下组件:
Ext.create(‘Ext.window.Window’, {
cls: ‘my-cls’
})
但是不会匹配如下组件:
Ext.create(‘Ext.panel.Panel’, {
cls: ‘foo-cls my-cls bar-cls’
});
Ext.ComponentQuery.query(‘panel[cls~=my-cls]’); --匹配xtype为panel 并且cls=‘my-cls’ 或者 cls 包含 ‘my-cls’的所有组件
会匹配下列组件
Ext.create(‘Ext.panel.Panel’, {
cls: ‘foo-cls my-cls bar-cls’
});
Ext.create(‘Ext.window.Window’, {
cls: ‘my-cls’
});
Ext.ComponentQuery.query(‘panel[title^=Sales]’);–匹配xtype为panle 并且 title已Sales开头的组件
Ext.create(‘Ext.panel.Panel’, {
title: ‘Sales estimate for Q4’
});
Ext.ComponentQuery.query(‘field[fieldLabel$=name]’); ----匹配属性以给定值结尾的组件
Ext.create(‘Ext.form.field.Text’, {
fieldLabel: ‘Enter your name’
});
= 表达式会匹配属性中包含某个值 无论出现在什么地方都可以匹配
Ext.ComponentQuery.query('Ext.ComponentQuery.query('panel[fuck=NameIs])’);
var p = Ext.create(“Ext.panel.Panel”, {
mytest: “myNameIsJack”,
width: 300,
height: 200
});
@=表达式会匹配组件显示声明的属性,不会去查询原型链中的属性
The following test will find panels with their ownProperty collapsed being equal to false. It will not match a collapsed property from the prototype chain
Ext.ComponentQuery.query(‘panel[@collapsed=false]’)
会匹配如下组件
Ext.create(‘Ext.panel.Panel’, {
collapsed: false
});
不会匹配下面的情况,不会通过prototype-china链进行查找
Ext.create(‘Ext.panel.Panel’, {
});
var disabledFields = myFormPanel.query("{isDisabled()}"); --可以根据组件的方法进行查找,返回所有isDisabled()返回true的组件
有的时候我们需要自定义的逻辑进行匹配,那么我们可以再组件中定义我们自己的方法.如下:
Ext.ComponentQuery.query("{myMatcher(‘myPanel’)}");
但是需要注意必须在所有组件中声明该方法,不然会出现异常.所以我们可以override Ext.Component这个类,默认返回false.然后再子类重写该方法 如下:
复制代码
Ext.define(‘My.Component’, {
override: ‘Ext.Component’,
myMatcher: function() { return false; }
});
Ext.define(‘My.Panel’, {
extend: ‘Ext.panel.Panel’,
requires: [‘My.Component’], // Ensure that Component override is applied
myMatcher: function(selector) {
return selector === ‘myPanel’;
}
}); -
conditional matching(条件匹配)
匹配同时满足多个条件的匹配表达式
Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title = " s a l e s d a t a " ] ′ ) ; / / 匹 配 x t y p e 为 p a n e l 的 并 且 同 时 满 足 [ c l s = m y − c l s ] [ f l o a t i n g = t r u e ] [ t i t l e ="sales data"]'); //匹配xtype为panel的 并且同时满足[cls~=my-cls][floating=true][title ="salesdata"]′);//匹配xtype为panel的并且同时满足[cls =my−cls][floating=true][title=“sales data”]条件的所有组件
Expressions separated with commas will match any Component that satisfies either expression (logical OR operator):
匹配用逗号分隔的满足任意一个条件的组件
Ext.ComponentQuery.query(‘field[fieldLabel^=User], field[fieldLabel*=password]’);
//匹配俩种条件field[fieldLabel^=User], field[fieldLabel*=password] 其中的一种条件,或者的关系.只要满足其中一个就匹配得到