十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 j Q u e r y O b j = jQueryObj= 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() 为元素添加类样式