1、什么是jquery
定义:第三方开发的,执行DOM操作的,极简化的,第三方函数库
第三方:甲方是JavaScript标准自带,乙方自己编辑自定义的函数,第三方是其他人编辑的,拿来使用的。
执行的操作:增删改查+事件绑定
极简化:代码优化后的,操作简单
2. 引入jQuery.js: 2种
(1). 引入项目本地jquery.js文件:
//注意这是本地的文件路径,相对路径或者绝对路径都可以
<script src="js/jquery-1.11.3.js">
(2). 引入CDN网络中共享的jquery.js文件:
//注意这里是在网提供的CDN地址,url
<script src="官方提供的CDN上jquery.js文件地址">
3. 创建jQuery类型子对象:
(1). 只有jQuery类型子对象才能使用jQuery家简化版函数。
DOM家元素对象无权直接使用jQuery家简化版函数。也就是在使用jquery的时候,想要使用jquery则所有需要用到的DOM对象必须先转换为jquery的子对象;
所以只要使用jQuery家简化版函数,都要先创建jQuery家子对象,其中保存一个要操作的DOM元素对象。
(2). 如何:2种:
a. 查找DOM元素对象,并保存进新创建的jQuery对象中:
var $jq子对象=$("选择器")
b. 不查找,直接将DOM元素对象保存进新创建的jQuery对象中:
var $jq子对象=$(DOM元素对象)
(3). 原理:
$=jQuery=new jQuery,所以在jquery中代码可以简化到【$(...)】的程度
jq子对象其实是一个类数组对象,可保存找到的多个DOM元素对象
对jq子对象调用简化版函数,会被自动翻译为对应的原生DOM的方法和属性。
所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。
jQuery中的this、e、e.target等,和DOM中的完全一样!
4、选择器
jquery的选择器和DOM的选择器基本一致,只是使用的方法不同;jquery中没有太多的选择器的方法,只有一种使用方法【$(选择器)】
jquery选择器中,包含之前的DOM的所有选择器,使用方式与css选择器基本一致:
文档选择器【等同于document.οnlοad=()=>{}方法】:【$(document).ready(function(){});】
使用id选择器【$('#id')】;
使用类选择器【$('.类名')】;
使用标签选择器【$('标签名')】
同理其他的选择器使用方式与css选择器一致;
选取所有的元素【$(*)】
选取this指向元素【$(this)】
5、事件
jquery中对常用的DOM事件也进行了包装,也就是说jquery中的事件使用方式是以方法的方式使用的,而在DOM中是以属性的方法使用的。
jquery中常见的事件:
//使用方式
//$(选择器).方法(方法体)
$("p").dblclick(function(){
$(this).hide();
});
鼠标事件:
点击事件click()
双击事件dbclick()
鼠标指针穿过元素mosueenter()
鼠标指针离开元素mosueleave()
鼠标移动到元素上方并按下mousedown()
鼠标移动到元素上方并松开mouseup()
hover()悬停
focus()获取焦点
blur()失去焦点
6、jquery API的三大特征
特征一:使用重载的方式将函数的赋值与修改操作统一称为一个函数名的方式;当该函数没有给与新值的时候,该函数的作用就是获取原本节点对应的值;当给与函数新值的时候,就是对该节点进行赋值操作;
特征二: