JQuery框架

JQuery框架

概念：

定义：

JQuery是一个便捷的，简洁的JavaScript框架，封装了Js常用的功能代码，提供一种简便的Js设计模式，优化Html文档操作、事件处理、动画设计和Ajax交互。

本质：

JQuery框架，本质上就是一下Js文件，封装了JS的原生代码。

使用步骤：

1. 下载JQuery文件。
2. 导入后缀名为main的文件(读后缀名为js的文件，该文件保留了代码格式，容易阅读)。
3. 使用$获取标签体内容。

JQuery对象与JS对象的区别和相互转换

区别： JQuery对象操作对象时更加方便，且JQuery对象与JS对象不是相互通用的。
转换：
JQuery — > JS :JQ对象[索引] 或 JQ对象。get(索引)
JS — > JQ：$(JS对象)

JQuery基本操作

1.事件绑定

$("#id").click(function(){事件出发后需要执行的代码});

2.入口函数

$(function(){需要执行的代码});

3.样式控制

$("#id").css("属性名","属性值");

JQuery选择器

1.基本选择器

名称	语法	含义
标签选择器（元素选择器）	$(“html标签名”)	选择所有匹配标签名称的元素
id选择器	$("#id的属性值")	选择与指定id属性值匹配的元素
类选择器	$(".class的属性值")	选择与指定class属性值匹配的元素
并集选择器	$(“选择器1，选择器2…”)	选择多个选择器中的所有元素

2.层级选择器

名称	语法	含义
后代选择器	$(“A B”)	选择A元素内部的所有B元素
子选择器	$(“A > B”)	选择A元素内部的所有B子元素

3.属性选择器

名称	语法	含义
属性名选择器	$(“A[属性名]”)	选择指定属性的元素
属性选择器	$(“A[属性名=值]”)	选择指定属性等于指定值的元素

4.过滤选择器

名称	语法	含义
首元素选择器	first	获得选择元素中的第一个元素
尾元素选择器	last	获得选择元素中的最后一个元素
非元素选择器	not(selector)	不包括指定内容的元素
偶数选择器	even偶数	从0开始计数
奇数选择器	odd奇数	从0开始计数
等于索引选择器	eq(index)	指定索引元素
大于索引选择器	gt(index)	大于指定索引元素
小于索引选择器	it(index)	小于指定索引元素
	header	获得标题(h1~h6)元素

5.表单过滤选择器

名称	语法	含义
可用元素选择器	enable	获得可用元素
不可用元素选择器	disable	获得不可用元素
选中选择器	checked	获得单选/复选框选中的元素
选中选择器	selected	获得下拉框中选中的元素

DOM操作

1.内容操作

html() ：获取/设置元素的标签体内容
text()：获取/设置元素的标签体的纯文本内容
val()：获取/设置元素的value 属性值

2.属性操作

attr()：获取/设置元素的属性
removeAttr()：删除元素的属性

prop()：获取/设置元素的属性
removeProp()：删除元素的属性

attr和prop的区别:
操作元素的固有属性，一般使用prop
操作元素自定义属性，一般使用attr

对class属性操作

addclass() : 添加class属性值，不会改变原有样式
removeclass(): 删除class属性值，如果不带参数，则删除所有属性
toggleclass(): 切换class属性 如果元素已有该属性，则删除；如果没有，则添加
class:添加或修改内联样式

3.CRUD操作

名称	格式	含义
append()	对象1.append(对象2)	将对象2添加到对象1元素内部，并且在末尾
prepend()	对象1.prepend(对象2)	将对象2添加到对象1元素内部，并且在开头
appendto()	对象1.appendto(对象2)	将对象1添加到对象2元素内部，并且在末尾
prependto()	对象1.prependto(对象2)	将对象1添加到对象2元素内部，并且在开头
after()	对象1.after(对象2)	将对象2添加到对象1后边，对象1,2是兄弟关系
before()	对象1.before(对象2)	将对象2添加到对象1前边，对象1,2是兄弟关系
insertAfter()	对象1.insertAfter(对象2)	将对象2添加到对象1后边，对象1,2是兄弟关系
insertBefore()	对象1.insertBefore(对象2)	将对象2添加到对象1前边，对象1,2是兄弟关系
remove()	对象.remove()	将对象删除掉
empty()	对象.empty()	将对象的后代元素全部清空，但保留当前元素以及其属性节点