最近看了一些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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery basic</title>
    <style type="text/css">
        .selected 
        {
            background-color:Yellow;
        }
    </style>
    <script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script>
</head>
<body>
    <h3>jQuery构造函数</h3>
    <ul>
        <li>jQuery(expression,context)</li>
        <li>jQuery(html)</li>
        <li>jQuery(elements)</li>
        <li>jQuery(fn)</li>
    </ul>
    <script type="text/javascript">
    </script>
</body>
</html>

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

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

jQuery入门[1]-构造函数【转载】的更多相关文章

  1. jQuery入门(1)jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. jQuery入门(3)事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  4. jQuery入门(4)jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  5. JQuery入门

    JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...

  6. jQuery入门必须掌握的一些API

    jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...

  7. Swift语法基础入门四(构造函数, 懒加载)

    Swift语法基础入门四(构造函数, 懒加载) 存储属性 具备存储功能, 和OC中普通属性一样 // Swfit要求我们在创建对象时必须给所有的属性初始化 // 如果没办法保证在构造方法中初始化属性, ...

  8. jQuery验证控件(转载)

    转自:http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html 官网地址:http://bassistance.de/jquery ...

  9. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  10. jquery(入门篇)无缝滚动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Linux下查看CPU型号,内存大小,硬盘空间命令

    1 查看CPU 1.1 查看CPU个数 # cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 2 **uniq命令:删除重 ...

  2. 【19】设计class犹如设计type

    设计class 的时候,需要好好考虑下面的问题: 1.新type的对象应该如何被创建和销毁? 2.对象的初始化和对象的赋值该有什么样的差别? 3.新type的对象如果pass by value,意味着 ...

  3. 配置Ubuntu开发环境

    前言 新买了一台ThinkPad E431,主要看中了硬盘500G和7200转/分钟的速度,因此准备从x220上把工作环境迁移到新买的笔记本上. 为什么不要公司的电脑,是由于160G的ssd硬盘实在是 ...

  4. materialish-progress

    https://github.com/pnikosis/materialish-progress materialish-progress-master.zip

  5. [React Native] Build a Github Repositories component

    Nav to Repos component from Dashboard.js: goToRepos(){ api.getRepos(this.props.userInfo.login) .then ...

  6. 5分钟 搞定UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  7. 功能丰富的 Perl:轻松调试 Perl

    http://www.ibm.com/developerworks/cn/linux/sdk/perl/culture-4/index.html

  8. 面试题总结之Database

    SQL 1. 现有一张学生表,有只有一个列是名字,请选出其中的重名的学生的名字select name from student group by name having count(*) > 1 ...

  9. Mysql数据库备份和按条件导出表数据

    Mysql数据库备份和按条件导出表数据   一.备份数据库 # mysqldump -u root -p  dbcurr>/home/20090219.sql   mysqldum为备份命令,- ...

  10. Github 上的 iOS 开源项目

    在 Github 上 Star 太多了,有时候很难找到自己想要的开源库,所以在此记录下来.便于自己开发使用,也顺便分享给大家. 动画 awesome-ios-animation收集了iOS平台下比较主 ...