当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery入门 构造函数

Javascript
Javascript 学习笔记 错误处理
Javascript 类的继承实现代码
JavaScript 创建对象和构造类实现代码
JavaScript 学习小结(适合新手参考)
extjs 列表框(multiselect)的动态添加列表项的方法
javascript getElementsByName()的用法说明
Document 对象的常用方法
JS 事件冒泡 示例代码
JS 面向对象的5钟写法
JS 输入字数判断实现代码
Javascript 汉字字节判断
JavaScript 关键字屏蔽实现函数
一句话JavaScript表单验证代码
利用javascript实现一些常用软件的下载导航
jQuery 相关控件的事件操作分解
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
JavaScript 异步调用框架 (Part 2 - 用例设计)
JavaScript 异步调用框架 (Part 3 - 代码实现)
JavaScript 异步调用框架 (Part 4 - 链式调用)
JavaScript 异步调用框架 (Part 5 - 链式实现)

Javascript 中的 jQuery入门 构造函数


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 220 ::
收藏到网摘: n/a

jQuery入门 构造函数,需要的朋友可以参考下。

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:


[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

将以下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($('<li>new item</li>'));
运行效果如下:

其中$('<li>new item</li>')将其中的字符串转换为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