jquery优点
◦体积小(v1.2.3 15kb)
◦丰富的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:
jquery basicjquery构造函数 jquery(expression,context) jquery(html) jquery(elements) jquery(fn)
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
将以下jquery代码加入文末的脚本块中:
jquery(ul>li:first).addclass(selected);
页面运行效果如下:
其中jquery()可替换为快捷方式$(),如果$被其它对象占用,可使用jquery.noconflict()函数取消快捷方式。
ul>li:first 中ul>li表示所有位于ul下的li元素(为css表达式,xpath方式可用ul/li),:first表示其中的第一个。 addclass()为jquery对象用来添加css样式类的函数,相反的函数为removeclass()。
再加入以下代码:
$('ul').append($('new item'));
运行效果如下:
其中$('new item')将其中的字符串转换为dom对象,然后通过append()函数加入ul对象的最后。
接下来:
$(document).ready(function(){
$('ul').css('color','red');
});
则效果如:
jquery构造函数中还可以真接传入dom对象,如document,或jquery对象(当然就没什么意义)。ready()函数为document添加事件处理函数,将ul的颜色设为红色。
$(document).ready()由于应用场景众多,所以可以直接用$(fn)来代替,fn表示处理函数。(ready处理函数貌似在文档内容载入完成后执行,无需等待相关其它图片等资源载入完成,所以比load事件要更早执行,对于这点,没有具体证实)
$(function(){
alert('welcome to jquery');
});
以上代码的效果是页面一载入,就弹出一个对话框。
reference:
http://docs.jquery.com/core
http://docs.jquery.com/selectors