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元素名，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');
});
以上代码的效果是页面一载入，就弹出一个对话框。

赞 (0)

相关推荐

  • 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入门基础小实例(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(将我有序化):使

  • C语言结构体简单入门讲解

    C语言结构体简单入门讲解

    结构体 定义:用于存储不同的数据类型,存储在同一块内存空间里面 关键字 struct 标签 结构体名称 成员 例如: struct student { char name[20]: char sex; int age; float grade; }: 结构体后面不要忘记加分号 结构体至少需要一个标签,证明身份 结构体的使用 .访问指针 →访问 #include <stdio.h> #include <string.h> struct student { char name[20];

  • Java 泛型超详细入门讲解

    Java 泛型超详细入门讲解

    目录 1.什么是泛型? 2.泛型是怎么编译的 泛型的编译机制:擦除机制 1.什么是泛型? 泛型其实就是将类型作为参数传递,泛型允许程序员在编写代码时使用一些以后才指定的类型 ,在实例化该类时将想要的类型作为参数传递,来指明这些类型. 为什么要引入泛型? 例如:自己实现一个顺序表 public class MyArrayList { public int[] elem; public int usedSize; public MyArrayList() { this.elem = new int[

  • Java 泛型超详细入门讲解

    Java 泛型超详细入门讲解

    目录 1.什么是泛型? 2.泛型是怎么编译的 泛型的编译机制:擦除机制 1.什么是泛型? 泛型其实就是将类型作为参数传递,泛型允许程序员在编写代码时使用一些以后才指定的类型 ,在实例化该类时将想要的类型作为参数传递,来指明这些类型. 为什么要引入泛型? 例如:自己实现一个顺序表 public class MyArrayList { public int[] elem; public int usedSize; public MyArrayList() { this.elem = new int[

  • python计算机视觉OpenCV入门讲解

    python计算机视觉OpenCV入门讲解

    目录 前言 一.什么是计算机视觉 二.图片处理基础操作 图片处理:读入图像 图片处理:显示图像 图片处理:图像保存 三.图像处理入门基础 图像成像原理介绍 图像分类 四.灰度图像 五.彩色图像(RGB) 六.像素处理操作 读取像素 修改像素 使用python中的numpy修改像素点 七.获取图像属性 形状 像素数目 图像类型 八.图像ROI 九.通道的拆分与合并 拆分 合并 前言 本专栏将非常细致的讲解相关与计算机视觉OpenCV的相关知识即操作,非常的简单易懂.本文主要讲解相关与计算机视觉的相

  • 简单的jQuery入门指引

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

随机推荐