jQuery中$()函数的用法

幸运
185
文章
0
评论
三月 12, 202012:45:53 评论 120 1747字阅读5分49秒
 jQuery想必是当前前端开发中必不可少的组件。它提供了DOM对象的封装、统一的事件机制、以及一系列的工具函数。 讨论中被问及jquery$()有几种用法,瞬间有点懵并未答全。 虽说这样的问法颇似孔乙己问“茴香豆的茴有几种写法?”,但还是借此机会来整理知识,伺机学习一把!

首先我们需要引入jquery,如果你还没有听过jQuery,请移步其他文章或者在你的网站中引入这个:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

jQuery的$()函数文档在这里: http://api.jquery.com/jQuery/ jQuery的$()函数的用法包括:

  • DOM选择,可以指定上下文;
  • DOM创建,可以指定所属的document、属性、事件、甚至所有jQuery方法;
  • DOM加载完成事件监听,是$(document).ready()的简化写法。

DOM选择

最常用的便是通过选择符来选择:

jQuery( selector [, context ] )

看到没?第二个可选参数可以指定上下文,它的类型可以是DOM对象也可以是jQuery对象。例如,找ul下的所有li:

$ul = $('ul');
$li = $.('li', $ul);

相当于:

$li = $ul.find('li');

除了选择符,还可以用DOM对象、DOM对象数组、jQuery对象、甚至一个普通对象作为参数。它们将会被包装成jQuery对象。

DOM创建

用jQuery来创建DOM也是常见操作,例如在ul下创建一个li:

// 方法声明
jQuery( html [, ownerDocument ] )
// 例子
$('<li>').appendTo($ul);

注意第二个可选参数,默认值是当前jQuery被载入的那个Document。 如果希望在IFrame中创建的元素,则必须指定Document,因为jQuery是使用window.document.createElement来创建DOM元素的。 这里要求知道新元素所属的document对象。例如:

$("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document)

创建DOM元素时,除了可以指定document,还可以指定元素属性:

// 方法声明
jQuery( html, attributes )
// 例子
$('<a>', {
    href: 'http://jquery.com'
});
// 当然你笨笨地写也是可以的:
$( "<a href='http://jquery.com'></a>" );

更加有趣的是,从jQuery1.8开始,创建元素时不仅可以指定属性,所有$.fn.方法都可以指定,例如:

$( "<div/>", {
  "class": "test",
  text: "Click me!",
  click: function() {
    $( this ).toggleClass( "test" );
  }
}).appendTo( "body" );

DOM加载完成

通常javascript需要在DOM加载完成后执行,否则DOM操作可能会失效。jQuery提供了一个方便的方法来监听DOM加载完成:

// 方法声明
jQuery( callback )
// 例子
$(function(){
    // DOM载入后执行
});

$(callback)的作用完全相当于$(document).ready(callback)。二者的返回值都是包含document的jQuery对象。 因此二者的区别就在于后者可以链式地书写:$(document).ready(x).ready(x)...。然并卵。

这里提一下$(document).ready和$(window).load的区别:

  • 前者会在html文档载入后,并且DOM就绪后调用。
  • 后者会在html文档载入后,DOM就绪后,页面渲染结束(iframe、img加载完成)后调用。

本文来源于:jQuery中$()函数的用法-幸运草博客
特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。

  • 本站QQ群
  • weinxin
  • 捐赠本站
  • weinxin
jquery中cookie用法介绍 jQuery

jquery中cookie用法介绍

cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使用方法。 使用JQuery操作cookie时 发生取的值不正确的问题: ...
jQuery事件:bind、delegate、on的区别 jQuery

jQuery事件:bind、delegate、on的区别

「内容简介」本文详解各种jQuery事件绑定方法:on,bind,delegate,live,unbind,trigger。 同时总结一下常用的jQuery事件技术:如何阻止事件冒泡、阻止浏览器默认行...
jQuery入门讲解-jQuery样式操作 jQuery

jQuery入门讲解-jQuery样式操作

css 操作 通过css()的方法设置或者获取样式,无论样式属性是从外部导入的,还是直接写在HTML标签里面的,css()方法都可以获取到。。 1、设置单个样式: 2、设置多个样式: 操作多个样式的时...
Jquery Notes jQuery

Jquery Notes

1.什么是jQuery 2.如何使用jQuery 3.查找元素 1.什么是jQuery jQuery是第三方开发的执行DOM操作的极简化的函数库 第三方:下载 执行DOM操作:jQuery还是执行DO...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: