jQuery 基础知识

前言

• jQuery 是一个 JavaScript 的框架，是对 JavaScript 的一种封装。

• 通过 jQuery 可以非常方便的操作 HTML 的元素。

• jQuery 极大地简化了 JavaScript 编程。

• jQuery 官网

• jQuery 教程（w3cschool）

• jQuery 教程（runoob）

• jQuery 合集

• jQuery 快速入门

• jQuery UI 教程

• jQuery EasyUI 教程

• jQuery Mobile 教程

1、jQuery

• 要使用 jQuery 需要导入一个第三方的 JavaScript 库 jquery.min.js，并在 HTML 文件中引用。

  <script src="https://repo.qianchia.com/jquery/3.6.0/jquery.min.js"></script>

• 下载资源

  • Staticfile CDN

  • cdnjs

  • jsDelivr

1.1 语法

• 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

• 换句话说，写在这里面的 jQuery 代码都是文档加载好之后的。

  $(function () {
  
  });

  $(document).ready(function () {
  
  });

1.2 通过 id 获取元素

• jQuery 通过 $("#id") 获取元素节点。

• 需要注意的是，通过 document.getElementById 获取到的是 DOM 里的元素节点。

• 而通过 $("#id") 获取到的是一个 jQuery 对象。

  $("#b1")

1.3 增加事件监听器

• jQuery 不需要在 HTML 元素上进行操作。

• 这样的好处是，HTML 只需要显示内容，特别是业务复杂起来之后维护 js 代码会更加容易。

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

2、常见方法

• 常见方法

关键字	简介	示例代码
val	取值	$("#input1").val();
html	获取元素内容，如果有子元素，保留标签	$("#d1").html();
text	获取元素内容，如果有子元素，不包含子元素标签	$("#d1").text();

3、CSS

• 对 CSS 样式的操作。

关键字	简介	示例代码
addClass	增加 class	$("#d").addClass("pink"); // pink 为样式类名
removeClass	删除 class	$("#d").removeClass("pink");
toggleClass	切换 class。 切换指的是：如果存在就删除，如果不存在就添加。	$("#d").toggleClass("pink");
css	css 函数。 通过 css 函数 直接设置样式。	$("#d1").css("background-color", "pink");

• css 函数

  $(function () {
      $("#b1").click(function () {
          $("#d1").css("background-color", "pink");                           // 单一样式
      });
  
      $("#b2").click(function () {
          $("#d2").css({ "background-color": "pink", "color": "green" });     // 多种样式
      });
  });

• 单一样式：第一个参数是样式属性，第二个参数是样式值。

  css(property, value);

• 多种样式：参数是 {} 包含的属性值对。属性值对之间用 逗号 , 分割。属性值之间用 冒号 ; 分割。属性和值都需要用引号。

  css({p1: v1, p2: v2});

4、选择器

• jQuery 有多达数十种选择器。

关键字	简介	示例代码
$(“tagName”)	元素	$("div")
$(“id”)	id	$("#d1")
$(“className”)	类	$(".d")
$(“selector1 selector2”)	层级	$("div#d3 span")
:first :last	最先最后。满足选择器条件的第一个或最后一个元素	$("div:first")
:odd :even	奇偶。满足选择器条件的奇数或偶数元素 因为是基零的，所以第一排的下标其实是 0 (是偶数)	$("div:odd")
:hidden :visible	可见性。满足选择器条件的不可见或可见的的元素	$("div:visible")
[attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value]	属性	$("div[id]") $("div[id='pink']")
:input :button :radio :checkbox :text :file :submit :image :reset	表单对象
:enabled :disabled :checked :selected	表单对象属性
this	当前元素	$(this)

5、筛选器

• 筛选器指的是在已经通过选择器选中了元素后，在此基础上进一步选择。

关键字	简介	示例代码
first() last() eq(num)	第一个 最后一个 第几个。num 基 0	$("div").first()
parent() parents()	父。选取最近的一个父元素 祖先。选取所有的祖先元素	$("#currentDiv").parent()
children() find()	儿子。紧挨着的子元素 后代。必须使用参数 selector	$("#currentDiv").find("div")
siblings()	同级 (同胞)	$("#currentDiv").siblings()

6、属性

• 属性

关键字	简介	示例代码
attr	获取	$("#h").attr("align");
attr(属性, 值)	修改	$("#h").attr("align", "right");
removeAttr	删除	$("#h").removeAttr("align");

• prop 与 attr 的区别

  • 与 prop 一样 attr 也可以用来获取与设置元素的属性。

  • 区别在于，对于自定义属性和选中属性的处理。选中属性指的是 checked,selected 这 2 种属性。

    • 对于自定义属性 attr 能够获取，prop 不能获取。
    • 对于选中属性：
      • attr 只能获取初始值， 无论是否变化。
      • prop 能够访问变化后的值，并且以 true | false 的布尔型返回。

  • 所以在访问表单对象属性的时候，应该采用 prop 而非 attr。

