jQuery入门第一章(jQuery初体验)

简介: jQuery入门第一章(jQuery初体验)

JQ 基本概念


jQuery 其实就是别的团队封装好的一个 JS 文件。


常见错误


没有引入 jQuery 文件,引入失败,请检查 jquery.js 文件的路径。

20210905193229317.png


JQ 对象 和 DOM 对象互相转换


不同类型的对象拥有不同的属性和方法


  • JQ 对象调用 JQ 对象的方法和属性。


  • DOM 对象调用 DOM 对象的方法和属性。


  • JQ 对象和 DOM 对象可以互相转换。


JQ 对象和 DOM 对象关系图


  • JQ 对象可以提取出 DOM 对象


  • DOM 对象也可以把包装成 JQ 对象

20210905193432691.png


JQ 对象转 DOM 对象


// 推荐写法

$('选择器').get(0)    

// 写法2

$('选择器')[0]


JQ 对象 转换成 DOM 对象后就可以调用 DOM 对象的方法了。


DOM 对象转 JQ 对象


$(this)  


转换后就可以调用 JQ对象的方法了。


jQuery 选择器

20210905193734587.png


类操作

通过操作添加类和移除类实现元素样式的变化。

20210905193839641.png


removeClass( ) 如果不传入类名,表示移除所有类名。

相关文章
|
7月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
33 0
|
8月前
|
存储 JavaScript 前端开发
JQuery(入门~选择器)
JQuery 是快速、简洁的JavaScript库,也就是写好的JS文件。
|
7月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
7月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
39 0
|
9月前
|
XML JSON JavaScript
jQuery入门到实战
jQuery入门到实战
jQuery入门到实战
|
5月前
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
27 0
|
6月前
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
31 0
|
7月前
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
25 0
|
7月前
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
39 0
|
8月前
|
存储 JavaScript 前端开发
jQuery:入门
jQuery:入门
93 0