当前位置：首页 > Web开发 > 正文

jQuery入门和DOM对象

2024-03-31 Web开发

标签：

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库时

必须是

不能

onload:

javascript，初始化函数，当网页中的dom元素（关联图片、视频、资源）全部加载完毕后立刻执行.

3.示例 <script type="html/javascript" src=http://www.mamicode.com/"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对象

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/39661.html

上一篇：26.程序员本地网站
下一篇：JQuery解决鼠标单双击冲突问题

jQuery入门和DOM对象

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