java web jquery_JavaWeb进阶--JQuery入门

「爱情、让人受尽委屈。」 2022-11-03 11:40 59阅读 0赞

主要内容：

![e5551a67312c1991cbd53d92ffd48aaf.png][]

JavaScript库：

![714e0b8847b123f6ebb74d1651db6575.png][]

JQuery库：

![81485c439593135a9f586999363385e9.png][]

JQuery下载与安装：

![ee4db53c692f5472eff87b823f009e52.png][]

下载好jquery-3.3.1.min.js和jquery-3.3.1.js文件后，将其复制到web工程的WebContent目录下新建的js文件夹：

![682d8ab6b43bf44b0e23cf3f71487fd0.png][]

jQuery选择器实验室：选择相应的标签使其高亮显示

测试代码：

lab.html:

jQuery实验室

.myclass \{

font-style: italic;

color: darkblue;

/\* 高亮css类 \*/

.highlight \{

color: red;

font-size: 30px;

background: lightblue;

## jQuery选择器实验室 ##

选择

--------------------

欢迎来到选择器实验室

*  搜索引擎：[百度][Link 1]
    
    style="color: darkgreen" href="http://www.so.com">360
 *  电子邮箱：[网易邮箱][Link 2]
    
    style="color: darkgreen" href="http://mail.qq.com">QQ邮箱
 *  中国名校：[清华大学][Link 3]
    
    [北京大学][Link 4]

我是拥有myclass类的span标签

我是拥有myclass的p标签

用户名： 密码：

type="password" name="upsd" value="123456" />

婚姻状况：

未婚

已婚

离异

丧偶

/\*

id选择器使用"\#id值"进行选择

css选择器使用".css类名"进行选择

$(".myclass").addClass("highlight");

\*/

document.getElementById("btnSelect").onclick = function()\{

//接受传入的参数保存在selector里

var selector = document.getElementById("txtSelector").value;

//jquery的选择器方法

//选择器

//每次只高亮选择的元素，故先移除所有高亮，再在选中的给予高亮显示

//移除所有高亮

$("\*").removeClass("highlight");

//高亮选择的元素

$(selector).addClass("highlight");

输出结果：

![2e6ff9fbff1385e2cb3b025c195aa8df.png][]

分别选择a span p 标签，输出结果：

![4d27b2965f470b6d8902f9f667bdff2a.png][]

![a6dd164c7845d070b9bbf014ab8ddc9e.png][]

![a71abb652e5dfcc7248ee8a33761521b.png][]

![43c224bb2189addbc94d33f0206cb51c.png][]

JQuery选择器：

![3029db0d349c196d524195b5d8d20a82.png][]

基本选择器：

![ad5dac750c9bff7f2817f22d9f2693e7.png][]

输出结果：

ID选择器：

![4c8610ffcb7042f549af8b9bf838dee8.png][]

标签选择器：

![bed12c269537cfe9c6cd756d0d8f4b62.png][]

类选择器：

![03339fede9e851394f0b0d33cc7f9371.png][]

组合选择器：中间使用 逗号 分隔开

![2e97c7156d74695ead92b6be7438c4fb.png][]

层叠与属性选择器：

![72c7528d737c994f74197abf9ace9f09.png][]

输出结果：

后代选择器：选中符合要求的所有后代，无论跨几代

![18413e39831e697bb35497307c95fd96.png][]

![cf94e3a51111b581b60dc9e630a6e227.png][]

子选择器：

![56b2b9684ea8004305abd9ff7ce31b0a.png][]

![b9684408137243bf3ede3906a595bc2c.png][]

兄弟选择器：选择左边元素之后的同级元素

![69c446dd8e46f1643d912bbd2e265e35.png][]

所以并未选中

![bca5f9b925a7ec9ed75f1e39f1c21404.png][]

属性选择器：常常和正则表达式一起使用

![6fa65ca80ea059260d7812497b47dac0.png][]

输出结果：

![1708434dd0d427f789429d3b0dc68b9d.png][]

![64aaf4ca56043b4edb784490cbcfba26.png][]

位置选择器：

![f6ef6c28d80397d72315a746ede09ea7.png][]

输出结果：

![32053e1d752811700dfb66bab2f07276.png][]

![5822fefb8044f80ff528307e1046028d.png][]

![2b6d32c3ae1ab4546a5d3e087904adc5.png][]

![1e45e7826924b1cfe1198f405b71ca7a.png][]

![101f2e966a86f72d984aa1404078ce65.png][]

![68e7b63a53573a241c6e592536ca65da.png][]

表单选择器：就是type的值

![8d843bbaf9412b544df9ef0c1ac177b9.png][]

输出结果：

![d9b28adb52bf4b20d8ef2287b42112cc.png][]

![91a8bec2793040955ee47737f971480a.png][]

操作元素属性：

![44c65ae80361ebff4b42479d94d3bb3f.png][]

操作元素属性：

![4da05c8b9894e6b69566a4fe03c7b3a5.png][]

测试代码：

//获取href属性：传递一个参数

var href\_attr = $("a\[href\*='163'\]").attr("href");

alert(href\_attr);

//设置href属性：传递两个参数

$("a\[href\*='163'\]").attr("href" , "http://www.163.com");

href\_attr = $("a\[href\*='163'\]").attr("href");

alert(href\_attr);

//当选择多个元素的时候，默认是选择第一个

var attr = $("a").attr("href");

alert(attr);

输出结果：首先弹出更改前：

![d464baaa7b36ea22fa98a9a4e5de281b.png][]

更改后：

![2d8fbeeb908fc53fd33380b2452438e8.png][]

多个元素会选择第一个：

![157b5ffc45c5072ad2060cdf37749621.png][]

移除属性：a不再是超链接

$("a").removeAttr("href");

操作元素的CSS样式：

![befac903758a179208e313677d4e2d65.png][]

输出结果：

获取a的css样式的color，如果会选择多个，默认返回第一个

var color = $("a").css("color");

alert(color);

![2f0996c7344a228368cc36aaf38b08f6.png][]

设置a的css样式的color为red：

$("a").css("color" , "red");

![b6542aa87cedc2df8d3792c709bd2d98.png][]

测试代码：

//设置a的css的color样式为red

$("a").css("color" , "red");

//利用json表达式，设置多个属性值

$("a").css(\{"color" : "pink" , "font-weight" : "bold" , "font-style" : "italic"\});

//为选中的元素增加css样式 空格分开可以增加多个类

$("li").addClass("highlight myclass");

//为选中的元素移除css样式

$("p").removeClass("myclass");

//获取a的css样式，如果存在多个，默认选择第一个

var color = $("a").css("color");

alert(color);

输出结果：

![51da0c70fe7a0edd8367b6d730547d21.png][]

设置元素内容：

![8ed1674c2b38b784410fc665100605d0.png][]

测试代码：

//val() 用于获取文本输入框的内容

//val(参数) 用于更改文本输入框的内容

$("input\[name='uname'\]").val("administrator");

var v = $("input\[name='uname'\]").val();

alert(v);

//text与html方法最大的区别在于对于文本中的html标签是否进行转义

//$("span.myclass").text("**锄禾日当午，汗滴禾下土**");

$("span.myclass").html("**锄禾日当午，汗滴禾下土**");

var vspan = $("span.myclass").text();

alert("text:\\n"+vspan);

var vspan1 = $("span.myclass").html();

alert("html:\\n"+vspan1);

输出结果：

![16c41990a6a6c0396982d18850a6e4fa.png][]

![c0a24662e98f2905bafaf742298e5db4.png][]

![290d460e0289a16ed3dbd1cf52d310a0.png][]

JQuery事件处理方法：

![2338e785603dc2ba2852120e5ea3e005.png][]

![e16403588fb78dc5e60faecb49ec6441.png][]

测试代码：

//onload是指在页面所有资源加载完成后执行

window.onload = function()\{

//alert(1);

//ready()则是在页面dom被浏览器解释完成后执行

$(document).ready(function()\{

alert("页面准备就绪");

\})

//简化形式

$(function()\{

$("p.myclass").on("click" , function()\{

//$(this)是指当前事件产生的对象

$(this).css("background-color" , "yellow");

\});

$("span.myclass").click(function()\{

$(this).css("background-color" , "lightgreen");

\})

$("input\[name='uname'\]").keypress(function(event)\{

console.log(event);

if(event.keyCode == 32)\{

$(this).css("color" , "red");

\})

输出结果：

![bca64a549de30782d7e51ffdcd0c259f.png][]

分别店家span和p:

![7e69a23678450c8686d01e246af3bc39.png][]

输入空格，会变成红色：

![cdf0fcc8ffb8578038af6442ca96394a.png][]

[e5551a67312c1991cbd53d92ffd48aaf.png]: /images/20221024/402bbaa413864dccac24f2dafcd4331b.png
[714e0b8847b123f6ebb74d1651db6575.png]: /images/20221024/8060a5f518b14f72a7275cbe8b4671dd.png
[81485c439593135a9f586999363385e9.png]: /images/20221024/eac83f47229445c2a11a5af42cc539be.png
[ee4db53c692f5472eff87b823f009e52.png]: /images/20221024/1b7c535586dd4fc8997bf9305d1ab4f9.png
[682d8ab6b43bf44b0e23cf3f71487fd0.png]: /images/20221024/579252e6d8774f998f14f7dc548c0c5d.png
[Link 1]: http://www.baidu.com
[Link 2]: http://mail.163.com
[Link 3]: http://www.tsinghua.edu.cn
[Link 4]: https://www.pku.edu.cn/
[2e6ff9fbff1385e2cb3b025c195aa8df.png]: /images/20221024/7db802c0026449cda1479da061ae2215.png
[4d27b2965f470b6d8902f9f667bdff2a.png]: /images/20221024/dbbf60fcb1c941e1b270c818dbc8d5e5.png
[a6dd164c7845d070b9bbf014ab8ddc9e.png]: /images/20221024/349ea4efd2434a009b43228e237b5c99.png
[a71abb652e5dfcc7248ee8a33761521b.png]: /images/20221024/eef07c8f1e0040ec80336d49ef243818.png
[43c224bb2189addbc94d33f0206cb51c.png]: /images/20221024/eeedd46bb09344bcb520b91db24e10f4.png
[3029db0d349c196d524195b5d8d20a82.png]: /images/20221024/1c4e3fa7e9564c60bc8590b930009b0e.png
[ad5dac750c9bff7f2817f22d9f2693e7.png]: /images/20221024/e6bcdbd393f440749d5b4ee0f32df366.png
[4c8610ffcb7042f549af8b9bf838dee8.png]: /images/20221024/3a3ab704c3b748b2a9e1ca3d81902161.png
[bed12c269537cfe9c6cd756d0d8f4b62.png]: /images/20221024/318540c1de064710b4bef6e1689449f8.png
[03339fede9e851394f0b0d33cc7f9371.png]: /images/20221024/62eb64e4294a45fc8b5fd679f813ab7b.png
[2e97c7156d74695ead92b6be7438c4fb.png]: /images/20221024/f0ab30bda0ab4056a927b903797e97f0.png
[72c7528d737c994f74197abf9ace9f09.png]: /images/20221024/c6b7a9a004ea46ab879f8afe1321491c.png
[18413e39831e697bb35497307c95fd96.png]: /images/20221024/77d17246fe3b486b82e12e669d68a3eb.png
[cf94e3a51111b581b60dc9e630a6e227.png]: /images/20221024/1ad8aec9c7274797b305a2d988fb8a49.png
[56b2b9684ea8004305abd9ff7ce31b0a.png]: /images/20221024/d1c66e202eec41f4b8c1b20efd5aefa2.png
[b9684408137243bf3ede3906a595bc2c.png]: /images/20221024/ad2d1c71d65a4444a847957cbc9ff707.png
[69c446dd8e46f1643d912bbd2e265e35.png]: /images/20221024/f279da38055e4f939cb292ad0d7e10fe.png
[bca5f9b925a7ec9ed75f1e39f1c21404.png]: /images/20221024/15fcb6aa57f14e1882abc6ab2062b617.png
[6fa65ca80ea059260d7812497b47dac0.png]: /images/20221024/401f547b0f2a485a9b295a6f1cfcd699.png
[1708434dd0d427f789429d3b0dc68b9d.png]: /images/20221024/605ddc0772884536a2f13e9e00bc2d39.png
[64aaf4ca56043b4edb784490cbcfba26.png]: /images/20221024/4b86695f2055456ab7e9df3d3b453316.png
[f6ef6c28d80397d72315a746ede09ea7.png]: /images/20221024/662df4ee6faf4db2964d41c3198384ca.png
[32053e1d752811700dfb66bab2f07276.png]: /images/20221024/860ffda537ca43d9851e3a8cd2562acb.png
[5822fefb8044f80ff528307e1046028d.png]: /images/20221024/74399c6859c64c6b8f6326c84be7c19e.png
[2b6d32c3ae1ab4546a5d3e087904adc5.png]: /images/20221024/ed13fb22349342a7b5bfa662bd2435c3.png
[1e45e7826924b1cfe1198f405b71ca7a.png]: /images/20221024/bec5ab55572e4f22a5c1a522b9882c6c.png
[101f2e966a86f72d984aa1404078ce65.png]: /images/20221024/8ba666750ea248bcac17232914b171b4.png
[68e7b63a53573a241c6e592536ca65da.png]: /images/20221024/ad5cbe5759694964a30c102350be1400.png
[8d843bbaf9412b544df9ef0c1ac177b9.png]: /images/20221024/3c033f2f776e499bbd9c498048ed3966.png
[d9b28adb52bf4b20d8ef2287b42112cc.png]: /images/20221024/8f4c5bc49e76443381f0bb95aeffba0f.png
[91a8bec2793040955ee47737f971480a.png]: /images/20221024/655776c38bbe4edc90b2c4e7ba6bc455.png
[44c65ae80361ebff4b42479d94d3bb3f.png]: /images/20221024/9d7ef522c3d4413f9e60ab06037027ac.png
[4da05c8b9894e6b69566a4fe03c7b3a5.png]: /images/20221024/f7209ffeb0bf4ed59c2abaccbd528c71.png
[d464baaa7b36ea22fa98a9a4e5de281b.png]: /images/20221024/0464d29d98af42689f65da9a7a23bf76.png
[2d8fbeeb908fc53fd33380b2452438e8.png]: /images/20221024/4307d22cfd7a4fe5a9e5e1ed8a595267.png
[157b5ffc45c5072ad2060cdf37749621.png]: /images/20221024/fec6ea0cf3ba4e2eb5c4dabb7d666927.png
[befac903758a179208e313677d4e2d65.png]: /images/20221024/e75c31a9de174a818c42662ca20377a1.png
[2f0996c7344a228368cc36aaf38b08f6.png]: /images/20221024/fbd9ea14965645cea9f1039f9e2260cf.png
[b6542aa87cedc2df8d3792c709bd2d98.png]: /images/20221024/6fa0c9bed5854e4eacffafa1e922ac84.png
[51da0c70fe7a0edd8367b6d730547d21.png]: /images/20221024/95bae836489e4eb6af164850253ff19a.png
[8ed1674c2b38b784410fc665100605d0.png]: /images/20221024/e3e712b5df6c40e89b620ad589c1fa03.png
[16c41990a6a6c0396982d18850a6e4fa.png]: /images/20221024/5ae630a2b03a49fda8e0b5146ba25f56.png
[c0a24662e98f2905bafaf742298e5db4.png]: /images/20221024/17e21118f6194ef8aec1d10c448dc9c8.png
[290d460e0289a16ed3dbd1cf52d310a0.png]: /images/20221024/eb65cda4ce3c419aae9cbbf8cd6eb6f8.png
[2338e785603dc2ba2852120e5ea3e005.png]: /images/20221024/4a39be6d0785400e887d29d6e5affe06.png
[e16403588fb78dc5e60faecb49ec6441.png]: /images/20221024/838a196600034303b9e48dc1500b59f6.png
[bca64a549de30782d7e51ffdcd0c259f.png]: /images/20221024/dd8e23228c884f4a863f2bd2cea80acd.png
[7e69a23678450c8686d01e246af3bc39.png]: /images/20221024/aa2b06e777234ea48aea33cc01a12d51.png
[cdf0fcc8ffb8578038af6442ca96394a.png]: /images/20221024/499523d2db09421e85e4b17868b1b539.png