浅谈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 10 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
vue图片上传本地预览组件使用详解
Feb 20 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
OpenLayers实现图层切换控件
Sep 25 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
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
python套接字流重定向实例汇总
2016/03/03 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
值得收藏的10道python 面试题
2019/04/15 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
20岁生日感言
2014/01/13 职场文书
会计工作心得体会
2014/01/13 职场文书
高中语文教学反思
2014/01/16 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
企业授权委托书范本
2014/09/22 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
三峡大坝导游词
2015/01/31 职场文书
校园开放日新闻稿
2015/07/17 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书