KlayPeter的学习博客

jQuery 是一个轻量级 JavaScript 库，目的是“写更少的代码，做更多的事”。

特点：

  • 简化了 DOM 操作（增删改查）
  • 更方便处理事件、动画、AJAX
  • 兼容性好，能兼容老版本浏览器（IE）

# 引入 jQuery

方式一：本地导入

官网地址：jQuery (opens new window)

直接在需要使用 jQuery 的页面引入 .js 文件：

<script src=" jQuery.js 文件路径"></script>

方式二：在线导入

我们可以通过在 script 的 src 属性中写一个网址来导入在线的 jquery 代码。

<script src="http://code.jquery.com/jquery-latest.js"></script>

# 基本语法

jQuery 的顶级对象 $

  • $是 jQuery 的别称，在代码中可以使用 jQuery 代替$，但为了方便，通常都使用$。

然后要明白一个区别，就是DOM对象和jQuery对象的区别

DOM对象：用元素js获取过来的对象就是DOM对象

jQuery对象：用jQuery方式获取过来的对象就是jQuery对象，本质：通过$把DOM元素进行封装（采用伪数组的形式存储）

区别：jQuery对象只能使用jQuery方法，反之亦然

相互之间的转换：

  • DOM ---> jQuery

    $('DOM对象');

  • jQuery ---> DOM

    // 有两种方法
$('DOM对象')[index]; // index是索引号

$('DOM对象').get(index);

入口文件

$(document).ready(function() {
  // 页面加载完成后执行
  alert("Hello jQuery!");
});

// 简写
$(function() {
  console.log("页面加载完毕");
});

# jQuery 选择器

$(“选择器”) // 选择器格式与 css 选择器格式一摸一样

  1. 基本选择器
$("#id")         // ID选择器
$(".class")      // 类选择器
$("div")        // 标签选择器
  1. 层级选择器
$("ul li")       // 所有ul内的li
$("ul > li")     // ul的子li
  1. 属性选择器
$("input[type='text']")
$("a[href^='http']")
  1. 过滤选择器
$("li:first")     // 第一个元素
$("li:odd")       // 奇数索引
$("input:checked")// 被选中的
$("input:even")   // 偶数索引
  1. 筛选选择器（方法）
$(".first").parent();    // 查找父亲
$("ul").children(“li”)    // 相当于$(“ul>li”)，子类选择器
$("ul").find(“li”);   // 相当于$(“ul li”)，后代选择器
$(".first").siblings(“li”);	  // 查找兄弟节点，不包括自己本身。
$(".first").next();   // 查找当前元素之后的下一个兄弟
$(".first").nextAll();  // 查找当前元素之后的所有同辈元素
$(".last").prev();   // 查找当前元素之前的上一个兄弟
$("last").prevAll();  // 查找当前元素之前的所有同辈元素
$("div").hasClass(“show”)	//检查当前的元素是否含有某个特定的类，如果有，则返回 true
$("i").eq(2); /// 相当于$(“li:eq(2)”)，index 从0开始

# jQuery DOM 操作

  1. 内容操作
$("#text").text("新内容")
$("#html").html("<b>加粗内容</b>")
$("#input").val("新的输入值")
  1. 属性操作
$("img").attr("src", "new.jpg")
$("input").prop("checked", true)
  1. CSS 操作
$("p").css("color", "red")
$("div").addClass("active")
$("div").removeClass("active")

# 事件处理

1.常用事件绑定

$("#btn").click(function() {
  alert("按钮被点击");
});

$("input").focus(function() {
  $(this).css("background", "#eee");
});
  1. on() 方法绑定多个事件
$("#box").on({
  mouseenter: function() { $(this).css("background", "yellow"); },
  mouseleave: function() { $(this).css("background", "white"); }
});
  1. 事件委托
$("ul").on("click", "li", function() {
  alert("点击了li");
});

  1. 事件切换

    hover([over,]out) 
// over:鼠标移到元素上要触发的函数（相当于 mouseenter）。

// out:鼠标移出元素要触发的函数（相当于 mouseenter）。

  2. 事件处理 off() 解绑事件

    off();  // 解除所有事件
