AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【jQuery从入门到精通】（下）

2023-04-20 105
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【jQuery从入门到精通】

操作元素属性


属性分类：


  • 固有属性


元素本身具有的属性为固有属性


  • 返回值为boolean类型的属性


checked，selected，disabled


  • 自定义属性


用户自己定义的属性


获取元素属性


方法 描述 举例
attr(属性名称) 获取指定的属性值，操作checkbox时，选中返回checked，没有选中返回undefined。 attr(‘checked’)，attr(‘name’)
prop(属性名称) 获取具有true和false两个属性的属性值 prop(‘checked’)


实例：


html：


<input type="checkbox" checked="选中" id="ip1" name="chk1" myself="suliang">男
<input type="checkbox" id="ip2" name="chk2">女


jQuery查询获取元素属性：（使用之前记得引入jQuery）


//获取标签
let ip1 = $("#ip1");
let ip2 = $("#ip2");
//1.获取固有元素属性name
console.log(ip1.attr("name")); //chk1
console.log(ip1.prop("name")); //chk2
//2.获取返回值为boolean类型的元素属性 checked
console.log(ip1.attr("checked"));  //checked
console.log(ip1.prop("checked")); //true
//未选中
console.log(ip2.attr("checked"));  //undefined
console.log(ip2.prop("checked")); //false
//3.选择自定义元素属性
console.log(ip1.attr("myself")); //suliang
console.log(ip1.prop("myself")); //undefined


从上述实例可以看出：


两者区别：


  1. 若是固有属性：attr和prop都返回具体的值


  1. 若是返回值为boolean类型的属性：


  1. 设置了属性值：attr返回具体的值，prop返回true。


  1. 没有设置具体的值：attr返回undefined，prop返回false


  1. 若是自定义属性：attr返回具体的值，prop返回undefined


设置元素属性


同样使用attr和prop来进行操作：


语法：


