浅谈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 用记忆函数快速计算递归函数
Mar 15 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
js微信分享接口调用详解
Jul 23 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语法速查表
2007/01/02 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
有关php运算符的知识大全
2011/11/03 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
js实现转动骰子模型
2019/10/24 Javascript
vue实现图片上传功能
2020/05/28 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
python自定义类并使用的方法
2015/05/07 Python
Python功能键的读取方法
2015/05/28 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
数学国培研修感言
2014/02/13 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
行政主管岗位职责
2015/02/03 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技