浅谈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 相关文章推荐
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
javascript断点调试心得分享
Apr 23 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
javascript代码实现简易计算器
Jan 25 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python实现在线音乐播放器
2017/03/03 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
django ajax发送post请求的两种方法
2020/01/05 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
基于Python的OCR实现示例
2020/04/03 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
大学生自荐信
2013/12/11 职场文书