jQuery 基础知识

前言

1、jQuery

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

    1
    <script src="https://repo.qianchia.com/jquery/3.6.0/jquery.min.js"></script>
  • 下载资源

1.1 语法

  • 这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。换句话说,写在这里面的 jQuery 代码都是文档加载好之后的。就不会有获取一个还没有加载好的图片这种问题了。

    1
    2
    3
    $(function () {

    });
    1
    2
    3
    $(document).ready(function () {

    });

1.2 通过 id 获取元素

  • jQuery 通过 $("#id") 获取元素节点。需要注意的是,通过 document.getElementById 获取到的是 DOM 里的元素节点。而通过 $("#id") 获取到的是一个 jQuery 对象。

    1
    $("#b1")

1.3 增加事件监听器

  • jQuery 不需要在 HTML 元素上进行操作。这样的好处是,HTML 只需要显示内容,特别是业务复杂起来之后维护 js 代码会更加容易。

    1
    2
    3
    4
    5
    $(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 函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $(function () {
    $("#b1").click(function () {
    $("#d1").css("background-color", "pink"); // 单一样式
    });

    $("#b2").click(function () {
    $("#d2").css({ "background-color": "pink", "color": "green" }); // 多种样式
    });
    });
  • 单一样式:第一个参数是样式属性,第二个参数是样式值。

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

    1
    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

关键字 简介 示例代码
$.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 实例

文章目录
  1. 1. 前言
  2. 2. 1、jQuery
    1. 2.1. 1.1 语法
    2. 2.2. 1.2 通过 id 获取元素
    3. 2.3. 1.3 增加事件监听器
  3. 3. 2、常见方法
  4. 4. 3、CSS
  5. 5. 4、选择器
  6. 6. 5、筛选器
  7. 7. 6、属性
  8. 8. 7、效果
  9. 9. 8、事件
  10. 10. 9、AJAX
  11. 11. 10、数组操作
  12. 12. 11、字符串操作
  13. 13. 12、JSON
  14. 14. 13、对象转换
  15. 15. 14、jQuery 实例
隐藏目录