最近看了一些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. PROC简单的用例--VC连接ORACLE

    操作系统:windows 7 数据库版本号:oracle 10g VS版本号:VS2010 前言:连接ORACLE有许多方法,这里只PROC外壳,说明如何连接oracle,有事吗,希望你告诉我指出,一 ...

  2. android116 轮播 viewPager实现

    布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...

  3. Redis 和 Memcached 的区别

    来源:标点符 链接:http://www.biaodianfu.com/redis-vs-memcached.html Redis 的作者 Salvatore Sanfilippo 曾经对这两种基于内 ...

  4. [001]const和指针

    很经典的: const int* p: int* const p: 前者表示指针指向的值是const,指向的值不可变,但是指针本身是可变的:后者表示改指针是const,指针不可变,但是指向的值是可变的 ...

  5. js jquery 等的地址

    jquery在线地址(jquery地址):http://code.jquery.com/jquery-latest.js js人脉图(关系图)插件: http://js.cytoscape.org/

  6. java_spring_实例化bean的3种方法

    //Dao类 package com.dao.bean.www; public interface PersonServiceDao { public abstract void save(); } ...

  7. Android(java)学习笔记134:Handler用法总结 和 秒表案例

    一.Handler的定义: Handler主要接收子线程发送的数据, 并用此数据配合主线程更新UI,用来跟UI主线程交互用.比如可以用handler发送一个message,然后在handler的线程中 ...

  8. 寻找对象在父元素下的index

    方法一. window.onload=function(){    //寻找对象在父元素下的index    function getIndexParent(element){         var ...

  9. 虚反矩阵指令pinv之应用

    pinv指令     在多数解的例子中,有时并不是仅要将其中一变数设定为零之解.为使整个系统得到最佳化,亦可利用pinv指令求得最小模组之合理解.pinv(A)又称为虚反矩阵(pseudoinvers ...

  10. CENTOS6 下MATLAB2014b的安装和破解(Matlab_R2014b linux版 安装笔记)

    参考:http://www.jianshu.com/p/f0cefc737dda ①在下载matlab linux版.iso, ②在windows下用ULTRAISO软件提取 ③用crack中的ins ...