浅谈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 事件流和事件绑定
Jul 16 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
javascript数据类型详解
Feb 07 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 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 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
Laravel5中contracts详解
2015/03/02 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python实现二叉树的遍历
2017/12/11 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
分享一个python的aes加密代码
2020/12/22 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
会计岗位职责
2013/11/08 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
安全教育培训心得体会
2016/01/15 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
oracle数据库去除重复数据
2022/05/20 Oracle