浅谈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 08 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
百度地图api如何使用
Aug 03 Javascript
Javascript实现单例模式
Jan 24 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
详解jQuery中的事件
Dec 14 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
浅谈node的事件机制
Oct 09 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 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
缅甸的咖啡简史
2021/03/04 咖啡文化
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
python实现读取并显示图片的两种方法
2017/01/13 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
python批量修改文件编码格式的方法
2018/05/31 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
社区戒毒工作方案
2014/06/04 职场文书
经济管理自荐书
2014/06/09 职场文书
捐助倡议书
2015/01/19 职场文书
法律讲堂观后感
2015/06/11 职场文书
创业计划书之美甲店
2019/09/20 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
HDFS免重启挂载新磁盘
2022/04/06 Servers