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:

jQuery basic

.selected
{
background-color:Yellow;
}

jQuery构造函数

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

将以下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

赞 (0)

相关推荐

  • jquery 构造函数在表单提交过程中修改数据

    先贴代码 <script type="text/javascript"> function appendText(){ var content = $("#textarea").val(); var new_content = content + "wap"; $("#textarea").attr("value",new_content); }; </script> 然后再在 fo

  • jQuery.prototype.init选择器构造函数源码思路分析

    一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询

  • 浅谈jQuery构造函数分析

    在我的上一篇文章里面 阐述了jQuery的大致框架,知道了所有代码都是写在了一个自调用匿名函数里面,并且传入了window对象,源码是这样的: (function( window, undefined ) {...})( window ); 我们通过alert(jquery) 知道它是一个对象,那么这个对象是怎么构造出来的呢?我们使用$(document)类似的写法获取元素,就好像直接调用了普通的方法一样,jQuery就是普通的函数吗?如果是构造函数为什么不是 new $(document)的常

  • jQuery构造函数init参数分析

    在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样.下面就来看看init这个幕后的构造函数是怎么写的: init: function( selector, context, rootjQuery ) { ... } 可以看到这个方法接受3个参数,其前两个参数是jQuery方法传递过来的 var

  • jQuery构造函数init参数分析续

    如果selector是其他字符串情况就比较多了比较复杂了 // Handle HTML strings if ( typeof selector === "string" ) {...} 开始分不同的情况处理 // Are we dealing with HTML string or an ID? if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 )

  • jQuery入门 构造函数

    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入门基础小实例(1)

    JQuery入门基础小实例(1)

    先展示一下这个例子实现的效果: 页面刚刚加载的时候,显示如图所示: 当在文本框中输入数据后,文本框的红色标识消失,如图所示: 点击确定按钮后,会通过后台来向页面输出数据,如图所示: 前台的代码如下(asp.net): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <

  • jQuery入门之层次选择器实例简析

    jQuery入门之层次选择器实例简析

    本文实例分析了jQuery入门之层次选择器的使用方法.分享给大家供大家参考,具体如下: 这里简单介绍一下jQuery层次选择器中ancestor descendant与parent>child的区别. parent>child:根据父元素匹配所有的子元素,层次关系是父子关系. ancestor descendant:根据祖先元素匹配所有的后代元素,层次关系是祖先和后代. 编写代码,进行测试,以更加清楚的区分两者的区别: <div id="first">1 <

  • Web前端新人笔记之jquery入门心得(新手必看)

    本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jquery开发工具:jquery能做什么? ① 取得文档中的元素 $('div.content').find('p'); ② 修改页面的外观 $('ul > li:first').addClass('active'); ③ 改变文档内容 $('#container').append('<a href

  • jquery 入门教程 [翻译] 推荐

    jQuery入门指南教程 这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识.它包括了一个简单的Hello World的例子,选择器和事件基础,AJAX.FX的用法,以及如何制作jQuery的插件. 这个指南包括了很多代码,你可以copy它们,并试着修改它们,看看产生的效果. 内容提要 安装 Hello jQuery Find me:使用选择器和事件 Rate me:使用AJAX Animate me(让我生动起来):使用FX Sort me(将我有序化):使

  • jQuery 入门讲解1

    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元

  • 简单的jQuery入门指引

    引言 jQuery可以说是web开发领域应用最为广泛的轻量级javascript库,不仅专业的web开发者使用它,很多刚入门的web开发者或者web爱好者也通过使用jQuery轻松地融入到了javascript的开发. 而如果你还希望在这方面做得更好,就应学习和了解最佳实践.最佳实践(Best Practice)是随某一技术领域的发展而逐渐建立起来的关于最新技术和开发方法的信息,在web开发领域也非常有用. 本文内容参考了杰出前端工程师 Addy Osmani 的 jQuery Performa

  • JQuery入门—JQuery程序的代码风格详细介绍

    JQuery入门—JQuery程序的代码风格详细介绍

    <jQuery权威指南>第1章jQuery开发入门,本章通过循续渐进的方式,先从jQuery的基础概念入手,介绍jQuery库的下载,引入简单应用方法:后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍,通过一些简单的小示例,使读者对jQuery在页面中的功能应用有一个大致的了解,为下一章节进一步学习jQuery库的详细对象和方法奠定基础.本节为大家介绍jQuery程序的代码风格. 1.1.5 jQuery程序的代码风格 1．"$"美元符的使用 在jQuery程序

  • 针对初学者的jQuery入门指南

    jQuery 是什么,它能为我们做什么?如果你是一名 Web 开发人员,写过 JavaScript 程序,那么你很可能正在使用 jQuery,即使没有试用过,至少也听说过,事实上 jQuery 可以说是现阶段最流行的 JavaScript 库.据有关部门统计,全球网站上面,约有 28% 的网站在使用 jQuery,这个数字可能有些夸张,但足见 jQuery 受欢迎的程度.本文仅对 jQuery 的使用方法作简单介绍,且作为一个入门教程吧. 下载 jQuery 代码,并在页面中载入 首先需要从jQ

  • JQuery入门——移除绑定事件unbind方法概述及应用

    JQuery入门——移除绑定事件unbind方法概述及应用

    1.在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移出绑定事件的方法,在JQuery中,可以通过unbind方法移除所有绑定的事件或某一个事件. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

随机推荐