2.JQuery:
一个基于js的轻量级框架。
3.UI:
即UserInterface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。
4.用Jquery优势:
用jQuery不需要在每个标签上写onclick事件,拥有一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像使用CSS追求的一样.
轻量级的JS库,兼容CSS3;
链式编程;
隐式迭代;
屏蔽浏览器差异,跨浏览器兼容性好;
插件丰富、开源、免费。
5.用法
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});加载所有a标签的点击事件。
选择器写法:
基本选择器:通过元素id,class和tagName来查找dom元素
1.$("#id") : id选择器,document.getElementById("id");
2.$("div") :元素选择器 document.getElementByTagName("div");
3.$(".myClass") : 类选择器,返回所有class="myClass"的元素
4.$("*") : 返回所有元素,多用于结合上下文搜索
5.$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素
层次选择器:
如果想通过DOM元素之间的层次关系来获取特定的元素,如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器
1.ancestor descendant
$("form input") : 获得后代所有子元素;
2.parent > child
$("form > input") : 只获得直属子元素;
3.prev + next
$("lable + input ") : 匹配所有紧接在prev后的next元素
4.prev ~ siblins
$("form ~ input") : 匹配prev元素之后的所有siblings元素 注意:在匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元 素,其后辈元素不被匹配。
ready方法,是当dom树 完全生成后才执行。
var $divs=$("div");获得所有div对象,并存储于divs中;
var div2=$divs.get(1);获得div标签中索引数为1的div对象;
filter()以过滤表达式来减少不符合的被选择项;
not()则用来取消所有符合过滤表达式的被选择项;
如果获取的是JQuery对象,要在变量前加上$:
eg:var $va=$(#div3);
…………
将一个dom元素对象,转成JQuery对象
eg: var div1=document.getElementById("div1");
var $div1=$(div1);
将JQuery对象,转换成dom元素对象
eg: var div2=$div1.get(0);
val()方法 获取对象的值;
eg: var $txtName=$("#txtName");
alert($txtName.val());
attr() 设置属性 或者读取属性
eg:$divs.attr("title","22222");
$divs.attr("title");
removeAttr()去除属性
next()方法用于获取节点之后的挨着的第一个兄弟元素,$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有兄弟元素,$(".menuitem").nextAll("div")
prev()、prevAll()兄弟中之前的元素。 siblings()方法用于获取所有同辈元素(前后都拿到),$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能 够使用的语法都和$()语法一样。
案例:选中的p变色 $(this).css();$(this).siblings().css()
案例:评分控件。prevAll,this,nextAll
重申问题,不要$().click=function;好多时候能.出来;不要在引用js的代码里再写代码。
$.map(array,fn):
用来将一个数组,转成另一个数组。
对数组array中每个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组。
例子:得到一个元素值是原数组值二倍的新数组
回调函数:自己定义,系统调用。(你赚的钱,由你老婆负责花—注:你自己不能花)
var arr = [3, 5, 9];
var arr2 = $.map(arr, function(item) { return item * 2; });//联想C#委托的例子。函数式编程。
$.map不能处理Dictionary风格的数组(jason)。
$.each(array,fn):
对数组arry每个元素调用fn函数进行处理,没有返回值。
var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };//json格式的对象(dict)
$.each(arr, function(key, value) { alert(key+"="+value); });
如果是普通风格的数组,则key的值是序号。
还可以省略function的参数,这时候用this可以得到遍历的当前元素:
var arr = [3, 6, 9];
$.each(arr, function() { alert(this); });
普通数组推荐用无参,用dict风格的就用key、value。
hover(over,out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测
eg: $("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
mouseover(fn) mouseover事件会在鼠标移入对象时触发。
mouseout(fn) mouseout事件在鼠标从元素上离开后会触发。
mouseup(fn) mouseup事件会在鼠标点击对象释放时