知识点1:jQuery
1.减少了原生中对dom操作时 需要去大量记忆 $、query
2.jquery累积了大量的插件库,极大的简化了项目的开发
3.jquery更新到了3.xx pc:1.xx 移动端:2.xx 1.13.1
知识点2:$符号
jQuery把所有功能全部封装在一个全局变量jQuery中,用$这个合法变量名作为别名,而$本质是一个函数(函数也是对象)。
基础语法是:$(selector).action(),即选择符查找HTML元素然后执行操作。
知识点3:选择器
1.按ID查找:例:var div = $('#abc');
2.按元素查找:例:var ps = $('p');
3.按class查找:例:var a = $('.red');
4.按属性查找:例:var email = $('[name=email]');
5.层级选择器,层级间用空格隔开,先定位了父节点再选择相应子节点:例:$('form.test p input');
6.子选择器,限定了层级关系必须是父子关系,即直属子节点:例:$('ul.lang>li.lang-javascript');
...
知识点4:查找与过滤
也可以在拿到jQuery对象后以其为基准进行查找或过滤。
1.find()根据参数在其所有子节点中查找;
2.children()返回所有直接子元素;
3.parent()返回直接父元素,parents()返回所有祖先元素,一直向上到根元素;
4.next()返回下一个同胞元素,nextAll()返回所有跟随的同胞元素;
5.prev()和prevAll()则与之反向;
6.siblings()返回所有同胞元素;
7.first()和last()分别返回被选集合中首个和最后一个元素;
知识点5:DOM
一个jQuery对象可以包含0个或任意个DOM对象,它的方法会作用在每个DOM节点上。即使选择器没有返回任何节点,调用方法也不会报错。
jQuery的API设计非常巧妙,很多方法无参数调用是获取值,传入参数变成设置值。另外jQuery对象的所有方法都返回一个jQuery对象,因此可以进行链式调用。
知识点6:事件
1.添加事件:
例:a.click(function () {
alert('Hello!');
});
2.移除事件:
例:a.off('click', fun);
3.常见事件:
click: 鼠标单击; dblclick:鼠标双击; mouseenter:鼠标进入; mouseleave:鼠标移出; mousemove:鼠标在DOM内部移动; hover:鼠标进入和退出。
keydown:键盘按下; keyup:键盘松开; keypress:按一次键。
focus:获得焦点; blur:失去焦点; change:内容改变; submit:表单提交。