attr("属性名“,"属性值")


prop("属性名","属性值")


实例：


HTML：


<input type="checkbox" checked="选中" id="ip1" name="chk1" myself="suliang">男
<input type="checkbox" id="ip2" name="chk2">女


jQuery查询设置元素属性：（使用之前记得引入jQuery）


//获取标签
let ip1 = $("#ip1");
let ip2 = $("#ip2");
//1.设置固有元素属性name
ip1.attr("name","su");
console.log(ip1.attr("name")); //su
ip1.prop("name","liang")
console.log(ip1.prop("name")); //liang
// //2.设置返回值为boolean类型的元素属性 checked
ip2.attr("checked","checked")
console.log(ip2.attr("checked"));  //checked
ip2.prop("checked",true)
console.log(ip2.prop("checked")); //true
//3.选择自定义元素属性
ip1.attr("myself1","xiaohu")
console.log(ip1.attr("myself1")); //xiaohu
ip1.prop("myself2","xiaoming")
console.log(ip1.prop("myself2")); //xiaoming 虽然可以显示，但网页源码并无这项属性


从上述实例可以看出：


两者区别：


  1. 若是固有属性：attr和prop都可以进行修改


  1. 若是返回值为boolean类型的属性：两者都可以操作：使用prop操作时，属性值需设置为true或false


  1. 若是自定义属性：attr可以直接操作，prop操作后网页无显示。


移除元素属性


移除元素属性，我们需要使用remove方法：


语法：


removeAttr("属性名")


实例：


HTML：


<input type="checkbox" checked="选中" id="ip1" name="chk1" myself="suliang">男
<input type="checkbox" id="ip2" name="chk2">女


jQuery查询移除元素属性：（使用之前记得引入jQuery）


//获取标签
let ip1 = $("#ip1");
let ip2 = $("#ip2");
//移除固有属性和自定义属性
console.log(ip1.attr("name"));  //chk1
ip1.removeAttr("name");
console.log(ip1.attr("name")); //undefined


操作元素样式


对元素的样式进行操作，我们可以使用如下方法。


方法 说明
attr(“class”) 获取class属性的值，即样式名称
attr(“class”,“样式名”) 修改class属性的值，修改样式
addClass(“样式名””) 添加样式名称
css() 添加具体的样式
removeClass(“class”) 移除样式名称


实例：


HTML：


 <div class="box1">
     <p class="blue lager">苏凉</p>
     <p class="pink">刘亦菲</p>
 </div>


jQuery查询移除元素属性：（使用之前记得引入jQuery）


 //获取div
let box = $(".box1");
//获取p标签
let p1 = $(".blue,.lager");
let p2 = $(".pink");
//1.获取样式名
console.log(p1.attr("class")); //blue lager
//2.修改样式值
p2.attr("class","blue");
console.log(p2.attr("class")); //blue
//3.添加样式
p2.addClass("lager");
console.log(p2.attr("class")); //blue lager
//4.添加具体样式
//添加一个
p1.css("color","yellow")
//添加多个
p1.css({"font-size":"35px","background-color":"lightblue"});
console.log(p1.attr("style")); //color: yellow; font-size: 35px; background-color: lightblue;
//5.移除样式
console.log(p2.attr("class"));//blue lager
p2.removeClass("blue");
console.log(p2.attr("class")); //lager


操作元素内容


方法 说明
html 获取元素的html内容，包含html标签（非表单元素）
htm(“html内容”) 设定元素的html内容，包含html标签（非表单元素）
text() 获取元素的文本内容，不包含html标签（非表单元素）
text("“text内容”") 设置元素的文本内容，不包含html标签（非表单元素）
val() 获取元素value值（表单元素）
val(值’) 设定元素的value值（表单元素）


其中前四个方法针对非表单元素，而最后两个针对表单元素：


  • 常见的表单元素:


文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select等可以在页面上操作的元素。


  • 常见的非表单元素:


div、span、 h1~h6、 table、tr、 td、p1等


实例：


HTML：


<div id="html">111</div>
<div id="html2"></div>
<p id="text"></p>
<p id="text2"></p>
<input type="text" value="suliang" id="ip1">


jQuery查询修改/获取元素内容：（使用之前记得引入jQuery）


//1.html()修改元素内容，识别html标签，非表单元素
//修改内容
//带有html标签
$("#html").html("<h1>带有html标签(h1)</h1>");
//获取
let html = $("#html").html();
console.log(html); //<h1>带有html标签(h1)</h1>
//不带html标签
$("#html2").html("不带html标签");
let html2 = $("#html2").html();
console.log(html2); //不带html标签
//2.text()修改元素内容，不识别html标签，非表单元素
//修改内容
$("#text").text("不带html标签");
//获取
let text = $("#text").text();
console.log(text); //不带html标签
// d当修改的内容包含html标签时，页面不识别
$("#text2").text("<h1>带有html标签(h1)</h1>");
let text2 = $("#text2").text();
console.log(text2); //<h1>带有html标签(h1)</h1>
//3.val()获取/修改表单元素的值
//获取
let value = $("#ip1").val();
console.log(value); //suliang
//修改
$("#ip1").val("苏凉");
let value2 = $("#ip1").val();
console.log(value2); //苏凉


图例：



创建元素


在jQuery中创建元素很简单，直接使用核心函数即可：$("创建的元素")


//创建元素
let span = "<span>创建一个span元素</span>";
console.log(span); //<span>创建一个span元素</span>
// 转换为jQuery对象
console.log($(span)); //jQuery.fn.init(1) [span]


添加元素


方法 说明
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的content参数，可以是字符、HTML元素标记。
$(content).prependTo(selector) 把content元素或内容加入selector元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符、HTML元素标记。
$(content).appendTo(selector) 把content元素或内容插入selector元素内，默认是在尾部
before() 在元素前插入指定的元素或内容:$(selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content)


实例：


HTML：


<span id="ig">IG</span>
<span id="edg">EDG</span>
<div id="rng">
    <span>gala</span>
</div>


CSS：


#ig{
   padding: 5px;
   background-color: lightblue;
}
#edg{
    padding: 5px;
    background-color: gray;
}
span{
    margin: 10px;
}
#rng{
    margin-top: 10px;
    background-color: red;
}
.fpx{
    padding: 5px;
    background-color: lightgreen;
}
.we{
    padding: 5px;
    background-color: lightyellow;
        }


