jquery总结

向右看齐 2021-09-02 06:38 393阅读 0赞

### jquery引包： ###

引入jquery的script标签与书写jquery语句script标签不能是同一个

jquery简化了DOM开发， 比如添加、删除、修改节点等

jquery不需要再进行能力检测，都是兼容的

jquery是javascript的一个实用库，它不是一门新的语言，内部语句也都是js书写的

### $函数： ###

jquery对象与js对象互相转为

js转为jquery对象： 直接使用$函数包裹

jquery对象转为js: 使用\[\]

### 选择器： ###

Css2.1选择器：

类、 id、 标签、后代、交集、 并集、 通配符

Css3选择器：

$(“标签:first()”)     第一位

$(“标签:last()”)    最后一次

$(“标签:eq(x)”)   序号数

$(“标签:lt(x)”)   大于

$(“标签:gt(x)”)   小于

$(“标签:odd”)   基数

$(“标签”even”)   偶数

### jQuery函数： ###

最初引入jquery时候想全局暴露的是jQuery函数，后来人们觉得书写起来比较复杂，所有才修改为$，但是jQuery仍然保留我们还可以继续使用

### jquery中添加事件的方式 ###

第一种方式：

$(dom).on(type事件, fn函数)

第二种使用方式：

$(dom).type事件(fn函数

### 常用方法： ###

size: 用于获取元素的个数 （在jquery1.8版本之后被废弃掉了）常用的是length属性

html方法    1：添加节点    2：设置元素的内部文本， 参数就是要设置的内容 3：获取元素的内部文本

addClass: 添加类名

removeClass: 移除类名

attr：该方法可以设置元素的原有属性 $(dom).attr(k, v)  k: 设置的属性  v: 属性值

show: 是显示的意思，只有当元素的状态是display: none的时候才可以使用， 最终的状态的display: block

hide：是隐藏的意思， 与show相反

toggle: 切换显示隐藏

slideDown: 慢慢展开，只有当元素的装态是display: none的时候才可以使用，最终的状态仍然是display: block

slideUp: 与slideDown相反

slideToggle: 切换慢慢展开

fadeIn: 淡入

fadeOut: 淡出，

fadeTo(600, .5): 第一个参数表示完成动画的时间， 第二个参数是指定的透明度

fadeToggle: 切换淡入淡出

each方法用于遍历、循环所匹配到的所有元素， 接收一个参数是函数， 函数中也有一个this，表示遍历到的该对象 ，有一个参数i， 表示遍历到的该对象的序号

### 节点操作: ###

常用:

parent: 只会选中父亲，不会选中爷爷或者是曾爷爷

siblings: 会选中所有的兄弟节点

children: 会选中所有的子节点

eq表示选中元素大队列的排名， 与亲兄弟没有直接关系 eq选中元素的不同，序号也是不相同的

index: 是亲兄弟的排名， 只要是同一个父节点就是亲兄弟

不常用:

next: 会选中下一个兄弟节点

nextAll: 会选中后面所有的兄弟节点

prev: 会选中上一个兄弟节点

prevAll: 会选中前面所有的兄弟节点

parents: 会选中祖先节点

find: 会选中后代节点

### **animate函数** ###

**     **

animate可以接收两个参数

第一个参数： json

第二个参数： 是完成动画的时间

第三参数：回调函数function

能够参与动画的属性

所有数值型的属性都能够参与动画

width

height

border

不能参与动画的属性

backgroundColor

backgroundPosition

Css的一些复杂属性（transform）

border-radius可以参与动画的

delay: 延迟， 只能够在动画之前使用，接收一个参数就是要延迟的时间

animate()、 show(1000)、hide(1000)、 slideDown()、slideUp()、 fadeIn()、 fadeOut()

### 回调函数 ###

异步语句： 类似于animate这种需要花费时间的语句，比如后面还有其他的js语句， 这些语句不会死等着animate执行完之后去执行

回调函数： 异步语句一般都有一个回调函数，当异步语句执行完毕之后要做的事情就是写在回调函数中

### stop方法 常用节流 ###

## **stop** ##

该方法用于让运动的元素立即停止动画， 接收两个参数， 都是布尔值， 默认是fasle

第一个参数： 表示是否清空动画队列

第二个参数： 表示是否立即完成动画

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="width:521.1pt;"> 
    <ol> 
     <li>stop(false, false): 等价于stop() 立即进入下一个动画，立即停止当前动画</li> 
     <li>stop(false, true)： 立即进入下一个动画， 立即完成并停止当前动画</li> 
     <li>stop(true, true)： 清空当前动画队列， 立即完成并停止当前动画</li> 
     <li><span style="color:#ff0000;">stop(true, false): 等价于stop(true) 清空当前动画队列， 立即停止当前动画</span></li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

### **防止动画积累** ###

**         ** 放弃原有动画 立即执行新的动画     用stop(true)来实现

只有当元素不运动的时候， 才接受新的动画        is(“:animated”):表示元素是否具备某种状态

### **创建元素** ###

// 创建一个元素
    var $div = $("<div class='aaa' data-info='nihao'>conetent</div>");

## **上树** ##

jquery中上树的方法有很多种， 可以是父元素选择子元素，可以是子元素选择父元素， 还可以兄弟选择兄弟

父元素选择子元素:

$(dom).append(child): 在dom的后面追加child

$(dom).prepend(child): 在dom的前面追加child

子元素选择父元素：

$(child).appendTo(dom): 将child追加到dom的后面

$(child).prependTo(dom): 将child追加到dom的前面

// 父元素选择子元素 往后面追加
    
    var $list = $("#list");
    
    创建一个li元素
    var li = document.createElement("li");
    设置内部文本
    li.innerHTML = 1;
    
    原生元素
    $list.append(li);
    
    jquery对象
    $list.append($("<li>2</li>"))
    
    html
    $list.append("<li>3</li>");
    
    
    
    
    
    
    
    
    父元素选择子元素 往前面追加
    
    var $list = $("#list");
    
    创建一个li元素
    var li = document.createElement("li");
    设置内部文本
    li.innerHTML = 1;
    
    原生元素
    $list.prepend(li);
    
    jquery对象
    $list.prepend($("<li>2</li>"))
    
    html
    $list.prepend("<li>3</li>");
    
    
    
    
    
    
    子元素选择父元素 往后面追加
    
    var $li1 = $("<li>1</li>");
    var $li2 = $("<li>2</li>");
    var $li3 = $("<li>3</li>");
    
    原生元素
    $li1.appendTo(document.getElementById("list"));
    
    jquery对象
    $li2.appendTo($("#list"));
    
    选择器
    $li3.appendTo("#list");
    
    
    
    
    
    // 子元素选择父元素 往前面追加
    var $li1 = $("<li>1</li>");
    var $li2 = $("<li>2</li>");
    var $li3 = $("<li>3</li>");
    
    // 原生元素
    $li1.prependTo(document.getElementById("list"));
    
    // jquery对象
    $li2.prependTo($("#list"));

兄弟选择兄弟

$(dom).after(element)    往doom后面追加

$(dom).before(element)  往doom前面追加

$(dom).insertBefore(element): 将dom插入到某个元素的前面

$(dom).insertAfter(element): 将dom插入到某个元素的后面

// 创建一个li元素
    var $li = $("<li>999</li>");
    var $li1 = $("<li>000</li>");
    
    // 将创建出来的li插入到four的前面
    $li.insertBefore($("#four"));
    
    // 将创建出来的li1插入到four的后面
    $li1.insertAfter($("#four"));
    
    
    // 在four的前面追加某个元素
    $("#four").before("<li>哈哈</li>");
    
    // 在four的后面追加某个元素
    $("#four").after("<li>嘎嘎</li>");

**wrap 用于将匹配的元素外层多一层元素**

** wrapAll 用于将所有匹配到的元素的外层添加一层元素**

** unwrap 用于将匹配到的元素去掉一层外层元素**

** replaceWith、 replaceAll   **

1.  replaceWith 将匹配到的元素替换成参数元素
2.  replaceAll 将指定的元素替换掉参数元素

** empty 表示清空后代节点， 自己还在**

**remove 表示自杀， 自己和后代都没有了**

**clone方法接收一个参数是bool，默认是false， 天生连同子节点一起复制， 当传递true的时候，连同事件一起复制**

// 给box注册一个点击事件
    $("#box").on("click", function() {
    	alert(123);
    })
    
    // 再次克隆 并且传递true
    $("#box").after($("#box").clone(true));

### **jquery中的快捷尺寸** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

// content
    console.log("content的宽是:", $("#box").width());
    console.log("content的高是:", $("#box").height());
    
    
    //content + padding:
    console.log("innerWidth的值是:", $("#box").innerWidth());
    console.log("innerHeight的值是:", $("#box").innerHeight());
    
    
    //content + padding + border:
    console.log("outerWidth的值是:", $("#box").outerWidth());
    console.log("outerHeight的值是:", $("#box").outerHeight());
    
    
    //content + padding + border + margin:
    console.log("outerWidth(true)的值是:", $("#box").outerWidth(true));
    console.log("outerHeight(true)的值是:", $("#box").outerHeight(true));

定位值：

// 获取元素的定位值
    var $box2_position = $("#box2").position();
    console.log($box2_position);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/a87ee512e5de4642b18e67ee638e866a.png