11月23日
JQuery2.x版本:production jQuery2.1.4(优化压缩后的版本,主要用于部署网站时使用)
:Development JQuery2.1.4(未压缩版本,一般网站建设使用)
:map file for JQuery 2.1.4(一般用于增强调试,不需要下载)
test01.html
$表示当前使用的是jQuery对象来操纵网页,在<script>区域中,$(document).reday是jQuery的页面加载事件,这事件是传统的window.load事件替代方法,当DOM载入就绪时,就会执行括号定义的代码。
加载的事件说明:使用jQuery的选择器选择div元素,使用函数css更改div字体;
为页面上的div元素添加click事件,当点击div时候会弹出消息框。
向HTML页面添加一个新的div元素,并关联click事件。
12月1日
jQuery选择器:
1.基本选择器:id选择器(如 $(“#divId”)) id为divId的元素
标签名称选择器(如 $(“a”)) <a>标签
CSS样式类选择器 (如 $(“.bgRed”))
多个放在一起用”,”分隔开即可。
扩展
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
12月5日
2.层次选择器:层次关系的选择规则
ancestor descendant后代选择器(常用) |
$(".bgRed div")选择CSS类为bgRed的元素所有<div> |
parent>child父类选择器 |
$(".myList>li")选择myLis类的直接子节点<li>对象 |
prev+next相邻选择器 |
$("#hibiscus+img")选择id为hibiscus后面同级别的img对象 |
prev~slibings 平级选择器 |
$("#someDiv~[title]")选择id为someDiv的对象后面的所有带有title的元素 |
3.过滤选择器:
Event 函数 |
绑定函数至 |
$(document).ready(function) |
将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
4.jQuery事件:
jQuery 隐藏方法hide()、show()展示方法 和toggle()切换方法
1.只能运用在id或class中
2.可设置时延
3.hide()和show()为单独方法,toggle()为前两者的综合
操作DOM:Document Object model(文档对象模型)
12月6日
动态创建内容:$(html)动态创建一个DOM对象
方法:append():在被选元素的结尾插入内容。
prepend():在被选元素的开头插入内容。
after():在被选元素之后插入内容。
before():在被选元素之前插入内容。
语法:$(“#idAppend”).click(
function(){
//追加内容
$(“#idcontent”).append(“<b>使用append添加元素</b><br/>”);
}
);
$(“#idappendTo”).click(
Function(){
//追加内容,语法与append颠倒
$(“<b>使用appendto添加元素</b></br>”).appendTo(“#idcontent”);
}
);
动态删除节点:
remove()方法:用来删除指定的DOM元素,它会将节点从DOM元素树中移除。但会返回一个指向DOM元素的引用,并不是真正的将jQuery引用的元素对象删除,可以继续通过这个引用来操作元素。
empty()方法:不会删除节点,只是清空节点中的内容,DOM元素依然保持在DOM元素树中。
12月8日
jQuery事件处理:
页面初始化语法:
$(document).ready(function(){
//页面加载事件的代码
});
注意:为了能正确使用ready事件,必须确保<body>标签中没有定义onload事件,否则不会触发ready事件。而且onload事件必须要等到所有元素下载完成后才会执行,这会影响执行的效率。
简介的语法:
$().ready(function) 或者直接写成 $(function)
切换事件:
hover方法:元素在鼠标悬停与鼠标移除的事件中进行切换。
hover方法的语法:hover([over],out)
toggle方法:可以依次调用多个制定的函数,直到最后一个函数,接着重复对这些函数轮流进行调用。
toggle语法:$(selector).toggle(function(),function(),function())
jQuery插件
https://plugins.jquery.com/ 下载jquery插件。
开发自己的插件。
插件方法分为两类:
1.对象级别的插件开发:指在jQuery的选择器对象上添加对象方法,值有存在一个jQuery对象的实例时,才能调用该插件。比如confirmOn插件,可以看作一个对象级别的插件。
2.类级别的插件开发:指在类级别添加静态方法,并且可以将函数置于jQuery的命名空间中,比如经典的$.ajax()、$.trim()等就是类级别插件。
开发插件注意事项:
$.fn.extend表示要创建一个对象级别的插件。
12月14日:
关于ExtJS、JQuery UI和easy UI的选择问题
首先根据你的需求,你需要这些框架具有你需要的UI组件,ExtJS、easy ui都具备你需要用到的那几款ui组件,比如messagebox、tree、grid。相比较jQuery UI的ui组件不够全面,比如grid,但是jquery有很多各种插件,包括grid,但它不在jQuery UI内。而Ext JS和easy ui最新版提供的GRID都有20种以上实现不同功能grid。
轻重比较,说ExtJS比较大,jquery较小,那只是浅显的理解。首先ExtJS是一个完整的Framework,是重量级别的,easy ui 是基于jquery库的一套UI组件库,是轻量级的,ExtJS是应用application级的,而jquery是page页面级的。当然application也是由page组成的,那就需要你自己去完成了,考虑你的需求,和使用框架的初衷,选择使用哪一种。同时ExtJs由于是重量级框架,完全面向对象风格,提供API非常完备也非常庞大,所以学习成本也想相对较大。
兼容性ExtJS兼容IE全系列浏览器和其他非IE现代浏览器,jquery UI向来不太考虑ie低版本浏览器的兼容,从态度上的鄙视。easy UI是基于jquery的,jquery2.X以上的版本不再支持IE6、7、8,,已郑重声明,请看官方网站,easyUI最新版本1.3.3使用jQuery2.0,由于又很多HTML5特性,不再支持IE678,低版本由一些小部分的兼容不够好,请自己做技术选型的时候去测试,你要使用那个版本。在兼容问题上,他们都有瑕疵,看你的接收程度。
使用许可license. EXTJS 2.1以上版本,商用需要购买商业授权,jquery UI 使用MIT协议,开源。 jquery easyUI如果商用需遵循license commercial商业许可,也就是要购买使用权.