浅谈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 在线压缩和格式化收藏
Jan 16 Javascript
javascript parseInt 大改造
Sep 27 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
vue子路由跳转实现tab选项卡
Jul 24 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 csv操作类代码
2009/12/14 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP网络操作函数汇总
2015/05/18 PHP
PHP可变函数学习小结
2015/11/29 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
VUE中的无限循环代码解析
2017/09/22 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
公司离职证明范本
2014/10/17 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
个人党性分析总结
2015/03/05 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
php引用传递
2021/04/01 PHP