JQuery基本内容

布满荆棘的人生 2023-07-06 08:52 1阅读 0赞

## JQuery基本内容 ##

**1.简单使用**

var div = $("#div1"); //$("选择器名称")

**2.JQuery对象与JS对象转换**

*  jq 转 js ：jq对象\[索引\] 或者 jq对象.get（索引）
 *  js 转 jq ：$(js对象)

**3.选择器**  
准备：

*  事件绑定：`$.("选择器").click(function(){ 函数体 });`
 *  入口函数：`$(function(){ 函数体 });`
 *  样式控制：`$.("#div1").css("样式名称","值");`

分类：  
1.基本选择器

1.  标签选择器：`$("html标签名")`获得所有匹配标签名称的元素
2.  id选择器：`$("#id的属性值")` 获得与指定id属性值匹配的元素
3.  类选择器：`$(".class的属性值")` 获得与指定class属性值匹配的元素
4.  并集选择器：`$("选择器1,选择器2..."` 获得多个选择器选中的所有元素

2.层级选择器

1.  后代选择器：`$("A B ")`选择A元素内部的所有B元素
2.  子选择器：`$("A > B")`选择A元素内部的所有B子元素

3.属性选择器

1.  属性名称选择器：`$("A[属性名"])`包含指定属性的选择器
2.  属性选择器：`$("A[属性名='值']")`包含指定属性等于指定值的选择器
3.  复合属性选择器：`$("A[属性名='值'][]...")`包含多个属性值的选择器

4.过滤选择器

1.  首元素选择器：`:first`获得选择的元素中的第一个元素
2.  尾元素选择器：`:last`获得选择的元素中的最后一个元素
3.  非元素选择器：`:not(selector)`不包括指定内容的元素
4.  偶数选择器：`:even`偶数，从0开始计数
5.  奇数选择器：`:odd`奇数，从0开始计数
6.  等于索引选择器：`:eq(index)`等于指定元素索引
7.  大于索引选择器：`:gt(index)`大于指定元素索引
8.  小于索引选择器：`:lt(index)`小于指定元素索引
9.  标题选择器：`:header`获得标题元素，固定写法

5.表单过滤选择器

1.  可用元素选择器：`:enabled`获得可用元素
2.  不可用元素选择器：`:disabled`获得不可用元素
3.  选中选择器：`:checked`获得单选/复选框选中的元素
4.  选中选择器：`:selected`获得下拉框选中的元素

**4.DOM操作**

1.内容操作

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

2.属性操作

通用属性操作

*  `attr()`获取/设置元素的属性
 *  `removeAttr()`删除属性
 *  `prop()`获取/设置元素的属性
 *  `removeProp`删除属性

**区别**：固有属性用prop，自定义属性用attr。

class属性操作

*  `addClass()`添加class属性
 *  `removeClass()`删除class属性
 *  `toggleClass`切换class属性

3.CRUD操作：

*  `append()`父元素将子元素追加到末尾
 *  `appendTo()`子元素将父元素追加到末尾
 *  `prepend()`父元素将子元素追加到开头
 *  `prependTo()`子元素将父元素追加到开头
 *  `after()`添加元素到元素后边（调用方法和参数对象是兄弟关系）
 *  `insertAfter()`添加元素到元素后边（调用方法和参数对象是兄弟关系）
 *  `before()`添加元素到元素前边（调用方法和参数对象是兄弟关系）
 *  `insertBefore()`添加元素到元素前边（调用方法和参数对象是兄弟关系）
 *  `remove()`移除元素
 *  `empty()`清空所有后代元素