JQuery的使用（工具方法、CSS属性及方法、筛选、文档处理、事件、动画）后续

旧城等待， 2024-03-23 09:53 62阅读 0赞

## 工具方法、CSS属性及方法 ##

### 1、JS与JQuery转换 ###

#### 1）概述 ####

*  $类似java中的类
 *  $()类似java中的类的构造方法

#### 2）JS与jQuery转换 ####

**js转换jQuery**：

$(js对象)  //作用：转换作用

**jQuery转换js**  
1.可以通过下标转换成js对象

var a= $("#a");
     console.log(a[0].innerHTML)
     console.log(a.innerHTML);

2.可以通过get方法+下标获取

console.log($oDiv.get(0).innerHTML);

### 2、$工具方法 ###

JQuery有许多的$怎么用的方法，要更多方法怎么用的可以参考[JQuery官方API文档][JQuery_API]  
我就列举一下

1.$.each()：遍历数组、对象、对象数组中的数据
    2.$.trim()：去除字符串两边的空格
    3.$.type(obj)：得到数据的类型
    4.$.isArray(obj)：判断是否是数组
    5.$.isFunction(obj)：判断是否是函数
    6.$.parseJSON(obj)：解析json字符串转换为js对象/数组

### 3、JQuery属性和css ###

#### 属性 ####

attr()：//获取某个标签属性的值，或设置某个标签属性的值
    removeAttr()：//删除某个标签属性
    addClass()：//给某个标签添加class属性值
    removeClass(): //删除某个标签class属性值
    prop(): 和 attr()类似，//区别在于prop用于属性值为Boolean类型的情况，比如多选
    html(): //获取某一个标签体内容（注意：该标签体中可以包含子标签）
    text()：//获取某一个标签体内容(注意：该标签体不能包含子标签)
    val()：//主要用户获取/设置输入框的值

更多属性查看API文档

#### CSS ####

1.  css()：设置标签的css样式

css("样式名");//获取样式值：
    css("样式名","样式值");//设置单个样式：
    css({
        "样式名"："样式值"，"样式名"："样式值"});//设置多个样式：

1.  位置

offset()：//相对整个大容器的相对位置
    position()：//相对父容器的相对位置

1.  尺寸

width(): //容器宽
    height(): //容器高
    innerWidth()：//width+padding
    innerHeight()：//height+padding
    outerWidth(): //width+padding+border
    outerHeight(): //height+padding+border

## 筛选、文档处理 ##

### 1、筛选 ###

#### 过滤 ####

first()：获取匹配的第一个元素
    last()：获得匹配的最后一个元素
    eq(N)：获取匹配的第N或-N个元素
    filter(selector)：筛选出与指定表达式匹配的元素集合
    has(selector)：筛选出包含特定特点的元素的集合
    not(selector)：筛选出不包含特定特点的元素的集合

在jQuery对象数组中，过滤出一部分元素来

#### 查找 ####

children()：子标签中找
    find()：后代标签中找
    parent()：父标签
    prevAll()：前面所有的兄弟标签
    nextAll()：后面所有的兄弟标签
    siblings()：前后所有的兄弟标签

在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签

### 2、文档处理 ###

#### 增 ####

##### 内部插入 #####

append()：将内容添加到指定的元素后面
    appendTo()：和append()颠倒
    //后面
    prepend()：将内容添加到指定元素前面
    prependTo():和prepend()颠倒
    //前面

##### 外部插入 #####

after()：在匹配元素之后插入内容
    before()：在匹配元素之前插入内容

#### 删 ####

empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
    remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）