jQuery入门

  • 什么是jQuery
  • jQuery的使用
  • jQuery选择器
  • jQuery 文档操作方法
  • jQuery遍历
  • jQuery操作CSS样式
  • jQuery事件绑定


什么是jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery的使用

  1. 从网络上引入jQuery库，如下：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  1. 将jQuery库下载到本地：

jQuery库下载地址，选择需要的版本下载即可，下载后将解压后的文件放入项目的JS文件夹中引用即可：

jquery目录控件 jquery代码库_学习

<script src="js/jquery-3.5.1.js"></script>

jQuery选择器

jQuery 选择器基于元素的id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。jQuery 中所有选择器都以美元符号开头：$()。

//标签选择器
    $("p").hide();
    //id选择器
    $("#a").html();
    //class选择器
    $(".class").text();
    //选取带有 href 属性的元素
    $("[href]").href();
    //选取所有 type="button" 的 <input> 元素 和 <button> 元素
    $(":button").onclick(function (){});
    //选取所有 target 属性值不等于 "_blank" 的 <a> 元素
    $("a[target!='_blank']").target();

jQuery 文档操作方法

方法

描述

addClass()

向匹配的元素添加指定的类名。

html()

设置或返回匹配的元素集合中的 HTML 内容。

text()

设置或返回匹配元素的内容。

after()

在匹配的元素之后插入内容。

empty()

删除匹配的元素集合中所有的子节点。

remove()

移除所有匹配的元素。

wrapAll()

把所有匹配的元素用指定的内容或元素包裹起来。

完整表格参考：jQuery 参考手册 - 文档操作

jQuery遍历

for (let i = 0; i < $("p").length; i++) {
        alert($("p")[i].innerHTML);
    }

    $("p").each(function (i, obj) {
        document.write("第" + i + "个元素的文本为" + obj.innerHTML);
    })

    $("p").each(function () {
        alert($(this).text());
    })

遍历函数：jQuery 参考手册 - 遍历

jQuery操作CSS样式

JavaScript

jQuery

对象.style.属性 = “属性值”

css({“属性”:“属性值”，“属性”:“属性值”})//多属性 css(“属性名”,“属性值”);//单个属性

//设置一个CSS样式
    $("p").css("color", "red");
    //设置多个CSS样式，多个属性由大括号包围，其中多个样式由逗号分开，相同获取内容时简写.即可继续赋值
    $("p").css({"color": "blue", "border": "1px solid red", "font-family": "楷体"})
        .html("你好嘿嘿嘿")
        .click(function () {
            alert("qqq");
        });

遍历函数：jQuery - 获取并设置 CSS 类

jQuery事件绑定

$(“选择器”).click(function(){ })；
或
$(“选择器”).on(“click”,function(){});

//方法一：直接绑定事件
    $("p").click(function () {
        $(this).css("color", "green");
    })
    //方法二：可以绑定多个事件
    $("p").on("click  mouseover", function () {
        $(this).css("color", "green");
    })
    //方法二：可以为子标签绑定事件（动态生成的标签需要用这种方法）
    $("p").on("click  mouseover", "span", function () {
        $(this).css("color", "green");
    })