浅谈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广告代码
May 30 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
一段实时更新的时间代码
2006/07/07 Javascript
如何实现浏览器上的右键菜单
2006/07/10 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
学习Node.js模块机制
2016/10/17 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
javascript实现简易计算器
2017/02/01 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
python 换位密码算法的实例详解
2017/07/19 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
思想品德自我鉴定
2013/10/12 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
房屋继承公证书
2014/04/10 职场文书
志愿者活动总结范文
2014/04/26 职场文书
工程部岗位职责
2015/02/10 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
自主招生专家推荐信
2015/03/26 职场文书
预备党员半年考察意见
2015/06/01 职场文书