浅谈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 相关文章推荐
在模板页面的js使用办法
Apr 01 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
简单的网页广告特效实例
Aug 19 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
$.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 动态执行带有参数的类方法
2009/04/10 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
SVG实现时钟效果
2018/07/17 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python实现redis三种cas事务操作
2017/12/19 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python多进程控制学习小结
2018/10/31 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
测绘工程本科生求职信
2013/10/10 职场文书
老师对学生的寄语
2014/04/09 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
Python中的datetime包与time包包和模块详情
2022/02/28 Python
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技