jQuery基础

soni321

已于 2022-04-03 11:38:28 修改

阅读量212

点赞数

分类专栏：前端基础文章标签： jquery

于 2022-04-02 22:45:57 首次发布

本文链接：https://blog.csdn.net/soni321/article/details/123929185

版权

前端基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了jQuery的基本概念、选择器用法、元素操作（如内容、属性、样式）、元素遍历、事件机制，以及动画效果实例。通过jQuery，简化了JavaScript编程并演示了如何在页面加载后处理DOM元素。

摘要由CSDN通过智能技术生成

1. 各大网站对JQuery的定义如下：

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。

官方网址：

https://jquery.com/

在html中引入该js文件

<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

注意：

$(function(){代码}); 语句体代表的是当页面完全加载完毕之后执行该语句
console.log(变量)；代表的是在浏览器控制台输出该变量的值

2. 常用选择器

id选择器语法：$(#id) 说明：
元素选择器语法：$(元素名)
class选择器语法：$(.class名称)
组合选择器语法：$(selector1，selector2，selector3…)
层级选择器（子选择器）语法：$(父节点子节点)
层级选择器（指定的子选择器）语法：$(父节点子节点).eq(num)
定位选择器语法：$(节点描述1节点描述2…)
属性选择器语法：$(“[属性=‘属性值’]”)

示例：

console.log($("#username"))
console.log($("textarea"))
console.log($(".sd"))
console.log($("[type='radio']"))
console.log($("input#username"))
console.log($("#ff select"))
console.log($("select option"))
console.log($("select option").eq(1).val())

3. JQuery操作元素

操作元素内容

元素对象.val():用来获取元素的value属性的值
元素对象.val(值):用来设置元素的value属性的值
元素对象.html():用来获取元素对象包裹的内容，可解析为html
元素对象.html(html代码):用来设置元素对象包裹的内容，可解析为html
元素对象.text():用来获取元素对象包裹的内容，无法解析为html
元素对象.text(内容):用来设置元素对象包裹的内容，无法解析为html

操作元素的属性

元素对象.attr(属性名称)：用来获取元素对象的属性值
元素对象.attr(属性名称，属性值)：用来添加元素的属性
元素对象.removeAttr(属性名称)：用来删除元素的属性
元素对象.addClass(class属性名称)：用来添加class属性值
元素对象.removeClass(class属性名称)：用来删除classs属性值

操作元素的样式

元素对象.css(样式名，样式值)

JQuery操作元素的文档结构

内部插入语法：元素对象.append(html代码)：用来给元素对象内部向后追加填充其他元素
外部插入语法：元素对象.after(html代码)：用来给元素对象向后后追加其他元素

4. JQuery遍历元素

查找父元素

子元素对象.parent():该方法返回子元素的直接父元素的对象
子元素对象.parents()：该方法返回子元素的所有父元素
子元素对象.parents(元素)：该方法返回指定的父元素对象
示例

console.log($("#ff").parent())
console.log($("#ff").parents())
console.log($("#ff").parents("body"))

查找子元素

父元素对象.children() :该方法返回父元素对象的所有直接子元素
父元素对象.children(元素) :该方法返回父元素对象的指定直接子元素
父元素对象.find(元素)：该方法返回父元素的指定子元素对象
示例

console.log($("#ff").children())
console.log($("#ff").children("[value = '男']"))
console.log($("#ff").children("[value = '清华大学']"))  找不到
console.log($("#ff").find("[value = '清华大学']"))

查找兄弟元素

元素对象.next()：该方法返回元素对象紧挨着的下一个元素对象
元素对象.prev()：该方法返回元素对象紧挨着的上一个元素对象
示例

console.log($("[value = '足球']").next())
console.log($("[value = '足球']").next().next())
console.log($("input[value = '女']").prev())

过滤指定元素

元素对象集合.eq(index)：该方法返回元素集合中的指定下标的元素对象，index从0开始，类似于数组下标
选择器都有一个 length的属性，代表查找到的元素的个数，可以用作下标的循环
示例

var ch = $("#ff").find("input");
console.log(ch.length)
for (var i = 0; i < ch.length; i++) {
	console.log(ch.eq(i));
}

5. JQuery事件机制

jQuery的事件机制，指的是jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。

1. 事件绑定

简单事件注册

$("input[value='提交']").click(function () {
	 alert("单击")
});

on注册事件的语法，可以绑定多个事件：
events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
handler，事件处理函数

$(selector).on(events[,selector][,data],handler);

示例（两种方法效果一致）

$("input[value='重置']").on("click",function () {
	alert("重置")
});
$("#ff").on("click","input[value='重置']",function () {
	alert("重置")
});

2. 事件解绑

解绑匹配元素的所有事件

$(selector).off();

示例

$("input[value='重置']").on("click",function () {
	$("input[value='提交']").off()
});

解绑匹配元素的所有click事件

$(selector).off("click");

3. 触发事件

$(selector).click(); 
$(selector).trigger("click");

示例

$("input[value='重置']").on("click",function () {
	$("input[value='提交']").click()
});

6. JQuery动画效果

元素对象.show()：显示该元素对象
元素对象.hide()：隐藏该元素对象
元素对象.toggle()：hide() 和 show() 方法之间的切换
示例

var buttons = $("#picture input");
buttons.eq(0).click(function () {
	$(".box").show("slow")
});
buttons.eq(1).click(function () {
	$(".box").hide("slow")
});
buttons.eq(2).click(function () {
	$(".box").toggle(1000)
});

示例所用html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>JQuery</title>
    <script src="../js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //使用JQuery为用户名文本框赋值
            // $("#username").val("张三");
            // console.log($("#username"))
            // console.log($("textarea"))
            // console.log($(".sd"))
            // console.log($("[type='radio']"))
            // console.log($("input#username"))
            // console.log($("#ff select"))
            // console.log($("select option"))
            // console.log($("select option").eq(1).val())
            // $('body').css("background-color","blue")
            // $("#ff").append('<input type="button" value="按钮">')
            // $("h5").after('<h6>详细信息<h6>')
            // console.log($("#ff").parent())
            // console.log($("#ff").parents())
            // console.log($("#ff").parents("body"))
            // console.log($("#ff").children())
            // console.log($("#ff").children("[value = '男']"))
            // console.log($("#ff").children("[value = '清华大学']"))
            // console.log($("#ff").find("[value = '清华大学']"))
            // console.log($("[value = '足球']").next())
            // console.log($("[value = '足球']").next().next())
            // console.log($("input[value = '女']").prev())
            // var ch = $("#ff").find("input");
            // console.log(ch.length)
            // for (var i = 0; i < ch.length; i++) {
            //     console.log(ch.eq(i));
            //     ch.eq(i).css("background-color","red");
            // }
            // $("input[value='提交']").click(function () {
            //     alert("单击")
            // });
            // $("input[value='重置']").on("click",function () {
            //     $("input[value='提交']").off()
            // });
            // $("input[value='重置']").on("click",function () {
            //     $("input[value='提交']").click()
            // });
            // $("#ff").on("click","input[value='重置']",function () {
            //     alert("重置")
            // });
            var buttons = $("#picture input");
            buttons.eq(0).click(function () {
                $(".box").show("slow")
            });
            buttons.eq(1).click(function () {
                $(".box").hide("slow")
            });
            buttons.eq(2).click(function () {
                $(".box").toggle(1000)
            });
        });
    </script>
