jquery -- 学习总结

1.jQuery是什么？

jQuery 是一个 JavaScript 库 – 轻量级的"写的少，做的多"

jQuery功能：

---

2.jQuery语法

（1）入口函数：检测jq是否引入成功

//原型
$(document).ready(function(){
    
    
	...
})
//缩写
$(function(){
    
    
	...
})

jquery和javascript入口函数之间的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

load和ready的区别：

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕（包括图片等），然后在执行包裹的代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	只能那个执行一次，如果执行第二次，那么第一次的执行就会被覆盖	可以执行多次，后续的执行都不会覆盖上一次

（2）语法格式：

$('selector').action()

'$' 表示一个全局对象jquery

（3）jQuery定义多种类型的选择器：

选择器类型	语法格式	含义
层次选择器	$('_>_')	子元素选择器
	$('_空格_')	后代元素选择器
	$('_+_')	紧邻下一个元素选择器
	$('_~_')	兄弟元素选择器
过滤选择器	$('li:first/last')	第一个/最后一个li
	$('li:even/odd')	下标为偶/奇数的li
	$('li:gt(5)/lt(4)')	下标大于5/下标小于4的li
	$('li:eq(4)')	下标等于4的li
内容过滤选择器	$('div:contains('Runob')')	包含Runbo文本的div元素
	$('div:has(seletor)')	包含有选择器匹配的元素
	$('tb:empty')	不包含子元素或文本的空元素
	$('tb:parent')	包含子元素或文本的空元素
可见性过滤选择器	$('li:visible')	所有可见的li元素
	$('li:hidden')	所有不可见的li元素
属性过滤选择器	$('div:[id ='123']') / $('div:[id !='123']')	id属性值等于/不等于123的div元素
	$('div:[id ^='123']') / $('div:[id $='123']')	id属性值以123开头/结尾的div元素
	$('div:[id *='123']')	id属性值包含123的div元素
状态过滤选择器	$('input:enabled/disabled/checked')	可用/不可用/选用的input元素
表单过滤选择器	$(':input')	匹配所有的input（input,textarea,select,button）元素
	$(':text')	匹配所有的单行文本框（password/radio/checkbox/submit/reset/button/file）

---

3.jQuery事件

常见的DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter(mouseleave)	keyup	focus	scroll
mousedown(mouseup)		blur	unload
hover

事件方法语法：

//以click事件为例：
$(document).ready(function(){
    
    
	$(' ').click(function(){
    
    
		//click执行事件函数代码
	})
})

---

4.jQuery遍历

根据其相对于其他元素的关系来"查找"（或选取）HTML 元素

---

5.jQuery效果

1. 显示/隐藏
   hide() show() toggle()

参数’1000’ ->规定隐藏/显示的速度，可以取slow，fast或毫秒
toggle() 显示被隐藏的元素，隐藏已显示的元素

<!--隐藏-->
$("#hide").click(function(){
  $("p").hide(1000);
});
 <!--显示-->
$("#show").click(function(){
  $("p").show(1000);
});

<!--切换hide()和show()-->
$("button").click(function(){
  $("p").toggle();
});

2. 淡入/淡出
   

   fadeIn() 淡入已隐藏的元素
   

   fadeOut() 淡出可见元素
   

   fadeToggle() 切换fadeIn()和fadeOut()元素

   如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
   如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
   

   fadeTo() 允许渐变为诶定的不透明度（值介于0和1之间）

3. 滑动
   

   slideDown() 向下滑动元素
   

   slideUp() 向上滑动元素
   

   slideToggle() 切换slideDown()和slideUp()元素

   如果元素向下滑动，则 slideToggle() 可向上滑动它们。
   如果元素向上滑动，则 slideToggle() 可向下滑动它们。
   

4. 动画
   animate() 方法用于创建自定义动画

语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用。它把 < div> 元素往右边移动了 250 像素：

$("button").click(function(){
    
    
  $("div").animate({
    
    left:'250px'});
});

5. 停止动画

stop() 方法用于停止动画或效果，在它们完成之前。适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
格式： $(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

---

6.jQuery添加//删除元素

1. 添加元素

   append() - 在被选元素的结尾插入内容
   prepend() - 在被选元素的开头插入内容
   after() - 在被选元素之后插入内容
   before() - 在被选元素之前插入内容
   
   

   append/prepend与after/before的区别：

   append/prepend 是在选择元素内部嵌入。

   after/before 是在元素外面追加。

2. 删除元素

   remove() - 删除被选元素（及其子元素）
   empty() - 从被选元素中删除子元素

---

7.jQuery获取内容或属性

1. 获取内容

   text() - 设置或返回所选元素的文本内容
   html() - 设置或返回所选元素的内容（包括 HTML 标记）
   val() - 设置或返回表单字段的值

2. 获取属性

   attr() -用于获取属性值

attr 和 prop 的区别介绍：
对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

---

8.jQuery 获取/设置css属性

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性