最近看了一些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. 匿名内部类new Runnable()

    匿名内部类(Anonymous Inner Class),在创建实例的同时给出类的定义,所有这些在一个表达式中完成. Java code? 1 2 3 4 Runnable rn = new Runn ...

  2. Config the Android 5.0 Build Environment

    In this document Choosing a Branch    Setting up a Linux build environment        Installing the JDK ...

  3. [Javascript] Webpack Loaders, Source Maps, and ES6

    Using ES6 To use ES6, we need loader. Modify webpack.config.js file: module.exports = { entry: './in ...

  4. IOS - 常用宏定义和功能方法

    可能不定期添加新的东西 github地址:https://github.com/yuqingzhude/CommonUseDemo /************************Tools**** ...

  5. form表单普通提交预览显示,读取显示tmp文件

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  6. 编写函数,以读模式打开一个文件,将其内容读入到一个string的vector中,将每一行作为一个对立的元素存于vector中

    #include<iostream> #include<string> #include<vector> #include<fstream> using ...

  7. Debug 之 The state information is invalid for this page and might be corrupted

    1.问题描述: 网站部署之后,排序或者搜索之后报错:The state information is invalid for this page and might be corrupted 2.问题 ...

  8. OWASP 2013年十大Web应用安全漏洞

    权威的安全组织OWASP 更新了Top 10:https://www.owasp.org/index.php/Top_10_2013-Top_10 十大安全漏洞分别是:1. 注入,包括SQL.操作系统 ...

  9. ADS1.2 集成开发环境的使用

    连风大神都没用过这个ADS1.2,什么破玩意儿啊,好像板子里面的资料也没有找到有这个软件,但是网上有滴,ADS1.2 集成开发环境的使用还是要会的,,, ARM ADS 全称为ARM Develope ...

  10. iis7 php urlrewrite 并隐藏index.php

    <rewrite> <rules> <rule name="OrgPage" stopProcessing="true"> ...