jQuery知识点总结

1.jQuery的入口函数

$(function () {
  $('div').hide()
})

1. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装

2. 相当于原生js中的DOMContentLoaded

3. 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码

2.jQuery的顶级对象$

1. $是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$.
2. $时jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

3.DOM对象和jQuery对象

3.1 区别

• 使用原生js获取到的元素对象称之为DOM对象
• 使用$()获取到的元素对象称之为jQuery对象
• 不同的对象只能调用各自相应的方法

3.2 对象之间的转换

因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用

1. DOM对象转换为jQuery对象：$(DOM对象)
2. jQuery对象转换为DOM对象（两种方式）

$('div')[index]  // index 是索引号

$('div').get(index)  // index 是索引号

4.jQuery 常用API

4.1 jQuery 基础选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

$('选择器')  // 里面选择器直接写CSS选择器即可，但是要加引号

4.1.1 隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

4.1.2 家族选择器

• 操作子元素

$(this).children("ul");

• 操作父元素

$(this).parent("ul");

• 操作兄弟元素，除自己之外的所有兄弟元素

$(this).siblings("li");

4.2 样式操作

1. 参数只写属性名，则是返回属性值

$(this).css("color");

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("color","red");
$(this).css("height",200);

3. 参数是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性名可以不用加引号

$(this).css({"color":"white","font-size":"20px"});

4.3 设置类样式

作用等同于以前的classList， 可以操作类样式，注意操作类里面的参数不要加点。

1. 添加类

$("div").addClass("类名");

2. 移除类

$("div").removeClass("类名");

3. 切换类

$("div").toggleClass("类名");

4.4 动画队列及其停止排队方法

1. 动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。
2. 停止排队stop()
   • stop()方法用于停止动画或效果
   • 注意：stop()要写在动画或者效果的前面，相当于停止结束上一次的动画。

$('.head div').hover(function () {
            $(this).children('ul').stop().slideToggle()
        })

4.5 自定义动画

1. 语法

animate(params,[speed],[easing],[fn])

2. 参数
   • params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
   • speed：三种预定速度之一的字符串（“slow”，“normal”，or，“fast”）或表示动画时长的毫秒数值（如：1000）
   • easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”。
   • fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

4.6 设置或获取元素固有属性值

prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。

1. 获取元素的语法

$(this).prop('属性')

2. 设置属性语法

$(this).prop('属性','属性值')

attr()

用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index=‘1’

1. 获取属性语法

$(this).attr('属性')  //类似原生 getAttribute()

2. 设置属性语法

$(this).attr('属性','属性值')  //类似原生 setAttribute()

4.7 内容文本值

主要针对元素的内容还有表单的值操作

1. 普通元素内容html()(相当于原生innerHTML)

$(this).html()  //获取元素的内容
$(this).html('内容') // 修改

5.Juqery封装的AJAX方法

5.1 加载load()

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$(selector).load(URL,data,callback);

URL 必需参数规定您希望加载的文件地址。

data 可选参数规定与请求一同发送的查询字符串键/值对集合。

callback 可选参数是 load() 方法完成后所执行的函数名称。

示例：

$(function () {
  $('button').click(function () {
    $('div').load('test.txt')
  })
})

5.2 get请求和post请求

5.2.1 get请求

语法：

$.get(url, [data], [callback]);  // 带有中括号的参数表示可以省略

参数介绍：

参数名	是否可省略	参数类型	参数作用
url	不可省略	string	规定你请求的url
data	可省略	object	请求资源期间要携带的参数
callback	可省略	function	请求成功后所执行的函数名

案例：

// 发送get请求，请求 bookname 为 '西游记' 的数据
$.get('http://www.liulongbin.top:3006/api/getbooks', { bookname: '西游记' }, function (res) {
  console.log(res);  // res 是服务器返回的数据
})

5.5.2 post请求

语法：

$.post(url, [data], [callback]);  // 带有中括号的参数表示可以省略

参数介绍：

参数名	是否可省略	参数类型	参数作用
url	不可省略	string	规定你请求的url
data	可省略	object	要提交的数据
callback	可省略	function	请求成功后所执行的函数名

案例：

// 定义url
let url = 'http://www.liulongbin.top:3006/api/addbooks'  // 服务器问题，无法请求
// 定义data数据
let data = {
  bookname: '富婆成长计',
  author: 'tuoni',
  publisher: '广东出版社'
}
// post请求
$.post(url, data, function (res) {
  console.log(res);
})

5.2.3 ajax请求

语法以及参数：

$.ajax({
  type: '',  // 请求的方式，例如 'GET' 或 'POST'
  url: '',  // 请求的URL地址
  data: {},  // 这次请求要携带的数据
  success： function(res) {}  // 请求成功之后的回调函数
})