【jQuery基础】

最新推荐文章于 2024-08-21 14:09:37 发布

落雪映青衣、

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量90

点赞数

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

本文链接：https://blog.csdn.net/qq_41975698/article/details/125920619

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript库：jQuery，简化编程

jQuery 是一个JavaScript 库。极大地简化了JavaScript 编程，例如JS原生代码几十行实现的功能，jQuery可能一两行就可以实现，因此得到前端程序猿广泛应用。
官方网站：https://jquery.com
发展至今，主要有三个大版本：
1.x：常用版本
2.x，3.x：除非特殊要求，一般用的少
下载地址：
https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js

jQuery代码编写位置与JS位置一样，但需要先head标签里引入jquery.min.js文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<!--    button引用jquery语法-->
    <button type="button" id="jq">jq</button>
<!--    button引用js语法-->
    <button type="button" id="js">js</button>
<script>
    //jquery语法
    $("#jq").click(function (){
        alert('这是jQuery')
    })
    //js语法
    var a = document.getElementById("js")
    a.onclick=function (){
        alert("这是JavaScript")
    }
</script>
</body>
</html>

选择器

名称	语法	示例
标签选择器	element	$(“h2”)选取所有h2元素
类选择器	.class	$(“.title“)选取所有class为title的元素
ID选择器	#id	$(“#title”)选取id为title的元素
并集选择器	selector1,selector2,…	$(“div,p,.title”)选取所有div、p和拥有class为title的元素
属性选择器		$(“ in p u t [nam e] = ‘ u ser nam e ’”) 选取 in p u t 标签名为 u ser nam e 的元素 < b r >$ (“[href=‘#’]”)选取href值等于“#”的元素

jQuery操作HTML

隐藏和显示元素：
• hide() ：隐藏某个元素
• show() ：显示某个元素
• toggle() ：hide()和show()方法之间切换

<p>这是一断可显示隐藏的文字</p>
<button type="button" id="btn1">隐藏</button>
<button type="button" id="btn2">显示</button>
<button type="button" id="btn3">切换状态</button>
<script>
$("#btn1").click(function (){
    $("p").hide();
})
$("#btn2").click(function (){
    $("p").show();
})
$("#btn3").click(function (){
        $("p").toggle()
})
</script>

获取与设置内容：
• text() 设置或返回所选元素的文本内容
• html() 设置或返回所选元素的HTML内容
• val() 设置或返回表单字段的值

<p id="txt">这是一个<i><b>段落</b></i></p>
<button type="button" id="btn1">显示文本</button>
<button type="button" id="btn2">显示HTML</button>
<p id="test"></p>
<script>
$("#btn1").click(function (){
    x=$("#txt").text();
    $("#test").text(x).css("color","red") //不解析里面带有的标签
})
$("#btn2").click(function (){
    x=$("#txt").html();
    $("#test").html(x).css("color","red") //解析里边带的标签
})
</script>

<h1>欢迎访问图书管理系统</h1>
用户名：<input type="text" id="yhm" name="username">
密码：<input type="password" id="passwd" name="password">
<button type="button" id="btn">查看输入内容</button>
<p id="demo"></p>
<script>
$("#btn").click(function (){
    x=$("#yhm").val()
    y=$("#passwd").val()
    $("#demo").text("用户名："+x+","+"密码 :"+y).css("color","red")

})

设置CSS样式：
• css() 设置或返回样式属性（键值）
• addClass() 向被选元素添加一个或多个类样式
• removeClass() 从被选元素中删除一个或多个类样式
• toggleClass() 对被选元素进行添加/删除类样式的切换操作

<style>
    .cls {
        background-color: aqua;
    }
</style>
<body>
<div id="demo">
    <p>这是一个段落</p>
</div>
<button id="btn">忘段落添加一个样式</button>
<script>
    $("#btn").click(function (){
        $("#demo p").css({"color":"red","font-size":"30px"})
        $("#demo").addClass("cls")
    })
</script>