jQuery知识点记录

太过爱你忘了你带给我的痛 2022-10-27 01:37 249阅读 0赞

#### jQuery:类库(工具箱):宗旨是write less do more，功能：DOM操作，DOM获取，动画，数据交互(ajax),链式调用\*。 ####

### 一、为什么jQuery可以使用链式调用 ###

因为 jQuery一直遵循一个准则：一切不关心返回值的语句都会返回你调用这个方法的jQuery对象本身，才到导致可以使用“链式调用”的方法，就是讲多条语句整合成一条语句。

## 二、jQuery的核心方法 ##

###### 1.在页面中查找与css选择器相匹配的元素,返回相匹配的jQuery对象 ######

$(“css选择器”)

###### 2.将源生JS节点(Node,Nodelist)转换为jQuery对象 ######

$(Node||NodeList)

###### 3.类似于（等价）window.onload事件(但优先级高于window.onload事件) ######

$(function(){        // 当页面加载完毕之后会执行这里的代码    })

###### 4.创建一个jQuery对象 ######

$("HTML代码段")   
       比如：$("<h2 class='hello'>哈喽哇</h2>")

#### `注` ####

如果页面中有两个$(function()\{\})事件，后面的不会覆盖前面的，会先执行前面的，后执行后面的

## 三、jQuery对象的方法 ##

###### 1、html() 获取/修改标签内的内容 ######

###### 2、val() 获取/修改value属性的属性值的内容 ######

addClass() 追加类名

###### 3、removeClass() 删除类名 ######

###### 4、`toggleClass`(“类名”) 删除/追加类名（有这个类名我给你删掉，没有我给你加上） ######

###### 5、 hasClass() 检测元素是否含有某个类名 返回Boolean，true/false6、attr() 设置/获取元素的自定义属性 ######

//设置 jQuery对象.attr(“key”,“value”)  
//获取 jQuery对象.attr(“key”)

###### 6、 remove() 删除元素 (不用找爹，直接删除） ######

举例：  $(".div1").remove()

###### 7、append() 将参数元素插入到调用方法的结束标签之前 ######

要插入的位置.append(插入的元素)  
插入的元素.appendTo(要插入的位置)

let h2 = $("<h2 class='heihei'>我是被捏出来的</h2>")
    $(".aa").append(h2)

###### 8、before() 将参数元素插入到调用方法的元素之前 ######

###### 9、after() 将参数元素插入到调用方法的元素之后 ######

###### 10、index() 返回当前jQuery对象相对于其他兄弟元素在父级元素中的下标 ######

###### 11、 `find(".css选择器") 从元素内部查找与css选择器相匹配的子孙级元素，返回jQuery对象` ######

###### 12、`closest("css选择器") 从调用方法元素开始逐层向上寻找祖先级元素，直到找到某一个与css选择器相匹配的元素为止停止寻找并返回找到的jQuery对象,结果集一定是一个元素。` ######

###### 13、 eq(Number) 从jQuery对象结果集中提取出某一个元素，返回结果不是Node节点是jQuery对象。 ######

###### 14、clone(true) 克隆节点，返回jQuery对象副本。参数传true代表是否连同模板的事件一起克隆 ######

###### 15、show() 显示 ######

###### 16、hide() 隐藏 ######

###### 17、`toggle() 原来是显示就隐藏，原来是隐藏就显示` ######

###### 18、fadeIn(Number,function()\{\}) 渐显 ######

###### 19、fadeOut(Number,function()\{\}) 渐隐 ######

###### 20、fadeToggle(Number,function()\{\}) 原来是显示就隐藏，原来是隐藏就显示 ######

`上拉隐藏，下拉显示`

###### 21、slideDown(Number,function()\{\}) 下拉显示 ######

###### 22、slideUp(Number,function()\{\}) 上拉隐藏 ######

###### 23、slideToggle(Number,function()\{\}) 原来是显示就隐藏，原来是隐藏就显示 ######

###### 24、css() 操作元素的行内属性(传一个字符串是获取，传一个对象是做设置） ######

jQuery对象.css({
    heigth:"300px",
    width:500,
    marginLeft:50,
    backgroundColor:pink
    注：1、如果单位是px，那么可以省掉单位直接写数字，
    jQuery会自动在后面加一个px
       2、backgroundColor省掉后面的“；”如上的例子
    })

###### 25、animate(css对象,时间,回调函数) （操作元素的行内属性动画） ######

## 四、jQuery对象绑定事件 ##

jQuery对象.去on的事件名(function(){ 
    // 指的是源生js对象 this
    })

## 五、jQuery Ajax ##

$.ajax({
                // 请求的地址  
      
            url:"http://127.0.0.1/getName.php",   
             // 请求参数
                data:{  
                      name:"a", 
                       age:18,  
                      sex:"男" 
           },  
             // 请求方式 GET || POST   
            method:"POST",  （不写这句话默认为GET请求）
             // 接收到后端返回成功之后执行的函数  
             success:function(data){   
                    console.log(data)   
            }   })  
    
     // jQuery 发送jsonp请求
       $.ajax({    
           // 请求的地址   
            url:"http://49.235.82.222:8080/recommendGame",    
           // 规定现在不适用Ajax请求，使用jsonp请求    
           dataType:"jsonp",      
         // 请求参数        
       data:{             
          id:"123"      
         },      
         // 接收到后端返回成功之后执行的函数     
          success:function(data){   
                    data.forEach(item=>{    
                           let h2 = $(".template").clone(true); 
                           h2.html(item.name).removeClass("template").fadeIn()   
                    })         
      }, 
          
        // 请求发送之前    
           beforeSend:function(){    
                   console.log(1)     
          }   })

## 六、jQuery尺寸 ##

https://www.w3school.com.cn/jquery/jquery\_dimensions.asp

1、 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。  
2、innerWidth() 方法返回元素的宽度（包括内边距）。

3、innerHeight() 方法返回元素的高度（包括内边距）。

4、outerWidth() 方法返回元素的宽度（包括内边距和边框）。

5、outerHeight() 方法返回元素的高度（包括内边距和边框）。