浅谈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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
Vue实现购物车功能
Apr 27 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
多文件上载系统完整版
2006/10/09 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
js 事件小结 表格区别
2007/08/13 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python模块之StringIO使用示例
2015/04/08 Python
Python部署web开发程序的几种方法
2017/05/05 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
羽毛球比赛策划方案
2014/06/13 职场文书
五年级下册复习计划
2015/01/19 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
tomcat下部署jenkins的方法
2022/05/06 Servers