浅谈Jquery核心函数


Posted in Javascript onJune 18, 2015

      在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作。

所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数,就是Jquery核心函数jquery(),也称为工厂函数。

jquery核心函数有7个重载,分别如下:

jquery()  该函数返回一个空的jquery对象。
jquery(elements)  该函数将一个或多个DOM元素转化为Jquery对象(或jquery集合)
jquery(callback)     该函数是jquery(document).ready(callback)的简写。 该函数将绑定一个在DOM文档载入完成后执行的函数。页面中所有需要在DOM加载完成时,执行的jquery操作,都需要包含在这个函数中。这个函数,可以在页面中,出现多次。
jquery(expression,[context])
jquery(html)
jquery(html,props)
jquery(html,[ownerDocument])

我们详细来看下其中的

jQuery(expression, [context])

这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。

通过 doc[0]、doc[1] 可以分别取出一个 DOM 对象,其它的则是一些 jQuery 对象特有的属性和方法;实际上 jQuery 对象包装了 DOM 对象,同时还包含了一些操作 DOM 元素的 jQuery 方法。

在使用 jQuery 的过程中,大部分情况下第一步工作同时也是最重要的一步工作,就是取得包装了要操作 DOM 对象的 jQuery 对象;然后通过调用取得的 jQuery 对象的方法来完成对 DOM 对象的操作。

for example

1.查找#first context中节点为p的搜有元素,并循环显示对应的值。

$(function() {
    var items = $("p", "#first");
    $.each(items, function(i, n) {
      alert(i);
    });
  });

 i为对应的index,n对应的节点

2.找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。

HTML 代码:
<p>one</p> <div><p>two</p></div> <p>three</p>

jQuery 代码:
$("div > p");<br>

结果:
[ <p>two</p> ]

3.在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。

jQuery 代码:
$("input:radio", document.forms[0]);
                                                                                                                                                     

jQuery(html, [ownerDocument])

根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。

你可以传递一个手写的 HTML 字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过 AJAX 加载过来的字符串。

jQuery(html, props)

根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

参数

htmlString

用于动态创建DOM元素的HTML标记字符串

propsMap

用于附加到新创建元素上的属性、事件和方法

示例

描述:

动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性设置为给定的标记字符串,来实现标记到 DOM 元素转换的。所以,这个函数既有灵活性,也有局限性。

jQuery 代码:

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

$(document).ready()的简写。

当DOM加载完成后,执行其中的函数。

jQuery 代码:

$(function(){
 // 文档就绪
});

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
JSON格式化输出
Nov 10 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
JsChart组件使用详解
Mar 04 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
javascript实现手动点赞效果
Apr 09 Javascript
$.extend 的一个小问题
Jun 18 #Javascript
纯js实现无限空间大小的本地存储
Jun 18 #Javascript
JS实现当前页居中分页效果的方法
Jun 18 #Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 #Javascript
javaScript中Math()函数注意事项
Jun 18 #Javascript
理解Javascript的动态语言特性
Jun 17 #Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 #Javascript
You might like
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
js分页工具实例
2015/01/28 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
python 日期操作类代码
2018/05/05 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
小学英语教师先进事迹
2014/05/28 职场文书
如何写早恋检讨书
2014/09/10 职场文书
保护环境的宣传语
2015/07/13 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
用python开发一款操作MySQL的小工具
2021/05/12 Python
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL