浅谈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的并行运算实现代码
Nov 19 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
vue3实现v-model原理详解
Oct 09 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 adodb分页实现代码
2009/03/19 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
收集的几个Python小技巧分享
2014/11/22 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
用Python抢过年的火车票附源码
2015/12/07 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
如何用Python合并lmdb文件
2018/07/02 Python
对python函数签名的方法详解
2019/01/22 Python
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
会计找工作求职信范文
2013/12/09 职场文书
培训自我鉴定
2014/01/31 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
毕业证代领委托书
2014/09/26 职场文书
员工家属慰问信
2015/03/24 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python