jQuery查询添加元素：（使用之前记得引入jQuery）


//子级元素追加
//前追加 prepend
//创建元素
let span1 = "<span>ming</span>";
let span2 = "<span>xiaohu</span>";
// 1指定位置.prepend(内容) 
$("#rng").prepend(span1);
//2.$(内容).prependTo(指定位置)
$(span2).prependTo($("#rng"));
//后追加 append
//创建元素
let span3 = "<span>wei</span>";
let span4 = "<span>breath</span>";
//1.指定位置.append(内容)
$("#rng").append(span3);
//2.$(内容).appendTo(指定位置)
$(span4).appendTo($("#rng"));
//同级追加
//前追加 before
//创建元素
let span5 = "<span>FPX</span>";
let span6 = "<span>WE</span>";
//1.前追加
$("#edg").before(span5);
$("#ig + span").addClass("fpx");
//2.后追加
$("#edg").after(span6);
$("#edg + span").addClass("we")


图例：



删除元素


方法 说明
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty() 清空所选元素的内容


实例：


//1.remove() 删除标签和内容
$(".green").remove();
//2.empty() 删除内容
$(".blue").empty();


原图：



删除了EDG和FPX的标签及内容（remove()）,删除了RNG和IG的内容（empty())



遍历元素


  • each()


$(selector).each(function(index,element)):


遍历元素参数function为遍历时的回调函数


index为遍历元素的序列号，从0开始。


element是当前的元素，此时是dom元素。


实例：


//遍历元素
$("span").each(function(index,element){
    //索引
    console.log(index);
    //元素
    console.log(element);
    //元素
    console.log(this);
    //转换为jQuery对象
    console.log($(this)); 
})



注意：用此方法遍历出来的元素为DOM对象，若需要使用jQuery方法，则需要转换为jQuery对象。


jQuery事件


read加载事件


我们知道页面加载是由上而下顺序执行的，当我们将js写在页面头部时，就需要先等页面加载之后js才会生效。


  • 预加载事件


  • 当页面的dom结构加载完毕后执行


  • 类似于js中onload事件


  • ready事件可以写多个


语法：$(document).read(function(){}) 或$(function(){})


实例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery文件/jquery-3.6.0.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            console.log($("#p1").attr("id"));  //p1
        });
        //另一种简写
        $(function(){
            console.log($("#p1").attr("id")); //p1
        })
    </script>
</head>
<body>
    <p id="p1"></p>
</body>
</html>


bind绑定事件


为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。


为元素绑定单个事件


  • 语法：


bind绑定：$(元素).bind(事件类型,function(){})


直接绑定：$(元素).事件类型(function(){})


实例：


HTML：


<button id="btn1">按钮一：绑定单个事件（bind绑定）</button>
<button id="btn2">按钮一：绑定单个事件（直接绑定）</button>



//1.绑定单个事件
$("#btn1").bind("click",function(){
    alert("bind绑定！")
})
$("#btn2").click(function(){
    alert("直接绑定！")
})


为元素绑定多个事件


语法：


  1. 同时为多个事件绑定同一函数


  1. $(元素).bind(事件1 事件2...,function(){})


  1. 为元素绑定多个事件并设置对应函数


  1. $(元素).bind(事件1,function(){}).bind(事件2,function(){})


  1. 为元素绑定多个事件并设置对应函数(键值对的形式)


  1. $(元素).bind({事件1:function(){},事件2:function(){}})


  1. 为元素直接绑定多个事件并设置对应函数


  1. $(元素).事件1(function(){}).事件2(function(){})


实例：


HTML：


