Jquery入门

庄弯弯

已于 2023-07-24 14:29:03 修改

阅读量197

点赞数 2

文章标签： jquery java 学习 javascript

于 2023-07-23 00:24:00 首次发布

本文链接：https://blog.csdn.net/m0_46450674/article/details/131873166

版权

JQuery入门

一、什么是JQuery
- 1.定义
- 2.语法格式
二、DOM元素操作
- 1.获取DOM元素
- 2.对DOM元素进行操作
三、对于结点的操作

一、什么是JQuery

1.定义

Jquery是Java Script的一个框架，帮我们简化js的书写，封装了很多的api，并且提供方法库，供我们使用。

2.语法格式

$(selectoror).方法()
使用之前一定要先导入jquery的js文件（可以去Jquery的官网下载），否则无法使用Jquery的语法

二、DOM元素操作

1.获取DOM元素

	//$("css选择器")
	//标签选择器
	$("p")
	//类选择器
	$(".box")
	//id选择器
	$("#account")

2.对DOM元素进行操作

（1）获取DOM元素的内容（值/文字）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery练习</title>
    <script src="static/js/jquery.min.js"></script>
</head>
<body>
    <p>今天来学习JQuery</p>
    <div>
        <div>
            <span>账号:</span>
            <input type="text" id="account">
        </div>
        <div>
            <span>密码:</span>
            <input type="password" id="password">
        </div>
        <div>
            <input id="login" type="button" value="登录">
        </div>
    </div>
</body>
</html>

获取p标签里的内容 and 获取账号输入框里的内容

 //一般方法为空，则为获取。若方法内有参数，则为设置
    //获取p标签的文字
    console.log($("p").text());//等同于js的console.log(document.getElementById("p").innerText);
    $("#login").click(function (){
        console.log($("#account").val())//获取账号输入框的值
    });

    （2）修改DOM元素的内容（值/文字）
    一般方法为空，则为获取。若方法内有参数，则为设置
    修改p标签里的内容 and 点击登录后修改账号输入框里的内容为“123”

	$("p").css("color");//返回第一个p标签的color值
    console.log($("p").css("color"));
    //修改p标签的文字
    $("p").text("我修改内容啦！")//等同于js的console.log(document.getElementById("p").innerText);
    $("p").css("color","red");//修改p标签的样式，字体为红色
    $("#login").click(function (){
        //点击登录按钮后，会给账号输入框设置“123”
        $("#account").val("123");//设置账号输入框的值
    });

如果要标签要添加多个样式要怎么办呢？

	/*$(selector).css({
		//要修改的样式（键值对形式）
	})*/
	//修改标签的多个样式
    $("p").css({
        "color":"red",
        "font-size":"30px",
        //不加双引号则用驼峰命名
        fontFamily:"楷体",
    })

（3）DOM元素的类选择器进行操作
①添加类选择器(addClass)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery练习</title>
    <script src="static/js/jquery.min.js"></script>
    <style>
        .test{
            display: none;
        }
    </style>
</head>
<body>
    <p>今天来学习JQuery</p>
</body>
</html>

	//给p标签添加"test"类选择器
    $("p").addClass("test");

②删除类选择器(removeClass)

	//删除p标签的"test"类选择器
    $("p").removeClass("test");

③是否存在该类选择器(hasClass)

	//判断p标签是否存在"test"类选择器
    $("p").hasClass("test");
    console.log($("p").hasClass("test"));

    （4）DOM元素的attr()和prop()
    ①attr()
    定义：专门操作熟属性为非布尔值的属性（如：width，height），并且读写一体（根据参数而定）。
    格式：$(selector).arrt(“属性名”)和$(selector).arrt(“属性名”,“修改的值”);

	//获取p标签的宽度
	$("p").attr("width");
	console.log($("p").attr("width"));
	//修改p标签的宽度
	$("p").attr("width","200px");
	console.log($("p").attr("width"));

    ②prop()
    定义：专门操作熟属性为布尔值的属性（如：checked，disabled），并且读写一体（根据参数而定）。
    格式：$(selector).prop(“属性名”)和$(selector).prop(“属性名”,“修改的值”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery练习</title>
</head>
<body>
    <input  type="checkbox" checked>
    <script src="static/js/jquery.min.js"></script>
  	<script>
  	//复选框
       if($("input[type=checkbox]").prop("checked")){
          $("input[type=checkbox]").prop("checked",false);
       }else{
          $("input[type=checkbox]").prop("checked",true);
       }
  	</script>  
</body>
</html>

三、对于结点的操作

1.创建结点

格式：$(“HTML结点”)

var span = $("<span style='color: red'>我是span标签，新创建的结点哦！<span>");//创建结点的内容

2.添加结点

    格式：
    ①$(selector).prepend(“HTML结点”);    prepend()用于在被选元素的所有子节点开头位置插入元素
    ②$(selector).append(“HTML结点”);     append()用于在被选元素的所有子节点结尾位置插入元素
    ③$(selector).before(“HTML结点”);    before()用于在被选元素之前插入内容
    ④$(selector).after(“HTML结点”);    after()用于在被选元素之后插入内容

	$("p").append(span);//往后追加
	$("p").prepend(span);//往前追加

3.删除结点

    格式：
    ①$(selector).remove();    remove()删除的是整个结点，包括该结点中的子节点（父亲删除，儿子也删除）
    ②$(selector).remove();    empty()删除的是子结点，但是该结点仍然存在（父亲保留，儿子删除）

	$("div").remove();//清除div（清除有关div的全部）
	$("div").empty();//清空div内容，但是div还在！！！

4.父亲和兄弟结点

    格式：
    ①父亲结点
    i.$(selector).parent()    parent(）获取选中元素的父级元素
    ②兄弟结点
    i.$(selector).prev()    prev(）获取选中元素的上一个兄弟元素
    ii.$(selector).prev()    next(）获取选中元素的下一个兄弟元素
    iii.$(selector).prev()    siblings(）获取选中元素的所有兄弟元素

5.指定结点

格式：$(selectoror1).find(selector2) find()通过selecotor1找到它的子类结点selector2

案例

点击按钮，使div消失，再此点击div出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background-color: red;
            width: 100px;
            height: 100px;
        }

        .test {
            display: none;
        }
    </style>
    <script src="../static/js/jquery.min.js"></script>
</head>
<body>
<button id="Btn">点我</button>
<div></div>
</body>

<script>
    $("#Btn").click(function () {
        $("div").toggleClass("test");
    })
</script>
</html>