深入浅析jQuery对象$.html


Posted in Javascript onAugust 22, 2016

$对象

说起jQuery,最明显的标志,毫无疑问,就是, ,其实是jquery的简写。而使用$()包装的对象就是jQuery对象

与jQuery对象相对应的就是DOM对象,DOM对象其实就是DOM元素节点对象

如果直接写document,则指的是document的DOM元素对象

document.onclick = function(){
alert('dom');
}

而如果用()包括起来,如 ()包括起来,如(document),是jQuery(document)的简写形式,则指的是jQuery对象

<script src="jquery-3.1.0.js"></script> 
<script>
console.log(jQuery(document));//[document]
console.log($(document));//[document]
console.log(document);//#document
</script>

[注意]jQuery对象无法使用DOM对象的方法,DOM对象也无法使用jQuery对象的方法

<script src="jquery-3.1.0.js"></script> 
<script>
//无反应
$(document).onclick = function(){
alert(0);
};
//Uncaught TypeError: document.click is not a function
document.click(function(){
alert(1);
});
</script>

转换

【1】DOM转jQuery对象

对于一个jQuery对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象

【2】jQuery转DOM对象

jQuery是一个类数组对象,可以通过[index]或get(index)的方法得到相应的DOM对象

console.log(document === $(document)[0]);//true
console.log(document === $(document).get(0));//true

 共存

如果jQuery对象和DOM对象指向同一对象,绑定不同函数,则函数会按照顺序依次执行

//先弹出0,再弹出1
document.onclick = function(){
alert(0);
}
$(document).click(function(){
alert(1);
});

以上所述是小编给大家介绍的jQuery对象$.html,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
为javascript添加String.Format方法
Aug 11 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
JavaScript中严格判断NaN的方法
Feb 16 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
详解JavaScript 事件流
Sep 02 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 #Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 #Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 #Javascript
JavaScript代码里的判断小结
Aug 22 #Javascript
angularjs 源码解析之scope
Aug 22 #Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 #Javascript
js严格模式总结(分享)
Aug 22 #Javascript
You might like
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
php7下的filesize函数
2019/09/30 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
小程序实现展开/收起的效果示例
2018/09/22 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
python处理二进制数据的方法
2015/06/03 Python
Python网络爬虫实例讲解
2016/04/28 Python
python实现rsa加密实例详解
2017/07/19 Python
python实现八大排序算法(1)
2017/09/14 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
审计专业自荐信范文
2014/04/21 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
2014年保卫工作总结
2014/12/05 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python