提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery入门介绍之基础知识

jQuery基础知识入门 介绍
2023-06-13 09:15:40 时间

JavaScript库作用及对比

为了简化JavaScript的开发,一些JavsScript库诞生了.JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的Web2.0特性的富客户端页面,并且兼容各大浏览器

当前流行的JavaScript库有:

 

jQuery简介

jQuery是继Prototype之后又一个优秀的JavaScript库

jQuery理念:写得少,做得多.优势如下:

轻量级

强大的选择器

出色的DOM操作的封装

可靠的事件处理机制

完善的Ajax

出色的浏览器兼容性

链式操作方式

……

jQuery:HelloWorld


jQuery对象

jQuery对象就是通过jQuery($())包装DOM对象后产生的对象

jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$(“#persontab”).html();

jQuery对象无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的任何方法

约定：如果获取的是jQuery对象,那么要在变量前面加上$. 

var$variable=jQuery对象

varvariable=DOM对象

DOM对象转成jQuery对象

对于一个DOM对象,只需要用$()把DOM对象包装起来(jQuery对象就是通过jQuery包装DOM对象后产生的对象),就可以获得一个jQuery对象.

 

  转换后就可以使用jQuery中的方法了

jQuery对象转成DOM对象

jQuery对象不能使用DOM中的方法,但如果jQuery没有封装想要的方法,不得不使用DOM对象的时候,有如下两种处理方法:

(1)jQuery对象是一个数组对象,可以通过[index]的方法得到对应的DOM对象. 

(2)使用jQuery中的get(index)方法得到相应的DOM对象                       

jQuery选择器

选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器

jQuery选择器的优点:

简洁的写法                                                                                   

完善的事件处理机制

基本选择器

基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用).


基本选择器示例

改变id为one的元素的背景色为#bbffaa

改变class为mini的所有元素的背景色为#bbffaa

改变元素名为<div>的所有元素的背景色为#bbffaa

改变所有元素的背景色为#bbffaa

改变所有的<span>元素和id为two的元素的背景色为#bbffaa

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器.

 

 

注意: (“prev~div”)选择器只能选择“#prev”元素后面的同辈元素;而jQuery中的方法siblings()与前后位置无关,只要是同辈节点就可以选取

层次选择器示例

改变<body>内所有<div>的背景色为#bbffaa

改变<body>内子<div>的背景色为#bbffaa

改变id为one的下一个<div>的背景色为#bbffaa

改变id为two的元素后面的所有兄弟<div>的元素的背景色为#bbffaa

改变id为two的元素所有<div>兄弟元素的背景色为#bbffaa

相关文章