即类选择器
element (String) : 一个用于搜索的元素。 直接查找元素标签
匹配所有元素
多用于结合上下文来搜索。
2.简单
:first 示例 $("tr:first")
:last 示例 $("tr:first")
$("tr:even").css("background-color","blue");
制作这种表格的跨行颜色显示是非常方便的。
3.包装集
通过利用JQuery的包装集就能够实现类似于操作JS的数组一样的功能
数组的话就能够有$('a').size() 大小之说了！
4.添加元素到包装集
add 添加
end 删除
5.扩充的选择器内容
$('img[alt]').add('img[title]') 相当于实现了一种或运算即可以是
![]()
$("#output").append() 表示给元素追加新内容进来！
第三章节
能够顺利拿到一个选择器之后应该如何去操作元素呢？问题出来了！
3.1 操作元素的属性和特性
each()
有点类似于PHP里面的FOREACH方法遍历一个包装集的东西。分别给赋相关的操作方法。
$(document).ready(function(){
$("img").each(function(){
this.alt="this is a pic";
})
})
理解：
即应用于每一个IMG标签得到的是一个数组出来然后遍历此数组分别应用这个方法给每个元素
而且这里面的this表示的是正是引用当前对象。
attr()
相当于JS里面的getAttribute() setAttribute()的两个方法包装。
这个方法的实现不同有点类似于JAVA里面的方法重载的概念了。传不同的参数进来可以实现不同的功能而已！
$("*").attr("title",function(index){
return 'I am element '+index+' and my name is '+(this.id?this.id:'unset');
})
利用了KEY-VALUE的方式处理。将属性值赋给这个键上面的。
重载的话还有第三种变体：即一次赋多个属性过去
$("input").attr(
{
value:'this',title:'please enter a value'
}
);
能够一次性赋多个属性值进来的。非常方便！
定义了方法的重载就是方便呀！
删除属性 从DOM元素里面将元素的属性值删除掉可以使用removeAttr()
3.2 修改元素样式
通过动态添加或删除CSS类。这样的话就能够动态修改元素的样式属性。从而能够做到动态修改元素的显示样式出来！
添加类名称进来。
$("p").addClass("selected highlight"); 给那些符合条件的元素进行动态添加类名称进来
这样的结果就成了：
hell
如果我想做换肤的功能其实是非常简单的。我可以在客户端定义几套CSS样式出来
当点击的时候能够给不同的元素换CSS类。这样的话其实不是很方便。
最好是定义几套 重新加载进来即可。
当然也可以减少类的。即removeClass 表示移除掉一个类名称。
也可以实现类似于来回的功能即如果没有则表示添加如果有了则表示删除
toggleClass 的功能就是实现这样的操作！
实现所谓的斑马线效果是比较好的。
function swap() {
$("tr").toggleClass("strip");
}
这就是我为什么前面一直在强调使用元素选择器的重大作用了。你看这里面如果有了选择器了那就非常方便我操作
这个元素的一些方法了。比如说我要添加一个新的CLASS类进来等。
其中strip表示的是CSS类名称
chapter3-1.html 展现了如何动态地显示DIV的宽与高度值。
3.2.3 确定相关元素是否拥有的特定类即比如某个元素是否有某个CSS类的。
hasClass("类名")
3.3 设置元素内容
替换HTML或文本内容
html()
html(text)
相当于实现了innerHTML 功能一样了。
alert($("#test").html()); 相当于是获取这个HTML元素里面的内容文本值
$("#test").html("test11"); 相当于是设置值给这个HTML元素里面去。
$("#test").append("test11"); 表示内容的追加操作。
移动元素的操作
$("div.wraps").after("
replacing
").remove();
表示找到
的元素然后通过后面的元素将其替换掉。
复制元素：取到当前的DOM元素然后复制 到DOM树的其他部分中去。
克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
--------------------------------------------------------------------------------
Clone matched DOM Elements and select the clones.
This is useful for moving copies of the elements to another location in the DOM.
克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
$("b").clone().prependTo("p.hell")
第一步：复制得到副本
第二步：将此副本追加到这个后面的标签元素中去。
第四章节
定义事件。
4.1.1 DOM的第0级事件
$(function(){
$("#pic")[0].onmouseover = function(event) {
say("haha");
}
});
在DOM树加载成功之后就将事件赋值。因为$("#pic")得到的将是一个数组所以需要取数组里面的值
然后给其赋上事件。而此事件是要以事件为参数进行的。
事件冒泡
当触发DOM树的时候浏览器会检查那个元素上是否已经创建了相应的事件处理方法的。如果有则调用此方法来解决
如果没有则就会往上找直到到DOM树的根元素为止。这就称为冒泡事件处理。一直往上走直至到最上层为止。
检测的代码如下：
$(function(){
$("*").each(function(){ //遍历全部的元素标签* 表示全部的标签元素
var current = this; //遍历之后依次套上这个事件进来 得到当前的事件句柄
this.onclick=function(event){ //赋上事件即当前的事件用此方法来进行处理
if(!event) event = window.event;
var target = (event.target)?event.target:event.srcElement;
say('for'+current.tagName+"#"+current.id+' target is'+target.id);
}
})
});
此示例说明了一点：
事件首先传递到目标元素、然后会依次传递到各祖先元素。直到元素为止。
即这样来解释所谓的冒泡原理是比较容易理解的。
遇到了一个问题就是一个元素一次只能注册一个事件。这样如果我一个元素有两个事件或更多个事件需要
进行注册的时候就会遇到问题了。
someElement.onclick=doFirstThing;
someElement.onclick=doSecondThing;
一个元素注册了两个一样的事件就不知道要调用哪个事件进行处理了。
可以通过建立事件的监听器实现事件的绑定处理。addEventListener()添加事件监听器的功能。
addEventLister(eventType,lister,useCapture)
添加了一个事件监听器进来。其中第三个参数是一个布尔类型值。
var element = $("#pic")[0]; //能够得到元素句柄出来！
element.addEventListener('click',function(event){
say('one');
},false); //开始绑定事件
element.addEventListener('click',function(event){
say('two');
},false);
element.addEventListener('click',function(event){
say('three');
},false);
只能运行在非IE的浏览器上面的。像FF上是正常访问到的。
我们可以把DOM树想像成是一棵倒立的树即树根在上面而我们所想要的目标是在下面
那从上面往下走我们可以将其称为是捕获阶段。而反过来就是冒泡处理了。
这里面的第三个参数就有用到了如果是false表示的是冒泡
如果反之则表示的是捕获过程。来看看IE的事件模型吧。简直是唱反调了
attachEvent(eventName,handler)
其中的eventName 跟我们上面的不一样而是用onclick的形式出来。
我们来看一下JQuery是如何去隐藏这样的浏览器的不兼容性操作的。
4.2 JQuery事件模型
4.2.1 利用JQuery绑定事件处理程序
方法bind命令能够进行绑定事件操作！
$("img").bind('click',function(event){
alert("hello");
})
通过关键字bind进行事件的绑定操作。即绑定click事件让这个函数去实现其实现！
$("img").one('click',function(event){
alert("hello");
});
第一次能够弹出效果出来的。
$('#pic').toggle(
function(event){
$(event.target).css('opacity',0.4);
},function(event){
$(event.target).css('opacity',1.0);
}
)
方法toggle的作用：两个方法作为其参数。奇数次触发调用第一个方法体偶数次触发调用第二个参数
而且要明白event这个参数值的作用。其属性target表示当前是哪个对象被触发。相当于是this指针
表示当前被触发的对象修改其CSS样式值。
类似的工具像hover的使用就表示当鼠标移入与移出的触发函数代码。
第六章节
介绍了常用的工具函数进来。
1、解决不同浏览器之间的不兼容性问题
$.browser
msie 表示的是IE
mozilla
safari
opera
version
$(function(){
if($.browser.msie){
alert("this is ie");
}else{
alert("this is ie2");
}
})
检测当前客户浏览器的类型。
2、$.noConflict();
这个函数的作用是应用于JQuery将$运算符的功能去掉。即以下面的JQuery就不能直接使用$操作了。
不过可以另其指定如：
var $f = jQuery()
3、$.trim(value)
相当于JS里面的trim
4、对属性与集合进行迭代
如果是在JAVA的话是用for如果在Python则是用for in
for ele in elements:
print ele
$a = array('a','b');
JS的对象表示为JSON的形式！
var jsonObject = {one:1,two:2};
数组形式 [integer,string,object,object]
[1,true,false,{name:'a',age:"2"}],
var a = {binging:]}
采用$.each() 的工具作遍历之用！
也有点类似于foreach()操作的。
JAVA里面也有一迭代器进行遍历容器工具！
$.each(container,callback)
container:一个数组，或一个对象 即一个容器
callback: 一个回调函数，为容器的各个元素而被调用。如果容器是数组，则为数组的每个元素所调用。
如果容器是对象，则为对象的每个属性调用回调函数。
返回：容器对象
回调函数包含了两个参数。一个是数组元素的下标或对象属性的名称
第二个参数是对应的数组元素或对象属性的值。
var anObject = {one:1,two:2}
表示的是one这个对象的属性值为1
var anArray = ['one','two','three'];
$.each(anArray,function(n,value){
alert(n+' '+value);
});
遍历这个数组出来。其下标是从0开始的。依次弹出显示为0 one 1 two 2 three
function(n,value) 前一个参数表示的是数组的下标值而value则表示的当前数组的元素值。
var anObject = {one:1,two:2,three:3};
$.each(anObject,function(n,value){
alert(n+''+value);
})
依次弹出对象的属性与值的关系。
3、对数组的筛选。
遍历一个数组匹配出来符合条件的值然后进行筛选。
$.grep() 利用正则表达式进行筛选择出来相关的数据。
这个跟UNIX中的grep功能是一样的。
语法如下：
$.grep(array,callback,invert)
array:被遍历的数组。检查数组的各元素，决定是否收集到新数组。原始数组不会被该操作以任何方式修改。
callback:函数｜字符串 一个回调函数。它的返回值决定是否收集当前元素。
invert:如果指定为true 则反转函数的正常操作。
返回：被收集的元素所构成的数组
var allNum = [12,34,56,78,90,456,567];
var bigNums = $.grep(allNum,function(value){
return value>100;
}); //返回符合条件的数组
$.each(bigNums,function(n,value){
alert(n+' '+value);
});
返回的一个新的数组。
其中的函数就能够定义好一个符合规则 的正则进来。
4、对数组进行转换
把一组值转换为另一组值。
jQuery.map(array,callback)
将一个数组中的元素转换到另一个数组中。
作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。
--------------------------------------------------------------------------------
Translate all items in an array to another array of items.
The translation function that is provided to this method is called for each item in the array and is passed one argument: The item to be translated. The function can then return the translated value, 'null' (to remove the item), or an array of values - which will be flattened into the full array.
$.map( [0,1,2], function(n){
return n + 4;
});
其中的回调函数的参数表示的是当前传入进来的元素值。
这里面就是所传入的0 1 2这三个数值了。
5、inArray(value,array)
value 要找的那个目标值
array 将被搜索的数组
返回这个值在搜索的数组里面第一次被搜索到的下标位置值。如果没有找到的话就返回-1
7、jQuery.extend(target,obj1,[objN])
还可以借助这个内库实现继承操作的。
返回就是扩展之后的对象值。
8、实现动态加载脚本的功能
$.getScript()实现动态加载新脚本到页面的功能。
语法：$.getScript(url,callback)
向指定的URL发起GET 请求获取指定URL参数所指定的脚本进来。成功之后调用回调函数callback
当然这个值是可选的。
$('#loadButton').click(function(){
$.getScript('new.js');
});
$("#ins").click(function(){
sF(s);
})
可以动态加载进来一段JS进来的。然后加载进来之后就能够使用这个JS里面的数据与方法了。
如果是用传统的方法的话好像是要发起一个请求到服务端吧。XHR的方式进行处理的。
阅读(1600) | 评论(2) | 转发(0) |
