浅谈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+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
JavaScript中Function详解
Feb 27 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
socket在egg中的使用实例代码详解
May 30 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
Angularjs 基础入门
2014/12/26 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python连接MySQL数据库实例分析
2015/05/12 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python列表(List)知识点总结
2019/02/18 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
招商业务员岗位职责
2013/12/16 职场文书
学习退步检讨书
2014/09/28 职场文书
个人剖析材料范文
2014/09/30 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python