jQuery基础知识点

jQuery基础知识点

jQuery能做什么

1.访问和操作DOM元素
2.控制页面样式
3.对页面事件进行处理
4.扩展新的jQuery插件
5.与Ajax技术完美结合
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

jQuery的优势

1.体积小，压缩后只有100KB左右
2.强大的选择器
3.出色的DOM封装
4.可靠的事件处理机制
5.出色的浏览器兼容性
6.使用隐式迭代简化编程
7.丰富的插件支持

jQuery库的获取

引入jQuery

<script src="js/jquery-3.3.1.js" type="text/javascript"></script>

DOM模型

文档对象模型(Doucment Object Model)它的作用是将网页装换为一个JavaScript对象，从而可以用脚本进行各种操作。
DOM不属于JavaScipt，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用与DOM操作的语言。
以对象描述文档的方式就是DOM节点对象就被称为DOM对象

jQuery对象和DOM对象

使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法$("#title").html( );等同于document.getElementById("title").innerHTML;

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用例:$(selector).action();工厂函数$()：将DOM对象转化为jQuery对象选择器
selector：获取需要操作的DOM 元素方法action()：
jQuery中提供的方法，其中包括绑定事件处理的方法注意:n“$”等同于“ jQuery ”

DOM对象与jQuery对象的转换

DOM对象转换jQuery对象使用$()函数进行转化：

$(DOM对象)var txtName =document.getElementById(“txtName”); //DOM对象
var $txtName=$(txtName); //jQuery对象

注意:jQuery对象命名一般约定以$开头在事件中经常使用$(this)，this是触发该事件的对象jQuery对象转换DOM对象jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象,通过get(index)方法得到相应的DOM对象

var $txtName=$ ("#txtName"); //jQuery对象
var txtName =$txtName[0]; //DOM对象

常用语法

jQuery选择器

基本选择器

层次选择器

属性选择器

过滤选择器