一:Ext操作Dom
可以通过Id获取Ext.Element对象
var aaa = Ext.get("input"); //input为id
var bbb =Ext.fly("input"); //只操作一次建议用这个
可以通过下面方式把Ext.Element对象转换成dom对象
var pp = Ext.get('div1');//有一个div其id为div1
var ppdd = Ext.getDom('div1');
var ppdd1=Ext.getDom(pp);
var ppdd2 = Ext.getDom(pp.dom);
var ppdd3 = document.getElementById('div1');
上面除pp对象外其他的其实都是相同的对象,你用==判断得到的都是true
2. 直接通过Ext.query()方法获得dom
var div = Ext.query("div"); //获取页面所有的div元素,相当于
var divdd = document.getElementsByTagName("div");
var p = Ext.query("p","pid"); //获得p标签中id为pid的
var cdiv = Ext.query(".div");//获取class为div的
var bb = Ext.query("#div1");//获取id为div1的
var a = Ext.query("div div");//获得最外层div下的所有第一个子div
var aa = Ext.query("div div div");//没有这种
var b = Ext.query("[class^=idiv]");//class是一idiv开头的
var c = Ext.query("[id*=idiv]");//id包含idiv的
var d = Ext.query("[id$=v]");//id以v结尾的
上面如果有匹配的换回的都是数组形式的,没有则为null,
操作dom,加样式等
Ext.fly('elId').addClass('elCss'); //还可删除,替换样式类
Ext.fly('elId').setStyle({
color: 'red',
background: 'yellow',
font-weight: 'bold'
}) //还可以获得属性
还有很多
var rc =Ext.query("*{color=red}"); // 所有color为red的标签
var rc2 =Ext.query("span:first-child"); // span标签的第一个子节点
var rc3 =Ext.query("a:last-child"); //得到a标签
var rc4 =Ext.query("span:nth-child(2)"); // [span.bar]
var rc5 =Ext.query("tr:nth-child(odd)"); // tr的奇数标签
var rc6 =Ext.query("li:nth-child(even)"); //tr的偶数标签
var rc7 =Ext.query("a:only-child"); // 最后一个a
var rc8 =Ext.query("input:checked"); // 选择的input
var rc9 =Ext.query("tr:first"); // 第一个tr
var rc12 =Ext.query("input:last"); // 最后一个input
var rc13 =Ext.query("td:nth(2)"); // 第二个td
var rc14 =Ext.query("div:contains(within)"); // 被div包围的
var rc15 =Ext.query("div:not(form)");// 没有在form内的
var rc16 =Ext.query("div:has(a)"); // 包含a的div
var rc22 =Ext.query("td:next(td)"); // td的下一个td
var rc23 =Ext.query("label:prev(input)"); //input前的lael
二:Jquery操作dom
基础:
可以通过Id,Element,class这些获得。例如:
$("#id") $("div") $(".class")
层次:
ancestor>descendant
$("form input") //form里的所有input
parent>child
在给定的父元素下匹配所有的子元素
//不包括第二代子节点
prev+next
匹配所有紧接在 prev 元素后的 next 元素
匹配 prev 元素之后的所有 siblings 元素
简单:
not
去除所有与给定选择器匹配的元素 $("input:not(:checked)")
even
匹配所有索引值为偶数的元素,从 0 开始计数
$("tr:even")
odd
匹配所有索引值为奇数的元素,从 0 开始计数
$("tr:odd")
eq
匹配一个给定索引值的元素
$("tr:eq(1)")
gt
匹配所有大于给定索引值的元素
$("tr:gt(0)")
lt
匹配所有小于给定索引值的元素
$("tr:lt(2)")
header
匹配如 h1, h2, h3之类的标题元素 $(":header")
animated
匹配所有正在执行动画效果的元素 $("div:not(:animated)")
内容
contains(text) 匹配包含给定文本的元素 $("div:contains('John')")
empty
匹配所有不包含子元素或者文本的空元素 $("td:empty")
has(a)
匹配含有选择器所匹配的元素的元素 $("div:has(p)")
prarent()
匹配含有子元素或者文本的元素 $("td:parent")
可见性
hidden
匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到
$("tr:hidden")
visiable
匹配所有的可见元素
$("tr:visible")
属性:[attribute]
attribute (String) : 属性名
[attribute=value]
查找所有 name 属性是 newsletter 的 input 元素 $("input[name='newsletter']")
[attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素
[attribute*=value]匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用 $("input[id][name$='man']")
子元素
:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素$("ul li:nth-child(2)") //在每个 ul 查找第 2 个li
:first-child 匹配第一个子元素
':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
:last-child 匹配最后一个子元素
':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
$("ul li:last-child") //在每个 ul 中查找最后一个 li
:only-child如果某个元素是父元素中唯一的子元素,那将会被匹配如果父元素中含有其他元素,那将不会被匹配
例:$("ul li:only-child")
表单
:input
:text 匹配所有的单行文本框 $(":text")
:password 匹配所有密码框
:radio 匹配所有单选按钮 $(":radio")
:checkbox 匹配所有复选框 $(":checkbox")
:submit 匹配所有提交按钮 $(":submit")
:image 匹配所有图像域 $(":image")
:reset 匹配所有重置按钮 $(":reset")
:button 匹配所有按钮 $(":button")
:file 匹配所有文件域 $(":file")
:hidden 匹配所有不可见元素,或者type为hidden的元素 $("tr:hidden")
表单属性
:enabled 匹配所有可用元素 $("input:enabled")
:disabled 匹配所有不可用元素 $("input:disabled")
:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option) $("input:checked")
:selected 匹配所有选中的option元素 $("select option:selected")
分享到:
相关推荐
教程文件 jQuery是一个了不起的轻量级的JavaScript框架,事实上在jQuery发布之前,就已经有无数功能强大得多的JavaScript框架在流行。jQuery的口号是“write less, do more”。(选择器,dom操作,jquery-ajax)
记得最早刚接触网页操作DOM元素的时候是做毕业设计的时候,用JQuery操作的。毕业工作后是从事C++方面的编程,两年后,又重新解决了网页编程,不过这次不是用JQuery了,用的是ExtJS。就我经验来看,程序员是一个需要...
ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建RIA...2) 面向组化件开发,区别于jQuery的面向Dom开发。 3) 跨浏览器支持:IE、Chrome、Firefox、Safari、Opera。 4) 框架体积庞大,适合编写内网项目。
Safari 2 3575ms 475ms 753% Opera 9.1 3196ms 326ms 980% Average improvement: 867% <br>下表为jQuery1.1.3与常用的一些JS库选择器的对比: Browser Prototype jQuery Mootools Ext Dojo ...
XMLHTTP 手册.CHM 正则表达式系统教程.CHM ...prototype.chm XMLDOM对象手册.chm DHTML默认行为手册.chm 设计模式手册.chm DOM文档对象模型手册.chm SQL参考手册.chm 网页设计配色常识.chm ...Jquery1.2.6源码分析.pdf
一、使用标签tpl和操作符for 33 二、在子模板的范围内访问父元素对象 34 三、数组元素索引和简单运算支持 34 四、自动渲染单根数组 35 五、条件逻辑判断 36 六、即时执行任意的代码 36 七、模板成员函数 37 lipan 38...
语法一: 代码如下:.nextUntil(selector,filter)语法二: 代码如下:.nextUntil(element,filter)详细说明如果给定一个表示 DOM 元素集合的 jQuery 对象,.nextUntil() 方法允许我们搜索 DOM 树中的元素跟随
此属性可以返回传给jQuery()的原始DOM节点内容,即jQuery()方法的第二个参数值。 如果jQuery()方法没有指定此参数,那么context指向当前文档(document)。 语法结构: 代码如下:$(“selector”).context 实例代码: ...
其短小精悍,使用简单方便,性能高效,能极大地提高开发效率,是开发Web应用的最佳... 在调试基于jQuery的程序时,我们大部分时间都要跟踪进入jQuery对象分析其运行的状态,但是jQuery代码不像Ext,YUI那样中规中举,它
想要利用ExtJS的库函数对DOM进行各类操作,就要得到Element类型的对象,但是Ext.get()取到的虽然是Element,但是参数只能是id,如果大家对jQuery的selector方式很喜欢和崇拜,那么就一定要学习Ext.get()和Ext.query...
DOM文档对象中文手册,Ext2.2API中文版(最终完成版),FreeMarker 2.3.18 API,Hibernate中文API,JAVA API官方文档中文版,JavaEE6 API 中文版,JavaScript中文使用手册js,jQuery 3.1 参考手册,JPA,jQuery ...
dom4j.chm DOM_help.chm DOM中文参考手册CHM·chm.chm DOM文档对象模型手册.chm DTD.chm EasyUI-API+1.3.2.chm Ext2.2API中文版.CHM Ext3.2中文API.CHM FILESLIST111.TXT Hibernate3.2.chm html5参考手册.chm HTML...
│ DOM中文参考手册CHM·chm.chm │ DOM文档对象模型手册.chm │ DTD.chm │ EasyUI-API+1.3.2.chm │ Ext2.2API中文版.CHM │ Ext3.2中文API.CHM │ Hibernate3.2.chm │ Hibernate3.2API.chm │ html5参考手册.chm...
jQuery AJAX框架-查询DOM对象,简洁,现成控件较少 ExtJS extjs.com 比较全面的AJAX框架 树,菜单,表格编辑器(Grid)学习比较困难 -->显示公告(页面内弹出窗口) 1. 导入CSS和EXT的JS 2. 写Ext.onRead 3. 写入功能...
web前端开发帮助文档,有css帮助文档,dom帮助文档,html的,还有javascript帮助文档。Ajax和Jquery和Ext的帮助文档。开发时不知道看看这些文档很不错的!整合了一下,免得下了这个又得去其他网站搜索下载其他的。
CSS,Ajax,Bootstrap,DOM文档对象,easyUI,EXT,HTML ,ionic,JavaScript,jQuery ,Node.js,Sass ,Underscore,Vue.js ,Webpack ,XML 等等全套开发手册
与jQuery不同,该库扩展了功能并直接向DOM元素添加了新属性。 例子: A(“。选择器”)。Ext( {params: { str: 'test'},init: function() { this.on("click", function(e) { alert(this.params.str); });...
Javascript & jQuery &Ajax&JSON · jquery-1.7.2.js · jquery-1.7.2.min.js · jQuery插件 · EasyUI+v1.3.4官方API中文版 · EasyUI+v1.3.4官方API中文版.rar · jackson-src-1.7.1.zip · ext-3.0.0.zip...