<button id="btn3">按钮三：绑定多个事件</button>
<button id="btn4">按钮四：绑定多个事件</button>
<button id="btn5">按钮五：绑定多个事件</button>
<button id="btn6">按钮六：绑定多个事件（直接绑定）</button>


jQuery查询绑定元素：（使用之前记得引入jQuery）


// 1.同时为多个事件绑定同一函数`$(元素).bind(事件1 事件2...,function(){})`
$("#btn3").bind("click mouseout",function(){
    alert("为一个元素绑定多个事件！！")
})
// 2. 为元素绑定多个事件并设置对应函数 `$(元素).bind(事件1,function(){}).bind(事件2,function(){})`
$("#btn4").bind('click',function(){
    alert("被单击了！")
}).bind('mouseout',function(){
    alert("鼠标移开了！")
})
//3. 为元素绑定多个事件并设置对应函数(键值对的形式) `$(元素).bind({事件1:function(){},事件2:function(){}})`
$("#btn5").bind({
    click:function(){
        alert("被单击了！");
    },
    mouseout:function(){
        alert("鼠标移开了！")
    }
})
// 4.  为元素直接绑定多个事件并设置对应函数  `$(元素).事件1(function(){}).事件2(function(){})`
$("#btn6").click(function(){
    alert("被单击了！")
}).mouseout(function(){
    alert("鼠标离开了！")
})


jQuery Ajax


Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）


  • Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。


  • 使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象

XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。


  • Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。


$.ajax


jquery调用ajax方法:


格式: $.ajax({});


  • 参数:


type:请求方式GET/POST


url:请求地址url


async:是否异步，默认是true表示异步


data:发送到服务器的数据


dataType:预期服务器返回的数据类型


contentType:设置请求头


success:请求成功时调用此函数


error:请求失败时调用此函数


$.ajax({
  type:"get",
    url:"file:///D:/HTMLtest/jQuerylearn/js/information.json",
    dataType:"json",
    success:function(data){
        console.log('data');
    }
})


$.get


语法: $.get("请求地址","请求参数" , function(形参){});


实例：


$.get("js/information.json",{},function(data){
    console.log(data);
})


$.post


语法: $.post("请求地址","请求参数" , function(形参){});


$.post("js/information.json",{},function(data){
    console.log(data);
})


$.getJSON


语法: $.getJSON("请求地址","请求参数" , function(形参){});


$.getJSON("js/information.json",{},function(data){
    console.log(data);
})


注: getJSON方式要求返回的数据格式满足json格式(json字符串)，若不是json格式，则不返回数据。

文章标签：
JavaScript
前端开发
数据安全/隐私保护
数据格式
JSON
XML
关键词：
jQuery入门
苏凉.py
目录
相关文章
无法自律的人
|
存储 JavaScript 前端开发
JQuery（入门~选择器）
JQuery 是快速、简洁的JavaScript库，也就是写好的JS文件。
无法自律的人
71 1
Ar.小白
|
11月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
Ar.小白
47 0
瑶大头*^_^*
|
11月前
|
JavaScript 前端开发
jQuery01-入门-选择器
jQuery01-入门-选择器
瑶大头*^_^*
47 0
不念那年晚春
|
11月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
不念那年晚春
44 0
云小君
|
11月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
云小君
61 0
好奇的菜鸟
|
3月前
|
JavaScript 前端开发 API
jQuery 入门：轻松创建与插入节点
jQuery 入门：轻松创建与插入节点
好奇的菜鸟
35 1
肖申克的陪伴
|
XML JSON JavaScript
jQuery入门到实战
jQuery入门到实战
肖申克的陪伴
57 0
jQuery入门到实战
懒大王o
|
9月前
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
懒大王o
39 0
Love-Java.
|
10月前
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
Love-Java.
49 0
〔Lisa〕
|
11月前
|
JavaScript 前端开发
JQuery入门到精通教程（二）
JQuery入门到精通教程（二）
〔Lisa〕
39 0