jQuery入门与DOM对象

jQuery

jquery: javascript库
下载的版本:
jquery-3.3.1.min.js :压缩版,发布版84.8KB
jquery-3.3.1.js :常规版,开发版265KB
html中 如果出错,不提示!
如果调试工具(F12)没有错误提示,但显示效果不一致,考虑html错误。
常见错误:
引入js库时
必须是

<script type="text/javascript" src="...." ></script>

不能

 <script type="text/javascript" src="..." />

$(document).ready(function(){}):初始化函数, 当网页中的dom元素(不包含图片、视频、资源)全部加载完毕后,立刻执行。
onload : javascript,初始化函数,当网页中的dom元素(关联图片、视频、资源)全部加载完毕后 立刻执行。
jquery初始化函数简化:

$(function(){...});

$等价于jQuery

  • dom模型:
    将html xml等文档结构的标签语言 看成dom模型
  • dom节点有三种类型:
    元素节点 <html <ul… <p
    属性节点 :title src alt …
    文本节点: 文本节点
  • Dom对象:
    以上三种节点类型的具体对象 就是Dom对象。
    使用层面: 凡是JavaSCript能够直接操作的对象,就是Dom对象。
    例如:
//通过js获取到的title对象 就是一个dom对象(就是p对象)
 var title = document.getElementById("myTitile");
  • jQuery对象:
    凡是jQuery能够直接操作的对象,就是jQuery对象。
    例如:
/*通过jquery获取到的 $title 就是一个jquery对象。
	同样一个元素,即可以成为一个dom对象(javascript对象),也可以成为一个jquery对象*/
 var $title = $("#myTitile") ; 

注意:dom对象 只适用于js的各种语法(函数、属性),jquery对象只用于jquery的各种语法(函数、属性)。
例如
title 是dom对象,因此可以使用js属性或方法

 title.innerHTML

$title 是jquery对象,因此可以使用jquery属性或方法

 $title.html()

建议:

 js对象 直接写title
 jquery 加上$,例如$title

dom对象->jquery对象 :jquery工厂, $(dom对象)

 $(function () {
  var elementById = document.getElementById("p1");
  var $a1 = $(elementById);
  alert($a1.html());
 });

jquery对象 ->dom对象:
基础:jquery对象默认是一个数组 或集合 ;dom对象默认是一个单独的对象
数组:jquery对象[0]
集合:jquery对象.get(0)

 $(function () {
 	 var $p1 = $("#p1");
	 var a = $p1.get(0);
 	 var a1 = $p1[0];
 	 alert(a.innerText);
 	 alert(a1.innerText);
 });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值