欢迎来到天天文库
浏览记录
ID:33585049
大小:1.73 MB
页数:34页
时间:2019-02-27
《jquery入门教程2011》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、jQuery入门[1]-构造函数jQuery优点◦体积小(v1.2.315kb)◦丰富的DOM选择器(CSS1-3+XPath)◦跨浏览器(IE6,FF,Safari,Opera)◦链式代码◦强大的事件、样式支持◦强大的AJAX功能◦易于扩展,插件丰富jQuery的构造函数接收四种类型的参数:jQuery(expression,context)jQuery(html)jQuery(elements)jQuery(fn)第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个jQuery对象返回。DEMO:DOCTYPEhtmlPUBLIC"-//W
2、3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">jQuerybasictitle>.selected{background-color:Yellow;}style>3、>script>head>jQuery构造函数h3>jQuery(expression,context)li>jQuery(html)li>jQuery(elements)li>jQuery(fn)li>ul>script>body>html>将以下jQuery代码加入文末的脚本块中:jQuery("ul>li:first").addClass("selected");页面运行效果如下:其中jQuery()可替换为快捷方式$(),如果$被其它对象占用,可使用jQuery.n
3、>script>head>
4、oConflict()函数取消快捷方式。"ul>li:first"中ul>li表示所有位于ul下的li元素(为CSS表达式,XPath方式可用ul/li),:first表示其中的第一个。addClass()为jQuery对象用来添加CSS样式类的函数,相反的函数为removeClass()。再加入以下代码:$('ul').append($('newitem'));运行效果如下:其中$('newitem')将其中的字符串转换为DOM对象,然后通过append()函数加入ul对象的最后。接下来:$(document).ready(function(){$('ul').css('color','r
5、ed');});则效果如:jQuery构造函数中还可以真接传入DOM对象,如document,或jQuery对象(当然就没什么意义)。ready()函数为document添加事件处理函数,将ul的颜色设为红色。$(document).ready()由于应用场景众多,所以可以直接用$(fn)来代替,fn表示处理函数。(ready处理函数貌似在文档内容载入完成后执行,无需等待相关其它图片等资源载入完成,所以比load事件要更早执行,对于这点,没有具体证实)$(function(){alert('welcometojQuery');});以上代码的效果是页面一载入,就弹出一个对话框。jQuery1
6、.2选择器jQuery1.2选择器以下的文档根据官网1.2选择器汉化,并做相应的调整及加入了部份示例。由于实际使用中选择器在IE和非IE下会有不同的效果,请参照红色的字样。如有错误请及时联系我。绯雨汉化:http://feiyu.asgard.cn基本选择器#myid返回:对象>匹配一个id为myid的元素。element返回:对象>数组匹配所有的element元素.myclass返回:对象>数组匹配所有class为myclass的元素*返回:对象>数组匹配所有元素。该选择器会选择文档中所有的元素,包括html,head,bodyselector1,selector2,selectorN返回
7、:对象>数组匹配所有满足selector1或selector2或selectorN的元素层次选择elementParentelementChild返回:对象>数组匹配elementParent下的所有子元素elementChild。例如:$("divp")选择所有div下的p元素elementParent>elementChild返回:对象>数组匹配elementParent下的子元素elementChild
此文档下载收益归作者所有