JQuery

YUELEI118

已于 2022-06-25 09:11:53 修改

阅读量324

点赞数

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

于 2022-05-08 10:45:23 首次发布

本文链接：https://blog.csdn.net/YUELEI118/article/details/124613113

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JQuery

优化JavaScript语言，缩短了JS的代码，将JS的方法整合。

使用JQuery

官网下载
在文件中引入

<script type="text/javascript" src="lib/jquery-3.6.0.js"></script>

选择器

选择器返回的值是一个数组

基础选择器

ID选择器，Class选择器，标签选择器

JQuery选择器与JavaScript选择器对比

//  ID
    $("#div1");
    document.getElementById("div1");
//  Class
    $(".oneClass");
    document.getElementsByClassName("oneClass");
//  标签
    $("div");
    document.getElementsByTagName("div");

混合选择器，全选选择器

	$("#div1,.twoClass,div"); // 选择id为div1；class为twoClass，标签为div的所有元素
	$(*); //所有元素全部选择

form表单选择器

type值选择器 $(“:type值”);

// 获取单行文本框对象
		$(":text");
// 获取radio单选按钮的对象，循环遍历每个选项的值
		let $radio = $(":radio");
        for (let i = 0; i < $radio.length; i++) {
            alert($radio.get().value);
        }
// 获取多选框的对象，遍历时将dom对象转换为jquery对象，输出值
		let $checkbox = $(":checkbox");
        for (let i = 0; i < $checkbox.length; i++) {
            alert($($checkbox[i]).val());
        }

name选择器

$(“input[name=name的值]”);

$("input[name=sex]");

dom对象和JQuery对象的相互转换

为了易于区分两者的对象，JQuery对象的前面加$

dom对象转换为JQuery对象；$(dom对象);

	let $div1=$(domdiv1);

JQuery对象转换为dom对象： $div1.get(0);或者$div1[0];注意括号不同
JQuery对象类似于数组结构

    let $div1 = $("#div1"); //定义jquery对象
    let domdiv1 = $div1.get(0); //转换为dom对象

过滤器

基本过滤器

JQuery对象数组中的第一个对象

$("选择器:first")

JQuery对象数组中的最后一个对象

$("选择器:last")

JQuery对象数组中索引为2的对象

$("选择器:eq(2)")

JQuery对象数组中索引小于3的对象

$("选择器:lt(3)")

JQuery对象数组中索引大于3的对象

$("选择器:gt(3)")

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="lib/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $(function () {
        //
        $("#btn1").click(function () {
            $("div:first").css("background", "red");
        })
        $("#btn2").click(function () {
            $("div:last").css("background", "yellow")
        })
        $("#btn3").click(function () {
            $("div:eq(3)").css("background", "green")
        })
        $("#btn4").click(function () {
            $("div:lt(2)").css("background", "blue")
        })
        $("#btn5").click(function () {
            $("div:gt(3)").css("background", "orange")
        })
    })


</script>
<div>div-0</div>
<div>div-1</div>

<div>div-2
    <div>div-3</div>
    <div>div-4</div>
</div>
<div>div-5</div>
<input type="button" value="选择第一个dom对象" id="btn1"/><br>
<input type="button" value="选择最后一个dom对象" id="btn2"/><br>
<input type="button" value="选择第三个dom对象" id="btn3"/><br>
<input type="button" value="选择前三个dom对象" id="btn4"/><br>
<input type="button" value="选择后三个dom对象" id="btn5"/><br>
</body>
</html>

属性过滤器

$(“选择器:属性”); 注：选择器可以是id选择器也可以是class选择器等等

常用属性：

文本框：disabled、readonly
选择：checked
下拉选择：selected
表单中所有可用的文本框
示例中使用的是type属性选择器

	$(":text:enabled");

单选或多选组合适用：name值为sex，且被选中的元素
示例中使用的是name选择器

	$("input[name=sex]:checked");

下拉选择框适用
$(“选择器>option:selected”)

	$("select>option:selected")

常用函数

val

js中的value

返回的是数组第一个元素的值

	$("选择器").val();

给选择器的所有元素赋值

	$("选择器").val(“新的值”);

text

js中的innerText属性

返回所有元素text拼接的字符串

	$("选择器").text()

给所有元素的text赋值

	$("选择器").text("新的值")

attr（属性）

获取元素的属性

	$("选择器").attr("属性名")

给元素的指定属性赋值

	$("选择器").attr("属性名","值")

示例;给img更改src属性的值，产生更换图片的效果

	$("img").attr("src","/img/2.jpg")

删除、新增元素

删除元素及其子元素

	$("选择器").remove()

只删除子元素（元素的text也会被删除）

	$("选择器").empty()

在元素的子元素的最后新增一个子元素（新增html代码）

	$("选择器").append("<div>新增的子元素</div>")

html

获取数组第一个元素的html

	$("选择器").html()

与text区别：html会输出元素内所有内容，包括标签符号。示例：

	<div id="div1">第一个div
	    <div>第二个div</div>
	</div>
	<---以上代码执行获取html后输出为-->
	第一个div
	    <div>第二个div</div>
	<--如果执行text函数后输出为-->
	第一个div 第二个div

设置元素的html
值当中可以包含标签

	$("选择器").html("值")

each 循环

数组对象可以是：数组、json、jquery元素数组

语法格式1：

	$.each(数组对象,function (索引,元素) {
		// 依次对每个元素，执行方法
	})

语法格式2：
遍历选择器返回的数组对象时，单个的元素是dom对象

	$("选择器").each(function(i,n){
		// 此时操作的是dom对象，不是jquery对象，例如取值时要使用value
	})

绑定事件

JQuery中的常用事件

如果要在javaScript代码中完成元素与事件的绑定，则需要在页面加载完成后才可绑定事件。

页面加载完成

javaScript写法

	window.onload=function () {
    	// 页面加载完成后执行
	}

JQuery写法

	$(document).ready(function () {
		// 页面加载完成后执行
    })

JQuery简化后的写法

    $(function () {
        // 页面加载完成后执行
    })

单击事件

第一种绑定方式：
$("选择器").click(function(){ 事件触发后的执行代码 })

		$("#btn1").click(function () {
            // 点击后执行代码
        })

第二种绑定方式：
$("选择器").on("事件名称",function (){ 事件触发后的执行代码 }

		$("#btn2").on("click",function () {
             //点击后执行的代码
        })

Json

jackjson
下载jar包

类对象转换为Json字符串

		// 
		ObjectMapper objectMapper = new ObjectMapper();
        String json = objectMapper.writeValueAsString(类对象);
        // 响应
        response.setContentType("application/json;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print(json);

YUELEI118

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

非常简单又常用的东西Ajax功能：实现网页的动态展示。刷新网页中的部分页面内容，又不引起整个页面的刷新。实现步骤创建XMLHttpRequest对象 let xmlHttpRequest = new XMLHttpRequest();绑定事件onreadystatechangexmlHttpRequest.readyState返回0-4，5个值，代表xmlHttpRequest 对象的5种不同状态：0：xmlHttpRequest 对象的未初始化状态。这个值检测不
复制链接

扫一扫

专栏目录