第七天前端jQuery基本使用

十jQuery的基本使用

是一个JavaScript程序库，对JavaScript对象和函数的封装

1.jQuery的功能

访问和操作DOM元素

控制页面显示样式

对页面事件进行处理

与Ajax技术的完美结合

jQuery能做的JavaScript也能做，但jQuery效率更高

2.jQuery优点

体积小

强大的选择器

出色的DOM封装

可靠的事件处理机制

丰富的插件支持

出色的浏览器兼容性

3.jQuery使用

导入jQuery库

<script sr=“js/jquery-1.8.3.js” type=“text/javascript”></script>

$(document).ready()与window.onload类似，但也有区别

4.DOM对象和jQuery对象之间的转换

DOM树

以节点对象描述文档的方式，节点对象被称为DOM对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FvDiQVXr-1603113176197)(C:\Users\lgm\AppData\Roaming\Typora\typora-user-images\1603017038440.png)]

元素节点：文档中所有元素

文本节点：元素节点内的文本内容

属性节点：元素节点的子结点

例子：

<p title=“标题” id=“title”>第一段</p>

DOM对象：var objDOM=document.getElementById(“title”)

​ var value=objDOM.value（一般具有value属性）

​ 或 var objHTML=objDOM.innerHTML（一般不具有value属性）

​ 或 var objHTML=objDOM.innerTEXT（一般不具有value属性）

jQuery对象：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲title").html()/("#title").text();

对象转换

var $jQueryObj=$(DOM对象) 将DOM对象转化为jQuery对象

var DOMObj=$jQueryObj[0] 将jQuery对象转换为DOM对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-crgSuCES-1603113176203)(C:\Users\lgm\AppData\Roaming\Typora\typora-user-images\1603113152944.png)]

5.操作JS的样式

css(“属性”，属性值) 为元素设置CSS样式的值，可连缀书写

addClass() 为元素添加类样式