浅谈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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
微信小程序实现购物车小功能
Dec 30 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
php异常处理方法实例汇总
2015/06/24 PHP
Node.js批量给图片加水印的方法
2016/11/15 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
python从入门到精通(DAY 1)
2015/12/20 Python
python if not in 多条件判断代码
2016/09/21 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
NumPy 数组使用大全
2019/04/25 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
python 读取.nii格式图像实例
2020/07/01 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
建筑人员岗位职责
2013/12/25 职场文书
护理学专业求职信
2014/06/29 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书