7、效果

• 效果

关键字	简介	示例代码
show hide toggle	显示 隐藏 切换 实现也可以加上毫秒数，表示延时操作，比如 show(2000)	div.hide(); $("div").hide();
slideUp slideDown slideToggle	向上滑动 向下滑动 滑动切换 也可以加上毫秒数，表示延时操作，比如 slideUp(2000)	div.slideUp(); $("div").slideUp();
fadeIn fadeOut fadeToggle fadeTo	淡入 淡出 淡入淡出切换 指定淡入程度 也可以加上毫秒数，表示延时操作，比如 fadeIn(2000) fadeTo 跟的参数是 0-1 之间的小数。0 表示不淡入，1 表示全部淡入	div.fadeIn(); $("#d1").fadeTo("slow", 0.2);
animate	自定义动画效果。第一个参数为 css 样式，第二个参数为延时毫秒	div.animate({left: '0px', top: '50px', height: '50px'}, 2000);

8、事件

• 事件

关键字	简介	示例代码
$(document).ready() $() load()	加载。 图片加载用 load() 函数	$(document).ready(function() { }); $("#img").load(function() { });
click() dblclick()	点击。只有双击鼠标才能造成 dblclick 事件 单击 双击	$("#b").click(function(){ });
keydown() keypress() keyup	键盘。 按下键盘 按住键盘 键盘弹起 通过 event 对象的 which 属性获取键盘的值	$("#i").keyup(function(e){ }); e.which
mousedown() mouseup() mousemove() mouseenter() mouseover() mouseleave() mouseout()	鼠标 鼠标按下 鼠标弹起 鼠标进入，每移动一下都会被调用 鼠标进入，调用一下，在其中移动，不调用，经过其子元素不会被调用 鼠标进入，调用一下，在其中移动，不调用，经过其子元素会被调用 鼠标离开，经过子元素不会被调用 鼠标离开，经过子元素会被调用	$("#move").mousemove(function() { });
focus() blur()	焦点。 获取焦点 失去焦点	$("input").focus(function(){ });
change()	改变。内容改变 对于文本框，只有当该文本失去焦点的时候，才会触发 change 事件	$("#input1").change(function() { }); var text = $(this).val();
submit()	提交。提交 form 表单	$("#form").submit(function() { });
on()	绑定事件。 以上所有的事件处理，都可以通过 on() 绑定事件来处理 $("selector").on("event", function);	$("#b").on("click", function() { });
trigger()	触发事件。 自动触发事件，而不是通过去手动触发	$("#b").trigger("dblclick");

9、Ajax

• jQuery 也有对 Ajax 的支持，使得其对 Ajax 的操作简化了很多。

关键字	简介	示例代码
$.ajax()	提交 Ajax 请求	$.ajax({ url: page, data:{"name": value}, success: function(result) { } });
$.get()	使用 get 方式提交 Ajax	$.get( page, {"name": value}, function(result) { });
$.post	使用 post 方式提交 Ajax	$.post( page, {"name": value}, function(result) { });
load()	最简单的调用 Ajax 的方式	$("#id").load(page, [data]); // id: 用于显示 Ajax 服务端文本的元素 Id
serialize()	格式化 form 下的输入数据	var data = $("#form").serialize();

10、数组操作

• 数组操作

关键字	简介	示例代码
$.each()	遍历。遍历一个数组 第一个参数是数组 第二个参数是回调函数 i 是下标，n 是内容	$.each(a, function(i, n) { });
$.unique()	去除重复。去掉重复的元素 执行之前，要先调用 sort 对数组的内容进行排序	a.sort(); $.unique(a);
$.inArray()	是否存在。 返回元素在数组中的位置，如果不存在返回 -1	$.inArray(9, a);

11、字符串操作

• 字符串操作

关键字	简介	示例代码
$.trim()	去除首尾空白	$.trim(" Hello jQuery ");

12、JSON

• JSON

关键字	简介	示例代码
$.parseJSON()	将 JSON 格式的字符串，转换为 JSON 对象	var s = "{\"name\": \"盖伦\", \"hp\": 616}"; var gareen = $.parseJSON(s);

13、对象转换

• 对 jQuery 对象和 DOM 节点对象进行互相转换。

关键字	简介	示例代码
get(0) [0]	jQuery 对象转 DOM 对象	var div = $("#d"); var d = div[0];
$()	DOM 对象转 jQuery 对象	var div = document.getElementById("d"); var d = $(div);

14、jQuery 实例

• jQuery 实例