jQuery入门和DOM对象

2021-05-08 11:35

阅读:625

标签:java   src   --   种类   不包含   不能   获取   code   推荐   

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

必须是

不能

2.初始化函数

1.jQuery

$等效于jQuery
--- jQuery初始化函数 ---
$(document).ready(function(){

});//初始化函数,当网页中的dom元素(不包含图片、视频、资源)全部加载完毕后 立刻执行
--- jQuery初始化函数简化版 ---
$(function(){
    
});

2.javascript

onload:

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

3.示例

        

你喜欢什么颜色?

3.对象

1.dom模型:

? 将html xml等文档结构的标签语言看成dom模型

2.dom节点三种类型:

  1. 元素节点 :
      ...

  2. 属性节点 :title src alt
  3. 文本节点:文本节点

3.Dom对象:

以上三种节点类型的具体对象就是Dom对象。

使用层面:凡是Javascript能够直接操作的对象,就是Dom对象。

例如

var title = document.getElementById("myTitle");//通过js获取到的title对象 就是一个dom对象(就是

对象) myTitle是属性id值

4.jQuery对象

使用层面:凡是jQuery能够直接操作的对象,就是jQuery对象。

例如:

var $title = $("#myTitile") ; //通过jquery获取到的 $title 就是一个jquery对象。   myTitle是属性id值

--同样一个元素,即可以成为一个dom对象(javascript对象),也可以成为一个jquery对象--

注意:dom对象 只适用于js的各种语法(函数、属性),jquery对象只用于jquery的各种语法(函数、属性)。
dom对象和jquery对象的各自独立。

例如

  1. title 是dom对象,因此可以使用js属性或方法 title.innerHTML

  2. $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对象

标签:java   src   --   种类   不包含   不能   获取   code   推荐   

原文地址:https://www.cnblogs.com/x-i-n/p/12079504.html


评论


亲,登录后才可以留言!