</head>
<body>
<div style="background-color: blueviolet;">
    <form action="#" method="post" id="ff">
        <h5>注册信息</h5>
        用户名：<input type="text" name="username" id="username" value=""/><span id="usernameSpan"></span><br/>
        性&nbsp;&nbsp;&nbsp;&nbsp;别：
        <input type="radio" name="sex" value="男" checked="checked"/>男
        <input type="radio" name="sex" value="女"/>女<span></span><br/>
        爱&nbsp;&nbsp;&nbsp;&nbsp;好:<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby"
                                                                                            value="游泳"/>游泳
        <input type="checkbox" name="hobby" value="棋牌"/>棋牌<span></span><br/>
        毕业院校：<select name="school" class="sd" id="school">
        <option value="--请选择--">--请选择--</option>
        <option value="清华大学">清华大学</option>
        <option value="北京大学">北京大学</option>
        <option value="挖掘机技术学院">挖掘机技术学院</option>
    </select><span></span><br/>
        个人简介：<textarea rows="3" cols="20" name="introduce" id="introduce"></textarea><span></span><br/>
        <input type="button" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="" id=""
                                                                                         value="重置"/>
    </form>
    <div id="picture">
        <input type="button" value="显示" />
        <input type="button" value="隐藏" />
        <input type="button" value="切换" />
        <div class="box">
            <img src="../img/logo.jpg" />
        </div>
    </div>
</div>
</body>

</html>