浅谈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的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
javascript闭包入门示例
Apr 30 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
php+js实现倒计时功能
Jun 02 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
js初始化验证实例详解
Nov 26 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
原生js实现购物车
Sep 23 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清除缓存的几种方法总结
2017/09/12 PHP
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
javascript实现拖放效果
2015/12/16 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
JS实现留言板功能
2017/06/17 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python的Flask框架与数据库连接的教程
2015/04/20 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python机器人运动范围问题的解答
2019/04/29 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
小学一年级评语大全
2014/04/22 职场文书
关于保护环境的建议书
2014/08/26 职场文书
工地食品安全责任书
2015/05/09 职场文书
信用卡工作证明范本
2015/06/19 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技