off("click");  // 只解除点击事件
off("click", "li");  // 解除事件委托

  3. 事件处理 one() 绑定一次性事件

  4. 自动触发事件 trigger()

    有些事件希望自动触发，比如轮播图自动播放功能与点击右侧按钮功能一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

    el.click();  // 简写形式
el.trigger("type");  // 自动触发形式
el.triggerHandler("type");  // 自动触发形式，不会触发元素的默认行为

# jQuery 样式操作

操作css的方法

Query 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。

// 参数只写属性名，则是返回属性值
$(this).css("color");

//参数是属性名，属性值，中间由逗号分隔，是一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color","red")  

// 参数可以是对象形式  属性名和属性值用冒号隔开，属性可以不用加引号

设置样式类方法

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

  • 添加类
$("div").addClass("current");
  • 移除类
$("div").removeClass("current");
  • 切换类
$("div").toggleClass("current");

js 中的 className 会覆盖元素原先里面的类名

JQuery 里面的类操作只是对指定类进行操作，不影响原先的类名

# jQuery 动画效果

  1. 显示/隐藏
$("#box").show()
$("#box").hide()
$("#box").toggle()
  1. 滑动动画
$("#panel").slideDown()
$("#panel").slideUp()
$("#panel").slideToggle()
  1. 淡入淡出
$("#box").fadeIn()
$("#box").fadeOut()
$("#box").fadeTo("slow", 0.5)
  1. 自定义动画
$("#box").animate({
  left: "250px",
  opacity: 0.5
}, 1000)

# 属性操作：

设置或获取元素固有属性值 prop()

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

① 获取属性语法

prop("属性")

② 设置属性语法

prop("属性","属性值")

设置或获取元素自定义属性值 attr()

自定义属性就是用户自己给元素添加的属性。比如给li添加index="1"。

① 获取属性语法

attr("属性")

② 设置属性语法

attr("属性","属性值")

数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改DOM 的元素结构，一旦页面刷新，之前存放的数据都将被移除。

① 附加数据语法

data("key","value")  // 向被选元素附加数据

② 获取数据语法

data("key")  // 从被选元素获取数据

# jQuery 内容文本值

① 内部添加

$("ul").append(li);//放到最后面，类似原生 appendChild

② 外部添加

el.before(内容);  // 把内容放到目标元素前面
el.after(内容);  // 把内容放到目标元素后面
  • 内部添加元素后是父子关系
  • 外部添加元素后是兄弟关系

删除元素

el.remove()  // 删除匹配节点（本身）
el.empty()  // 删除匹配节点的子节点
el.html("")  // 相当于 empty()

# AJAX 与 jQuery

  1. 简单 get / post
$.get("data.json", function(data) {
  console.log(data);
});

$.post("submit.php", {name: "Tom"}, function(res) {
  alert(res);
});
  1. 通用 ajax 方法
$.ajax({
  url: "test.php",
  method: "POST",
  data: {username: "mmx"},
  dataType: "json",
  success: function(res) {
    console.log("成功", res);
  },
  error: function(err) {
    console.log("失败", err);
  }
});

七、表单处理

  1. 获取表单值
let username = $("#username").val();
let isChecked = $("#agree").is(":checked");
  1. 阻止默认行为 & 提交事件
$("form").submit(function(e) {
  e.preventDefault(); // 阻止默认提交
  alert("表单被提交");
});

# 进阶技巧

  • 使用 jQuery 插件
<link rel="stylesheet" href="path/to/plugin.css">
<script src="plugin.js"></script>
<script>
  $("#slider").pluginInit();
</script>
  • 使用链式操作：
$("#box").css("color", "red").slideDown(500).fadeOut(300)
  • 自定义插件：
$.fn.highlight = function() {
  this.css("background", "yellow");
  return this;
};

$("p").highlight();

几个技巧

排他思想

$(function(){
    $("button").click(function(){
        $(this).css(); // 对自己设置变化
        $(this).sibings("button").css();  // 给其他兄弟去掉变化
    })
})

链式编程

$(function(){
    $("button").click(function(){
        $(this).css().sibings("button").css()  // 对自己设置变化,给其他兄弟去掉变化
    })
})

隐式迭代

CSS_animation