jQuery入门和DOM对象
jQuery入门和DOM对象
1.开发准备
1. 下载的版本:
jquery-3.3.1.min.js :压缩版,发布版84.8KB
jquery-3.3.1.js :常规版,开发版265KB
2. 开发工具:
hbuilder webstrom(推荐) dreamweaver idea
notepad++
3. 使用:
引入jQuery
html中 如果出错,不提示!
如果调试工具(F12)没有错误提示,但显示效果不一致,考虑html错误
常见错误:
引入js库时
必须是
<script type="text/javascript src="...">
</script>
不能
<script type="text/javascript src="..."/>
2.初始化函数
1.jQuery
$等效于jQuery
--- jQuery初始化函数 ---
$(document).ready(function(){
});//初始化函数,当网页中的dom元素(不包含图片、视频、资源)全部加载完毕后 立刻执行
--- jQuery初始化函数简化版 ---
$(function(){
});
2.javascript
onload:
javascript,初始化函数,当网页中的dom元素(关联图片、视频、资源)全部加载完毕后 立刻执行.
3.示例
<script type="html/javascript" src="jquery-3.4.1.js">
</script>
<script type="text/javascript">
$(function(){ //jQuery初始化函数
var $title = $("#myTitle");
alert($title.html()+"jquery");
});
function init(){ //javascript初始化函数
var title = document.getElementById("myTitle");
alert(title.innerHTML);
}
</script>
</head>
<body onload="init()">
<p id="myTitle">你喜欢什么颜色?</p>
</body>
3.对象
1.dom模型:
将html xml等文档结构的标签语言看成dom模型
2.dom节点三种类型:
- 元素节点 :
- ...
- 属性节点 :title src alt
- 文本节点:文本节点
3.Dom对象:
以上三种节点类型的具体对象就是Dom对象。
使用层面:凡是Javascript能够直接操作的对象,就是Dom对象。
例如
var title = document.getElementById("myTitle");//通过js获取到的title对象 就是一个dom对象(就是<p>对象) myTitle是属性id值
4.jQuery对象
使用层面:凡是jQuery能够直接操作的对象,就是jQuery对象。
例如:
var $title = $("#myTitile") ; //通过jquery获取到的 $title 就是一个jquery对象。 myTitle是属性id值
--同样一个元素,即可以成为一个dom对象(javascript对象),也可以成为一个jquery对象--
注意:dom对象 只适用于js的各种语法(函数、属性),jquery对象只用于jquery的各种语法(函数、属性)。
dom对象和jquery对象的各自独立。
例如:
title 是dom对象,因此可以使用js属性或方法 title.innerHTML
$title 是jquery对象,因此可以使用jquery属性或方法 $title.html()
建议:
js对象 直接写title
jquery 加上$,例如$title
5.dom对象和jquery对象的转换:
title.innerHTML;
tile ->$title
dom对象->jquery对象 : jquery工厂, $(dom对象)
var title = document.getElementById("myTitle");
alert($(title).innerHTML);
$title.html();
$title->title
jquery对象 ->dom对象:
基础:jquery对象默认是一个数组 或集合 ;dom对象默认是一个单独的对象
数组:jquery对象[0]
集合:jquery对象.get(0)
var $title = $("#myTitle");
alert($title[0].html()+"jquery");
alert($title[0].innerHTML+"javascript");
alert($title.get(0).innerHTML+"javascript");
jQuery入门和DOM对象的更多相关文章
- jquery 字符串转dom对象及对该对象使用选择器查询
<script> $(document).ready(function () { var htmlStr = '<div id="outerDiv">< ...
- jQuery获取的dom对象和原生的dom对象有何区别
js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合,所以说他们两者是不同的对象类型不等价 原生DOM对象转jQuery对象 var box = docu ...
- jquery对象和dom对象的相互转换
更好的学习jquery,要区分好jquery对象和dom对象的区别. 先具体说说dom.举个例子 <html> <head></head> <body> ...
- DOM对象与JQUERY对象的相互转化
普通处理,通过标准JavaScript处理: 1 var p = document.getElementById('imooc') 2 p.innerHTML = '您好!学习jQuery才是最佳的途 ...
- jQuery对象与DOM对象
jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- jQuery对象和dom对象的辨析和相互转化
jquery对象和dom对象总是让人感觉很难分清,其实只要做到1对两者概念有明确认识2找出不同点 A DOM 1概念 DOM对象(Document Object Model,文档对象模型)可以把htm ...
- 关于jQuery对象与DOM对象
今天遇到了关于jQuery对象与dom对象的区分问题.具体如下:对于元素<span id="aa" class="aa">hyz</span& ...
- Dom对象和jQuery包装集
Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getEleme ...
随机推荐
- C++ 并发编程指南(收藏笔记)
git地址: https://github.com/forhappy/Cplusplus-Concurrency-In-Practice https://github.com/forhappy/Cpl ...
- asp.net core 配置微信返回信息接口
这玩意弄了两天 微信的API需要升级了 只有一份PHP的DEMO 还有个坑 返回值一定要是 微信传入的echostr 否则 出现配置失败,这个问题耗了我俩小时 最后还是在论坛看到的解决方案. 项目必须 ...
- Everspin非易失性MRAM切换技术
切换MRAM技术 切换MRAM使用1个晶体管,1个MTJ单元来提供简单的高密度存储器.Everspin使用获得专利的Toggle电池设计,可提供高可靠性.数据在温度下20年始终是非易失性的. 在读取期 ...
- Day 04 作业
目录 作业 简述Python的五大数据类型的作用.定义方式.使用方法: 数字类型 字符串类型 列表 字典 布尔型 一行代码实现下述代码实现的功能: 写出两种交换x.y值的方式: 一行代码取出nick的 ...
- 【搞定Jvm面试】 JVM 垃圾回收揭秘附常见面试题解析
JVM 垃圾回收 写在前面 本节常见面试题 问题答案在文中都有提到 如何判断对象是否死亡(两种方法). 简单的介绍一下强引用.软引用.弱引用.虚引用(虚引用与软引用和弱引用的区别.使用软引用能带来的好 ...
- 【设计模式】代理模式-Proxy
转载:https://www.cnblogs.com/yangchongxing/p/7654725.html 代理模式定义如下: Provide a surrogate or placeholder ...
- 从零开始—Socket系统调用和多态封装
1 重新搭建实验环境 前面都是用实验楼环境做的实验,偷的懒总是要还的,这一次重装环境前后花了十几个小时,踩了无数的坑. 1.1 Ubuntu和LINUX内核的区别 Ubuntu是基于LINUX内核编写 ...
- Spring Cloud进阶之路 | 二:服务提供者(discovery)
1 创建父项目 以前文所述,以spring boot 2.1.7.RELEASE为基,spring cloud版本为Greenwich.SR2,spring cloud alibaba版本为2.1.0 ...
- reselect是怎样提升react组件渲染性能的?
reselect是什么? reselect是配合redux使用的一款轻量型的状态选择库,目的在于当store中的state重新改变之后,使得局部未改变的状态不会因为整体的state变化而全部重新渲染, ...
- Cesium专栏-terrain地形、3dtiles模型、gltf模型 高度采样
在Cesium中,对于terrain地形.3dtiles模型.gltf模型的高度采样是一个很基本的功能,基于此,可以做一些深度应用,而Cesium已经帮我们提供了相应的API,在这里,我帮大家总结一下 ...