`
anson_xu
  • 浏览: 514916 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类

构造函数 jQuery入门[1]-构造函数

阅读更多
jQuery入门[1]-构造函数 jQuery入门[1]-构造函数
jQuery入门[2]-选择器
jQuery入门[3]-事件
jQuery入门[4]-链式代码
jQuery入门[5]-AJAX
jQuery入门[6]-动画
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');
        });以上代码的效果是页面一载入,就弹出一个对话框。

reference:
http://docs.jquery.com/Core
http://docs.jquery.com/Selectors


--未完待续--

分享到:
评论

相关推荐

    jQuery入门---设计思想

    通过构造函数 `jQuery`(通常简写为 `$`)和CSS选择器,我们可以方便地选取DOM树中的特定元素。例如,`$(document)` 选择整个文档,`$('#myId')` 选择ID为`myId`的元素,而 `$('div.myClass')` 选择具有`myClass`类...

    jquery设计思想-入门必学

    这一过程通常是从构造函数 `jQuery()` (或 `$` 简写) 开始的,通过传入选择表达式来获取所需的元素。这些选择表达式可以是 CSS 选择器,也可以是 jQuery 自定义的选择器。 **1. 使用 CSS 选择器:** - `$(document...

    jQuery入门 构造函数

    JQuery优点 ◦体积小(v1.2.3 15kb) ◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器(IE6,FF,Safari,Opera) ◦链式代码 ◦强大的事件、样式支持 ◦强大的AJAX功能 ◦易于扩展,插件丰富 jQuery的构造函数接收四种...

    jquery快速入门实例

    `$` 符号是 jQuery 的核心构造函数,它可以用来选择和操作DOM元素。`$(function() {...})` 是一个简写的 `$(document).ready()`,意味着当页面内容加载完成,DOM准备就绪时,会执行括号内的代码。这类似于JavaScript...

    jQuery 入门教程

    ### jQuery入门教程精要 #### 引言 jQuery是一款轻量级、功能强大的JavaScript库,以其简化HTML文档遍历、事件处理、动画以及Ajax交互而闻名。本文将深入解析jQuery的核心概念与应用技巧,帮助初学者快速掌握...

    jQuery入门2

    - 正则表达式是JavaScript内置的对象`RegExp`,可以通过构造函数创建。 #### 三、小结 通过本课程的学习,学员不仅能够掌握jQuery的基础操作,还能深入了解如何利用jQuery进行文档操作、事件处理以及表单校验等...

    jquery初学.rar

    1. **jQuery构造函数**:jQuery入门[1]-构造函数 .doc 提到了jQuery的核心——构造函数。通过`$()`或`jQuery()`,我们可以将HTML元素、CSS选择器或DOM节点转换为jQuery对象,进而调用其丰富的API。 2. **选择器**...

    jquery开发入门整理(所需要了解的)

    ### jQuery入门: 数组的三种类型三种操作 jQuery中的数组操作主要包括创建数组、操作数组以及查询数组。例如,创建数组可以通过`new Array()`或`[]`语法;操作数组则涉及添加、删除、替换元素的操作;查询数组包括...

    JQuery入门

    首先,我们来看看 jQuery 的构造函数。jQuery 支持四种类型的参数: 1. `jQuery(expression, context)`:根据提供的 CSS 或 XPath 表达式(例如 ID、元素名称)在指定上下文中查找元素,并返回一个 jQuery 对象。在...

    jQuery入门教程

    ### jQuery入门教程知识点详解 #### 一、jQuery简介与优势 **jQuery** 是一款轻量级的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。jQuery 的核心理念是“写得少,做得多...

    jquery入门手册及API

    `$` 函数是一个构造器,用于创建 jQuery 对象,它可以接收一个查询表达式作为参数,如 `"div &gt; p"`,这会选取所有直接位于 `&lt;div&gt;` 元素内的 `&lt;p&gt;` 子元素。 DOM 操作是 jQuery 的关键部分。例如,`html()` 方法...

    jquery-1.5.js及其API下载

    - `$(selector)`:这个是jQuery的基本构造函数,用于选取DOM元素。 - `.find(selector)`:在当前元素集合中搜索子元素。 - `.siblings()`:获取当前元素的所有同级元素。 - `.children()`:获取当前元素的所有直接子...

    javascript入门到精通---金典

    6. **面向对象编程**:学习如何在JavaScript中创建对象、原型链、构造函数,理解面向对象的编程思想。 7. **ES6及新特性**:包括let和const、解构赋值、箭头函数、模板字符串、Promise、async/await等,这些都是...

    jQuery 入门讲解1

    本文将深入讲解jQuery的入门知识,包括其优点、构造函数以及一些基本的DOM操作方法。 首先,jQuery 的优点是多方面的。它的体积小巧,例如,版本1.2.3只有15kb,这使得它在网页加载速度方面表现优秀。jQuery 提供了...

    jQuery经典入门教程(绝对详细)

    是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。...

    jquery-numpad:数字键盘jQuery插件

    通过使用基本的默认对象、用于分配要使用的元素并使用默认值扩展选项的简单构造函数以及围绕构造函数的轻量级包装器,以避免多个实例化的问题。 用法 包括jQuery: &lt; script src =" ...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    10-25 1 jquery框架 jquery对象与dom对象区别及混合使用 10-25 2 jquery id选择器 层次选择器 10-25 3 jquery过滤选择器及练习题讲解 10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤...

    Javascript教程

    - 构造函数与new关键字 - 原型链与继承 - 闭包在面向对象中的应用 10. **第十章:ES6新特性** - let与const变量声明 - 解构赋值 - 类与模块化 11. **第十一章:异步编程** - Promise对象 - async/await...

Global site tag (gtag.js) - Google Analytics