jQuery知识点记录

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() 方法返回元素的高度（包括内边距和边框）。