html_nodes+函数,childNodes 用法两例-网页开发中的容易忽略的问题...-jQuery 入门讲解1_169IT.COM...

jQuery构造函数

JQuery优点

◦体积小(v1.2.3 15kb)

◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器(IE6,FF,Safari,Opera)

◦链式代码

◦强大的事件、样式支持

◦强大的AJAX功能

◦易于扩展，插件丰富

jQuery的构造函数接收四种类型的参数：

1. jQuery(expression,context)

2. jQuery(html)

3. jQuery(elements)

4. jQuery(fn)

第一种根据表达式(ID，DOM元素名，CSS表达式，XPath表达式)找出文档中的元素，并组装成一个jQuery对象返回。

DEMO:

jQuery basic

.selected

{

background-color:Yellow;

}

jQuery构造函数

• jQuery(expression,context)
• jQuery(html)
• jQuery(elements)
• jQuery(fn)

将以下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');

});

以上代码的效果是页面一载入，就弹出一个对话框。