烟台做网站的企业,网站建设团队架构,江苏企业建网站排名优化,定制开发板名人说#xff1a;莫道桑榆晚#xff0c;为霞尚满天。——刘禹锡#xff08;刘梦得#xff0c;诗豪#xff09; 创作者#xff1a;Code_流苏(CSDN)#xff08;一个喜欢古诗词和编程的Coder#x1f60a;#xff09; 目录 五、jQuery1、jQuery-选择器和菜单案例①快速上… 名人说莫道桑榆晚为霞尚满天。——刘禹锡刘梦得诗豪 创作者Code_流苏(CSDN)一个喜欢古诗词和编程的Coder 目录 五、jQuery1、jQuery-选择器和菜单案例①快速上手②选择器(直接寻找)③间接寻找④样式操作⑤值的操作⑥事件 2、jQuery-表格和页面整合①案例1表格操作②案例2前端整合③案例3添加数据页面 3、综合案例网页端音乐播放器①index.html②script.js③效果展示 五、jQuery
jQuery是一个快速、小巧、功能丰富的JavaScript库。它使得HTML文档遍历和操作、事件处理、动画和Ajax等Web开发中常见任务变得更加简单。通过简化HTML与JavaScript之间的交互jQuery帮助开发者通过更少的代码实现更多的功能。jQuery可以看作是一个JavaScript第三方模块第三方类库。
基于jQuery自己开发一个功能。现成的工具依赖jQuery例如BootStrap的动态效果。
1、jQuery-选择器和菜单案例
①快速上手
下载jQuery
https://jquery.com/ 应用jQuery
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h1 idtxt中国联通/h1script srcstatic/jquery.min.js/scriptscript typetext/javascript// 利用jQuery中的功能实现某些效果// 1.找到idtxt的标签 2.内容修改// document.getElementById(txt).innerText河南联通; //DOM实现$(#txt).text(河南联通) //jQuery实现/script
/body
/html②选择器(直接寻找)
jQuery的选择器允许开发者根据元素的ID、类、类型、属性等选择HTML元素。这些选择器基本上是基于CSS选择器使得选取DOM元素变得非常灵活和强大。
ID选择器
h1 idtxt中国联通/h1
h1中国联通/h1
h1中国联通/h1$(#txt)类选择器
h1 classc1中国联通1
/h1
h1 classc2中国联通2
/h1
h1 classc3中国联通1
/h1$(.c1)标签选择器
h1 class c1中国联通1
/h1
div class c1中国联通2
/div
h1 classc2中国联通3
/h1$(h1)层级选择器
h1 class c1中国联通1
/h1
h1 class c1div class c2span/spana/a/div
/h1
h1 classc2中国联通3
/h1$(.c1 .c2 a)多元素选择器
h1 class c1中国联通1
/h1
h1 class c1div class c3span/spana/a/div
/h1
h1 classc2中国联通3
/h1
ullixxx/lilixxx/li
/ul$(#c3,#c2,li)$(#c3,#c2,li) 在jQuery中属于多元素选择器。这种选择器允许你通过使用逗号分隔每个选择器一次选择多个元素。对于这个例子它会选择ID为c3的元素、ID为c2的元素以及页面上所有的li元素。
属性选择器
input typetext namen1/
input typetext namen1/
input typetext namen2/$(input[namen1])③间接寻找
找兄弟
divdiv北京/divdiv idc1上海/divdiv广州/divdiv深圳/div
/div$(#c1).prev() //上一个 北京
$(#c1) //上海
$(#c1).next() //下一个 广州
$(#c1).next().next() //下一个的下一个 深圳$(#c1).siblings() //所有的兄弟姐妹北(上)广深找父子
divdiv北京/divdiv idc1div青浦区/divdiv classp10宝山区/divdiv浦东新区/div/divdiv广州/divdiv深圳/div
/div
divdiv陕西/div div山西/divdiv河南/divdiv河北/div
/div$(#c1).parent() //父亲
$(#c1).parent().parent() //父亲、父亲$(#c1).children() //所有的孩子
$(#c1).children(.p10) //所有的儿子中寻找classp10$(#c1).find(.p10) //去所有子孙中寻找classp10
$(#c1).find(div) //去所有子孙中寻找div标签案例菜单的切换
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.menus{width: 200px;height: 800px;border: 1px solid red;}.menus .header{background-color: gold;padding: 10px 5px;border-bottom: 1px solid #dddddd;}.menus .content a{display: block;padding: 5px 5px;border-bottom: 1px dotted #dddddd;}.hide{display: none;}/style
/head
bodydiv classmenusdiv classitemdiv classheader onclickclickMe(this);上海/divdiv classcontent hidea宝山区/aa浦东新区/aa青浦区/aa普陀区/a/div/divdiv classitemdiv classheader onclickclickMe(this);北京/divdiv classcontent hidea海淀区/aa朝阳区/aa大兴区/aa昌平区/a/div/div/divscript srcstatic/jquery.min.js/scriptscriptfunction clickMe(self){//$(self) ---表示当前点击的那个标签。//$(self).next() 下一个标签//$(self).next().removeClass(hide); 删除样式$(self).next().removeClass(hide);}/script
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.menus{width: 200px;height: 800px;border: 1px solid red;}.menus .header{background-color: gold;padding: 10px 5px;border-bottom: 1px solid #dddddd;cursor: pointer;}.menus .content a{display: block;padding: 5px 5px;border-bottom: 1px dotted #dddddd;}.hide{display: none;}/style
/head
bodydiv classmenusdiv classitemdiv classheader onclickclickMe(this);上海/divdiv classcontenta宝山区/aa浦东新区/aa青浦区/aa普陀区/a/div/divdiv classitemdiv classheader onclickclickMe(this);北京/divdiv classcontent hidea海淀区/aa朝阳区/aa大兴区/aa昌平区/a/div/divdiv classitemdiv classheader onclickclickMe(this);上海2/divdiv classcontent hidea宝山区/aa浦东新区/aa青浦区/aa普陀区/a/div/divdiv classitemdiv classheader onclickclickMe(this);北京2/divdiv classcontent hidea海淀区/aa朝阳区/aa大兴区/aa昌平区/a/div/div/divscript srcstatic/jquery.min.js/scriptscriptfunction clickMe(self){// 让自己下面的功能展示出来$(self).next().removeClass(hide);//找父亲父亲的所有兄弟姐妹再去每个兄弟的子孙中寻找classcontent添加hide样式$(self).parent().siblings().find(.content).addClass(hide);}/script
/body
/html④样式操作
在jQuery中addClass、removeClass和hasClass都是用于操作元素类的方法。 1️⃣addClass addClass方法用于向选定的元素添加一个或多个类。这个方法可以接受一个或多个类名作为参数如果传入多个类名类名之间用空格分隔。 // 向ID为example的元素添加myClass类
$(#example).addClass(myClass);// 向所有p元素添加myClass和anotherClass类
$(p).addClass(myClass anotherClass);2️⃣removeClass removeClass方法用于从选定的元素中删除一个或多个类。和addClass方法一样这个方法可以接受一个或多个类名作为参数如果传入多个类名类名之间用空格分隔。如果没有指定类名则会删除元素的所有类。 // 从ID为example的元素中删除myClass类
$(#example).removeClass(myClass);// 从所有p元素中删除myClass和anotherClass类
$(p).removeClass(myClass anotherClass);3️⃣hasClass hasClass方法用于检查当前的元素是否含有特定的类如果元素含有该类则返回true否则返回false。这个方法对于条件判断和实现特定的逻辑非常有用。 // 检查ID为example的元素是否含有myClass类
if ($(#example).hasClass(myClass)) {console.log(元素有myClass类);
} else {console.log(元素没有myClass类);
}这些方法的出现使得在使用jQuery时对元素的类进行操作非常方便提高了开发效率和代码的可读性。
⑤值的操作
div idc1内容/div$(#c1).text() //获取文本内容
$(#c1).text(休息) //设置文本内容input typetext idc2/$(#c2).val() //获取用户的值
$(#c2).val(娃哈哈) //设置用户的值 案例1动态创建数据
!DOCTYPE html
html langen
headmeta charsetUTF-8title案例输入内容/title
/head
bodyinput typetext idtxtUser placeholder用户名input typetext idtxtEmail placeholder邮箱input typebutton value提交 onclickgetInfo()/ul idview/ulscript srcstatic/jquery.min.js/scriptscriptfunction getInfo(){// 1.获取用户输入的用户名和密码var username $(#txtUser).val();var email $(#txtEmail).val();var dataString username - email;// 2.创建li标签在li的内部写入内容var newLi $(li).text(dataString);// 3.把新创建的li标签添加到ul里面。$(#view).append(newLi);}/script
/body
/html⑥事件
jQuery提供了简便的方法来处理用户交互如点击、悬停、键盘输入等事件。这使得在元素上绑定事件监听器和定义事件处理函数变得简单起来例如获取信息、删除信息等。
input typebutton value提交 onclickgetInfo()/scriptfunction getInfo(){}
/scriptulli百度/lili谷歌/lili搜狗/li
/ulscript$(li).click(function(){//点击li标签时自动执行这个函数//$(this) 当前你点击的是那个标签。});
/script在jQuery中可以删除某个标签。
div idc1内容/div$(#c1).remove();案例1删除元素
!DOCTYPE html
html langen
headmeta charsetUTF-8title案例删除元素/title
/head
bodyulli百度/lili谷歌/lili搜狗/li/ulscript srcstatic/jquery.min.js/scriptscript$(li).click(function (){// var text $(this).text();// console.log(text);$(this).remove();});/script
/body
/html当页面框架加载完成之后执行代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyulli百度/lili谷歌/lili搜狗/li/ulscript srcstatic/jquery.min.js/scriptscript$(function (){// 当页面的框架加载完成之后自动执行。$(li).click(function (){// 移除被点击的li元素$(this).remove();});});/script
/body
/html这段代码中的注释表示的是当页面的DOM结构框架加载完成后自动执行包裹在$(function(){ ... })内的代码用于确保页面加载完毕后再执行脚本保证DOM元素已经完全加载从而可以安全地进行DOM操作。
通过这段代码用户可以通过点击来移除不需要的项。使用$(this)关键字目的是触发当前事件的元素也就是这段代码中的li元素remove()方法则是用来移除选定的元素。
2、jQuery-表格和页面整合
①案例1表格操作
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
table border1theadtrthID/thth姓名/thth操作/th/tr/theadtbodytrtd1/tdtd张三/tdtdinput typebutton value删除 classdelete-button/td/trtrtd1/tdtd张三/tdtdinput typebutton value删除 classdelete-button/td/trtrtd1/tdtd张三/tdtdinput typebutton value删除 classdelete-button/td/trtrtd1/tdtd张三/tdtdinput typebutton value删除 classdelete-button/td/trtrtd1/tdtd张三/tdtdinput typebutton value删除 classdelete-button/td/tr/tbody/tablescript srcstatic/jquery.min.js/scriptscript$(function () {// 找到所有class-delete的标签绑定事件$(.delete-button).click(function (){// 删除当前行的数据$(this).parent().parent().remove();});})/script
/body
/html更多jQuery的使用可以查看手册在用到的时候查询使用。
https://www.runoob.com/manual/jquery/
②案例2前端整合
HTMLCSSJavaScript、jQueryBootstrap动态效果依赖jQuery。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.csslink relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.cssstyle.navbar {border-radius: 0;}/style
/head
body
div classnavbar navbar-inversediv classcontainer-fluid!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-9 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#职工薪资系统/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-9ul classnav navbar-navli classactivea href#Home/a/lilia href#Link/a/lilia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalse Dropdown span classcaret/span/aul classdropdown-menulia href#个人资料/a/lilia href#我的账户/a/lilia href#修改密码/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulul classnav navbar-nav navbar-rightlia href#登录/a/lilia href#注册/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalse 用户 span classcaret/span/aul classdropdown-menulia href#个人资料/a/lilia href#我的账户/a/lilia href#修改密码/a/lili roleseparator classdivider/lilia href#注销/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --
/divdiv!-- Button trigger modal --button typebutton classbtn btn-primary btn-lg data-togglemodal data-target#myModalLaunch demo modal/button!-- Modal --div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabelModal title/h4/divdiv classmodal-body.../divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div/divdivbutton typebutton classbtn btn-default data-toggletooltip data-placementlefttitleTooltip on leftTooltip on left/buttonbutton typebutton classbtn btn-default data-toggletooltip data-placementtop titleTooltip on topTooltip on top/buttonbutton typebutton classbtn btn-default data-toggletooltip data-placementbottomtitleTooltip on bottomTooltip on bottom/buttonbutton typebutton classbtn btn-default data-toggletooltip data-placementrighttitleTooltip on rightTooltip on right/button/divdivbutton idelement typebutton classbtn btn-lg btn-danger data-togglepopover title我是标题data-content此处是内容区域点我弹出/隐藏弹出框/button/divdiv stylewidth: 700pxdiv idcarousel-example-generic classcarousel slide data-ridecarouselol classcarousel-indicatorsli data-target#carousel-example-generic data-slide-to0 classactive/lili data-target#carousel-example-generic data-slide-to1 class/li/oldiv classcarousel-inner rolelistboxdiv classitem activeimg data-srcholder.js/900x500/auto/#777:#555/text:First slide altFirst slide [900x500]srcstatic/img/w1.pngdata-holder-renderedtrue/divdiv classitemimg data-srcholder.js/900x500/auto/#666:#444/text:Second slide altSecond slide [900x500]srcstatic/img/w3.pngdata-holder-renderedtrue/div/diva classleft carousel-control href#carousel-example-generic rolebutton data-slideprevspan classglyphicon glyphicon-chevron-left aria-hiddentrue/spanspan classsr-onlyPrevious/span/aa classright carousel-control href#carousel-example-generic rolebutton data-slidenextspan classglyphicon glyphicon-chevron-right aria-hiddentrue/spanspan classsr-onlyNext/span/a/div/div
/div!-- 此处先引入jQuery再引入bootstrap--
script srcstatic/js/jquery.min.js/script
script srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.js/script
script$(function () {// 找到data-toggletooltip使用tooltip功能$([data-toggletooltip]).tooltip();$(#element).popover({trigger: click, placement: bottom});$(.carousel).carousel({interval: 5000})})
/script
/body
/html③案例3添加数据页面
人员信息录功能需要提供用户信息
用户名、年龄、薪资、部门、入职时间等(*)
对于时间的选择不通过输入通过点击选择可以使用插件datetimepicker。 1.下载插件 https://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm 2.应用插件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.csslink relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.csslink relstylesheet hrefstatic/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css
/head
bodydiv classcontainer stylemargin-top: 20pxform classform-horizontaldiv classrow clearfixdiv classcol-xs-6div classform-grouplabel classcol-sm-2 control-label姓名/labeldiv classcol-sm-10input typetext classform-control placeholder姓名/div/div/divdiv classcol-xs-6div classform-grouplabel classcol-sm-2 control-label年龄/labeldiv classcol-sm-10input typetext classform-control placeholder年龄/div/div/div/divdiv classrow clearfixdiv classcol-xs-6div classform-grouplabel classcol-sm-2 control-label薪资/labeldiv classcol-sm-10input typetext classform-control placeholder薪资/div/div/divdiv classcol-xs-6div classform-grouplabel classcol-sm-2 control-label部门/labeldiv classcol-sm-10select classform-controloption研发部门/optionoption销售部门/optionoption运营部门/option/select/div/div/div/divdiv classrow clearfixdiv classcol-xs-6div classform-grouplabel classcol-sm-2 control-label入职日期/labeldiv classcol-sm-10input typetext iddt classform-control placeholder入职日期/div/div/div/divdiv classrow clearfixdiv classcol-xs-6div classform-groupdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-primary提交/button/div/div/div/div/form
/divscript srcstatic/js/jquery.min.js/script
script srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.js/script
script srcstatic/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js/script
script srcstatic/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js/scriptscript$(function () {$(#dt).datetimepicker({format: yyyy-mm-dd,startDate:0,language:zh-CN,autoclose: true,});})/script
/body
/html3、综合案例网页端音乐播放器
①index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleMusic Player/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.cssstyle.container {padding-top: 20px;}audio {width: 100%;}/style
/head
bodydiv classcontainerh2我的音乐播放器/h2input typefile idfile-input acceptaudio/*/brbraudio idaudio-player controls你的浏览器不支持该音频文件。/audio!-- 在audio标签下方添加 --img idcover-image src altCover Image classimg-thumbnailstyledisplay: none; width: 200px; height: 200px;brbutton classbtn btn-primary onclickplayMusic()播放/buttonbutton classbtn btn-secondary onclickpauseMusic()暂停/buttonbutton classbtn btn-info onclicknextMusic()下一首/buttonbrbrlabel forvolume-control音量:/labelinput typerange stylewidth: 200px idvolume-control min0 max100 value100
/divdiv stylewidth: 1000px;margin:auto;display: block;text-align: center; margin-top: 20px;div idcarousel-example-generic classcarousel slide data-ridecarouselol classcarousel-indicatorsli data-target#carousel-example-generic data-slide-to0 classactive/lili data-target#carousel-example-generic data-slide-to1 class/li/oldiv classcarousel-inner rolelistboxdiv classitem activeimg data-srcholder.js/900x500/auto/#777:#555/text:First slide altFirst slide [900x500]srcstatic/img/w1.pngdata-holder-renderedtrue/divdiv classitemimg data-srcholder.js/900x500/auto/#666:#444/text:Second slide altSecond slide [900x500]srcstatic/img/w3.pngdata-holder-renderedtrue/div/diva classleft carousel-control href#carousel-example-generic rolebutton data-slideprevspan classglyphicon glyphicon-chevron-left aria-hiddentrue/spanspan classsr-onlyPrevious/span/aa classright carousel-control href#carousel-example-generic rolebutton data-slidenextspan classglyphicon glyphicon-chevron-right aria-hiddentrue/spanspan classsr-onlyNext/span/a/div
/divscript srcstatic/js/jquery.min.js/script
script srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.min.js/script
script srcstatic/plugins/jsmediatags/dist/jsmediatags.min.js/script
script srcscript.js/script
/body
/html
②script.js
let audioPlayer document.getElementById(audio-player);
let fileInput document.getElementById(file-input);
let volumeControl document.getElementById(volume-control);
let currentFile 0;
let files [];// 播放音乐
function playMusic() {if (!audioPlayer.src || audioPlayer.src ! window.URL.createObjectURL(files[currentFile])) {loadMusic(files[currentFile]);}audioPlayer.play();
}// 暂停音乐
function pauseMusic() {audioPlayer.pause();
}// 加载音乐文件
function loadMusic(file) {let src window.URL.createObjectURL(file);audioPlayer.src src;
}// 下一首歌曲
function nextMusic() {if (files.length 0) {currentFile (currentFile 1) % files.length; // 循环播放loadMusic(files[currentFile]);playMusic();}
}// 调节音量
volumeControl.addEventListener(input, function() {audioPlayer.volume this.value / 100;
});// 选择文件
fileInput.addEventListener(change, function() {files this.files;currentFile 0; // 重置到第一个文件loadMusic(files[0]);
});③效果展示 简要总结
1.了解HTML标签、标签结构基于它可以实现简单的页面。
2.CSS了解基本样式在别人模板的基础修改就可以。
3.JavaScript、jQuery了解基本使用。
事件绑定 / 寻找标签 / 操作标签导入现成插件
后续开发过程中对于前端一些样式可以在BootStrap的基础上进行修改这样可以提升你的开发效率。
在学习前端三大组件以及BootStrap、jQuery之后接下来将会接着学习MySQL为后续进行Web开发网站做准备。 很感谢你能看到这里如有相关疑问还请下方评论留言。 Code_流苏(CSDN)一个喜欢古诗词和编程的Coder 如果对大家有帮助的话希望大家能多多点赞关注这样我的动力会更足
