jQ

傷城~ 2022-01-11 04:27 251阅读 0赞

## `jQuery的基础语法` ##

`$(selector).action()`

## **查找标签** ##

### 基本选择器 ###

**　　id选择器：**$("\#id");

**　　标签选择器：**$("tagName");

**　　class选择器：**$(".className");

**　　所有元素选择器：**$("\*");

**　　组合选择器：**$("\#id, .className, tagName");

**　　后代选择器：**$("x y");

**　　儿子选择器**：$("x > y");

**　　毗邻选择器：**$("x + y");

**　　兄弟选择器：**$("x ~ y"):

**属性选择器：**\[attribute\]

### 基本筛选器 ###

**　　**:first　　**第一个**

:last　　**最后一个**

:eq(index)　　**索引等于index的那个元素**

:even　　**匹配所有索引值为偶数的元素，从 0 开始计数**

:odd　　**匹配所有索引值为奇数的元素，从 0 开始计数**

:gt(index)　　**匹配所有大于给定索引值的元素**

:lt(index)　　**匹配所有小于给定索引值的元素**

:not(元素选择器)　　**移除所有满足not条件的标签**

:has(元素选择器)　　**选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)**

### **表单筛选器**： ###

:text　　文本
    :password　　密文
    :file　　文件
    :radio　　单选
    :checkbox　　多选
    :submit　　注册按钮
    :reset　　重置按钮
    :button　　按钮

## **筛选器方法** ##

**下一个元素：$("\#id").next();**

**上一个元素：$("\#id").prev();**

**父亲元素：$("\#id").parent();**

**儿子元素：$("\#id").children();**

**兄弟元素：$("\#id").siblings();**

## **操作标签** ##

**样式操作**

addClass();// 添加指定的CSS类名。
    removeClass();// 移除指定的CSS类名。
    hasClass();// 判断样式存不存在
    toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

**位置操作**

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
    position()// 获取匹配元素相对父元素的偏移
    scrollTop()// 获取匹配元素相对滚动条顶部的偏移
    scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

**文本操作**

**　　HTML代码：**

html()// 取得第一个匹配元素的html内容
    html(val)// 设置所有匹配元素的html内容

**　文本值：**

text()// 取得所有匹配元素的内容
    text(val)// 设置所有匹配元素的内容

**　值：**

val()// 取得第一个匹配元素的当前值
    val(val)// 设置所有匹配元素的值
    val([val1, val2])// 设置多选的checkbox、多选select的值

### 属性操作 ###

用于ID等或自定义属性

attr(attrName)// 返回第一个匹配元素的属性值
    attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
    attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
    removeAttr()// 从每一个匹配的元素中删除一个属性

### 文档处理 ###

**　　添加到指定元素内部的后面**

$(A).append(B)// 把B追加到A
    $(A).appendTo(B)// 把A追加到B

**　　添加到指定元素内部的前面**

$(A).prepend(B)// 把B前置到A
    $(A).prependTo(B)// 把A前置到B

**添加到指定元素外部的后面**

$(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面

**添加到指定元素外部的前面**

$(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面

**　　移除元素 　　remove()**

**　　清空元素 　　empty()**

**　　替换 　　replaceWith()      replaceAll()**

**　　克隆　　clone()**

### **常用事件** ###

**按钮点击事件被触发时会调用一个函数** 　　**click(function()\{...\})**

**　　光标悬停事件　　 hover(function()\{...\})**

**　　元素失去焦点时，发生 blur 事件　　blur(function()\{...\})**

**　　元素获得焦点时，发生 focus 事件　　focus(function()\{...\})**

**　　元素的值改变时发生 change 事件　　change(function()\{...\})**

**　　键盘键被松开时发生 keyup 事件　　keyup(function()\{...\})**

###  绑定事件 ###

1.  `on( events [, selector ],function(){})`

*  events： 事件
 *  selector: 选择器（可选的）
 *  function: 事件处理函数

### 移除事件 ###

1.  `.off( events [, selector ][,function(){}])`

`off()` 方法移除用 `.on()`绑定的事件处理程序。

*  events： 事件
 *  selector: 选择器（可选的）
 *  function: 事件处理函数

### 阻止后续事件执行 ###

1.  `return false; // 常见阻止表单提交等`
2.  e.preventDefault();

## 动画效果 ##

// 基本
    show([s,[e],[fn]])
    hide([s,[e],[fn]])
    toggle([s],[e],[fn])
    // 滑动
    slideDown([s],[e],[fn])
    slideUp([s,[e],[fn]])
    slideToggle([s],[e],[fn])
    // 淡入淡出
    fadeIn([s],[e],[fn])
    fadeOut([s],[e],[fn])
    fadeTo([[s],o,[e],[fn]])
    fadeToggle([s,[e],[fn]])
    // 自定义（了解即可）
    animate(p,[s],[e],[fn])

转载于:https://www.cnblogs.com/wangtenghui/p/10975935.html