jQuery 总结

1.选择器

     选择器：jQuery使用CSS选择器来选取HTML元素。例如，使用$("#id")选择具有特定id的元素，使用$(".class")选择具有特定类的元素，使用$("tag")选择特定标签的元素等。

选择器	示例	说明
全局选择器	$('*')	选择所有元素
标签选择器	$('p')	选择所有的p元素
ID选择器	$('#top')	选择所有id属性值为top的元素
Class选择	$('.box')	选择所有class属性值中包含box类名的元素

1. 元素选择器：使用元素的标签名来选择元素，例如$("div")会选择文档中的所有<div>元素。

2. 类选择器：使用类名来选择元素，以.开头，例如$(".my-class")会选择所有具有my-class类的元素。

3. ID选择器：使用元素的ID来选择元素，以#开头，例如$("#my-id")会选择具有my-id ID的元素。

4. 属性选择器：使用元素的属性来选择元素，例如$("[name='my-name']")会选择具有name属性值为my-name的元素。

5. 后代选择器：使用空格分隔的多个选择器，选择元素的后代元素，例如$("div p")会选择所有<div>元素中的<p>元素。

6. 子元素选择器：使用>符号分隔的多个选择器，选择元素的直接子元素，例如$("div > p")会选择所有直接位于<div>元素内的<p>元素。

2.DOM操作

      DOM操作：jQuery提供了一系列用于操作、遍历和修改DOM元素的方法。例如，使用text()方法来获取或设置元素的文本内容，使用html()方法来获取或设置元素的HTML内容，使用append()方法将内容添加到元素的末尾等。

1. 获取元素：使用选择器来获取指定元素，例如：$("p")获取所有<p>元素，$("#myId")获取id为myId的元素，$(".myClass")获取所有class为myClass的元素。

2. 修改元素内容：使用text()方法和html()方法来修改元素的文本内容和HTML内容。例如：$("p").text("新文本内容")将所有<p>元素的文本内容修改为"新文本内容"。

3. 修改元素属性：使用attr()方法来修改元素的属性值。例如：$("#myId").attr("src", "newimage.jpg")将id为myId的元素的src属性值修改为"newimage.jpg"。

4. 添加和移除元素：使用append()方法、prepend()方法、after()方法和before()方法来在指定元素内添加新元素或在指定元素前后插入新元素。使用remove()方法和empty()方法来移除元素或清空元素的内容。

5. 修改样式：使用addClass()方法和removeClass()方法来添加和移除元素的CSS类。使用css()方法来修改元素的样式属性。

6. 遍历元素：使用each()方法来遍历指定元素的集合，并对每个元素执行相同的操作。

7. 事件处理：使用on()方法来绑定事件处理函数，使用off()方法来解绑事件处理函数。

方法	描述
(selector).parent(filter)	返回元素的直接父元素。如果设置选择器，则只会返回匹配选择器的父元素。filter可选，规定缩小搜索父元素范围的选择器表达式。
(selector).parents(filter)	返回元素的祖先元素。如果设置选择器，则只会返回匹配选择器的祖先元素。filter可选，规定缩小搜索祖先元素范围的选择器表达式。
(selector).children(filter)	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。如果设置选择器，则只会返回匹配选择器的子元素。<br />filter可选。规定缩小搜索子元素范围的选择器表达式。
(selector).find(filter)(重点)	返回元素中匹配选择器的后代元素。<br />filter必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。
(selector).prev(filter)	返回元素前面的直接兄弟元素。
(selector).prevAll(filter)	返回元素前面的所有兄弟元素。
(selector).next(filter)	返回元素后面的直接兄弟元素。
(selector).nextAll(filter)	返回元素后面的所有兄弟元素。如果设置选择器，则只会返回匹配选择器的兄弟元素。
(selector).siblings(filter)(重点)	返回元素前后的所有兄弟元素。如果设置选择器，则只会返回匹配选择器的兄弟元素。

3.事件处理

    事件处理：jQuery是一个JavaScript库，用于简化HTML文档的操作、事件处理、动画效果和AJAX等功能。jQuery提供了一套方便的事件处理方法，使开发人员能够轻松地处理各种事件。

常用的jQuery事件处理方法：

1. click()：处理元素的点击事件。

$("button").click(function(){
  // 处理点击事件
});

2. dblclick()：处理元素的双击事件。

$("button").dblclick(function(){
  // 处理双击事件
});

3. mouseover()：处理鼠标移入元素的事件。

$("button").mouseover(function(){
  // 处理鼠标移入事件
});

4. mouseout()：处理鼠标移出元素的事件。

$("button").mouseout(function(){
  // 处理鼠标移出事件
});

5. keypress()：处理键盘按下事件。

$("input").keypress(function(){
  // 处理键盘按下事件
});

6. submit()：处理表单提交事件。

$("form").submit(function(){
  // 处理表单提交事件
});

7. change()：处理元素的值发生改变事件。

$("input").change(function(){
  // 处理值改变事件
});

4.动画效果

    动画效果：jQuery提供了一系列用于添加动画效果的方法。

1. 显示和隐藏元素：

   • show()：显示元素
   • hide()：隐藏元素
   • toggle()：在显示和隐藏之间切换元素

2. 渐变效果：

   • fadeIn()：淡入元素
   • fadeOut()：淡出元素
   • fadeToggle()：在淡入和淡出之间切换元素
   • fadeTo()：将元素淡入到指定的透明度

3. 滑动效果：

   • slideDown()：向下滑动显示元素
   • slideUp()：向上滑动隐藏元素
   • slideToggle()：在向下和向上滑动之间切换元素

4. 自定义动画：

   • animate()：使用CSS属性和值来创建自定义动画

     $("#btn").click(function() {
       $("#element").fadeOut();
     });
     

5.AJAX

     AJAX：jQuery提供了一系列用于发送和接收AJAX请求的方法。

$.get()方法来发送GET请求

$.post()方法来发送POST请求

$.ajax({
  url: 'your_url_here',
  method: 'GET', // 请求方法，可以是GET、POST、PUT、DELETE等
  data: { param1: 'value1', param2: 'value2' }, // 发送到服务器的数据，可以是对象或字符串
  dataType: 'json', // 期望从服务器返回的数据类型，可以是json、xml、html、text等，默认为智能猜测
  success: function(response) {
    // 请求成功时的处理逻辑
    console.log(response);
  },
  error: function(xhr, status, error) {
    // 请求失败时的处理逻辑
    console.log(error);
  }
});

$.ajax({
  url: 'api/example',
  type: 'POST',
  data: { name: 'John', age: 25 },
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});

6.插件

     插件：jQuery有很多第三方插件可用于扩展其功能。

1. jQuery UI：一个功能强大的用户界面库，包括拖放、排序、选择、自动完成等功能。

2. Slick Carousel：一个响应式的轮播插件，可以创建漂亮的轮播图。

3. FullCalendar：一个用于创建可定制的日历和日程安排的插件。

4. DataTables：一个强大的表格插件，可以实现数据排序、分页、搜索等功能。

5. FlexSlider：一个灵活的响应式图片轮播插件。

6. Magnific Popup：一个功能强大的响应式弹窗插件，可以显示图片、视频、地图等内容。

7. Select2：一个可自定义的下拉列表插件，支持搜索、多选等功能。

8. jQRangeSlider：一个可定制的范围选择插件，用于选择日期、价格范围等。

9. Animate.css：一个用于添加动画效果的CSS库，可以实现淡入、滑动、旋转等动画效果。

10. jQWidgets：一个功能丰富的UI组件库，包括图表、表格、按钮等组件。