浅谈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 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
window.open()实现post传递参数
Mar 12 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
vue 导出文件,携带请求头token操作
Sep 10 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
Javascript中replace()小结
2015/09/30 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python cumsum函数的具体使用
2019/07/29 Python
Python 元组操作总结
2019/09/18 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
python数据化运营的重要意义
2019/11/25 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
空指针到底是什么
2012/08/07 面试题
申报职称专业技术个人的自我评价
2013/12/12 职场文书
会计工作心得体会
2014/01/13 职场文书
招标承诺书
2014/08/30 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
批评与自我批评总结
2014/10/17 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
行政答辩状范文
2015/05/21 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
Python函数对象与闭包函数
2022/04/13 Python