电子商城网站制作公司,江苏建设行业证书编号查询网站,网络优化工程师为什么都说坑人,网站建设与维护结课论文文章目录 1.jQuery操作节点1.查找节点#xff0c;修改属性1.基本介绍2.切换图片案例 2.创建节点1.基本介绍2.内部插入3.外部插入4.小结1.插入方法说明2.两种插入方法的区别 5.插入元素实例6.移动元素实例 3.删除节点1.基本介绍2.代码实例 4.复制节点1.基本介绍2.代码实例 5.替… 文章目录 1.jQuery操作节点1.查找节点修改属性1.基本介绍2.切换图片案例 2.创建节点1.基本介绍2.内部插入3.外部插入4.小结1.插入方法说明2.两种插入方法的区别 5.插入元素实例6.移动元素实例 3.删除节点1.基本介绍2.代码实例 4.复制节点1.基本介绍2.代码实例 5.替换节点1.基本介绍2.代码实例 2.属性操作3..class样式操作1.基本介绍2.代码实例 4.获取HTML文本和值1.基本介绍2.案例 5.常用遍历节点方法1.基本介绍2. 代码实例 6.CSS-DOM操作1.基本介绍2.代码实例 7.多选框应用案例1.题目2.代码 8.页面加载完毕触发方式9.作业1.作业一2.作业二3.作业三处理布尔属性使用prop4.作业四1.添加2.删除 1.jQuery操作节点
1.查找节点修改属性
1.基本介绍 2.切换图片案例
!DOCTYPE html
html langen
headmeta charsetUTF-8title操作节点的属性/titlescript typetext/javascript src./jquery/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//为按钮绑定事件$(button).click(function () {//修改图片属性$(img).attr(src, ./image/1.png)})});/script
/head
body
img src./image/2.png height300/
br/
button点击切换图片/button
/body
/html 2.创建节点
1.基本介绍 2.内部插入 3.外部插入 4.小结
1.插入方法说明
**A.append(B)**A内部的最后添加B**A.prepend(B)**A内部的最前面添加B**A.after(B)**A的后面添加B**A.before(B)**A的前面添加B
2.两种插入方法的区别
在直接可以找到子元素的情况下内部插入和外部插入的作用是相同的建议使用外部插入如果只能找到父元素插入子元素只能使用内部插入法
5.插入元素实例
!DOCTYPE html
html langen
headmeta charsetUTF-8title创建节点-应用实例/titlestyle typetext/cssdiv, span {width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float: left;font-size: 17px;font-family: Roman;}div.mini {width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family: Roman;}/stylescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//添加重庆li到上海下(使用dom的传统方法)$(#b1).click(function () {//创建重庆livar cq_li document.createElement(li);//添加内容cq_li.setAttribute(id, cq)cq_li.setAttribute(name, chongqing)cq_li.innerText 重庆;//拿到上海var elementById document.getElementById(sh);//上海的下面添加节点elementById.append(cq_li);})//*****添加重庆li到 上海下-jquery完成添加节点$(#b2).click(function () {//创建重庆节点var $li $(li id\cq\ name\chongqing\重庆/li);//添加节点//内部插入// $(ul li[idsh]).append($li);//外部插入$(ul li[idsh]).after($li);})//*** 添加成都li到 北京前$(#b3).click(function () {//设置成都livar $cd $(li id\cd\ name\chengdu\成都/li);$(#bj).before($cd)})//*** 添加成都li到 北京和上海之间$(#b4).click(function () {//设置成都livar $cd $(li id\cd\ name\chengdu\成都/li);$(#bj).after($cd)})//*** 添加成都li到 吉林前面$(#b5).click(function () {//设置成都livar $cd $(li id\cd\ name\chengdu\成都/li);$(#jl).before($cd)})})/script
/head
body
ul idcityli idbj namebeijing北京/lili idsh nameshanghai上海/lili idjl namejilin吉林/lili idmy namemianyang绵阳/li
/ulinput typebutton idb1 value添加重庆li到 上海下(使用dom的传统方法)/br/br/
input typebutton idb2 value添加重庆li到 上海下/br/br/
input typebutton idb3 value添加成都li到 北京前/br/br/
input typebutton idb4 value添加成都li到 北京和上海之间/br/br/
input typebutton idb5 value添加成都li到 吉林前面/br//body
/html 6.移动元素实例
!DOCTYPE html
html langen
headmeta charsetUTF-8title移动节点/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//****使用外部插入法 把反恐li移动天津后$(#b1).click(function () {//直接找到天津并插入$(#tj).after($(#fk));})//****使用内部插入法 把反恐li移动天津后$(#b2).click(function () {//找到city这个父元素将反恐添加到内部的最后$(#city).append($(#fk))})})/script
/head
body
您喜欢的城市:br
ul idcityli idbj namebeijing北京/lili idsh nameshanghai上海/lili idtj nametianjin天津/li
/ul您爱好的游戏:br
ul idgameli idfk namefakong反恐/lili idcq namechuangqi传奇/li
/ul
input typebutton idb1 value使用after插入法 把反恐li移动天津后/br/br/
input typebutton idb2 value使用append插入法 把反恐li移动天津后/br/br/
/body
/html 3.删除节点
1.基本介绍 2.代码实例
!DOCTYPE html
html langen
headmeta charsetUTF-8title删除节点-应用实例/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//*****删除所有p$(#b1).click(function () {$(p).remove();})//***所有p清空$(#b2).click(function () {$(p).empty();})//****删除上海这个li$(#b3).click(function (){$(#sh).remove();})});/script
/head
body
您喜欢的城市:br
ul idcityli idbj namebeijing北京/lili idsh nameshanghai上海/lili idtj nametianjin天津/li
/ul您爱好的游戏:br
ul idgameli idfk namefakong反恐/lili idcq namechuangqi传奇/li
/ulpHello/p how are pyou?/pp nametestHello, spanPerson/span a href#and person/a/pinput typebutton value删除所有p idb1/
input typebutton value所有p清空 idb2/
input typebutton value删除上海这个li idb3/
/body
/html 4.复制节点
1.基本介绍 2.代码实例
!DOCTYPE html
html langen
headmeta charsetUTF-8title复制节点-应用实例/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript$(function () {//点击p, 弹出文本信息$(p).click(function () {//隐式的传入this-p的dom对象alert(段落的内容 $(this).text())})//克隆p, 插入到按钮后面//1. $(p).clone() 表示克隆p元素但是没有复制事件//2. $(p).clone(true) 表示克隆p元素同时复制事件$(p).clone(true).insertAfter($(button))})/script
/head
body
button保存/button
brbrbrbrbr
///br
p段落1/p
p段落2/p
p段落3/p
p段落4/p
p段落5/p
/body
/html 5.替换节点
1.基本介绍 2.代码实例
!DOCTYPE html
html langen
headmeta charsetUTF-8title替换节点-应用实例/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {$(#1).click(function () {//将p使用超链接替换$(p).replaceWith(a href\www.baidu.com\点击跳转到百度/abr)})$(#2).click(function () {//将p使用dom对象替换var $button $(buttondom对象按钮/buttonbr);$(p).replaceWith($button)})});/script
/head
body
h1节点替换/h1
pHello/p
pjquery/p
pWorld/p
button id1点击使用超链接替换/button
button id2点击使用dom对象替换/button
/body
/html 2.属性操作 3..class样式操作
1.基本介绍 2.代码实例
!DOCTYPE html
html langen
headmeta charsetUTF-8title查找节点/titlestyle typetext/cssdiv {width: 140px;height: 140px;margin: 20px;float: left;border: #000 1px solid;background: red;}.one {width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float: left;font-size: 17px;font-family: Roman;}/stylescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//获取 class 和设置 class 都可以使用 attr() 方法来完成.(给id 为first添加 .one 样式)$(#b1).click(function () {$(#first).attr(class, one);})//追加样式: addClass()$(#b2).click(function () {$(#first).addClass(one);})//移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class$(#b3).click(function () {$(#first).removeClass(one);})//切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它$(#b4).click(function () {$(#first).toggleClass(one);})//判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false$(#b5).click(function () {alert($(#first).hasClass(one))})});/script
/head
body
input typebutton value获取 class 和设置 class 都可以使用 attr() 方法来完成(给id 为first添加 .one 样式)idb1/br/br/
input typebutton value追加样式: addClass() (给id 为first添加 .one 样式) idb2/br/br/
input typebuttonvalue移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给id 为first删除 .one 样式) idb3/br/br/
input typebuttonvalue切换样式: toggleClass() (给id 为first切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它idb4/br/br/
input typebuttonvalue判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 falseidb5/br/br/
div idfirstfirst/div
div idsecondsecond/div
/body
/html 4.获取HTML文本和值
1.基本介绍 2.案例 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js/script !-- 确保添加了jQuery库 --script$(function () {//input绑定失去焦点事件检查用户是否填写信息了$(input).blur(function () {if ($(this).val() ) { //没有信息则填入value请输入用户名$(this).val(请输入用户名);}})//input绑定获取焦点事件清空value$(input).focus(function () {if ($(this).val() 请输入用户名) {//清空val$(this).val();}})})/script
/head
body
input typetext value请输入用户名
button登录/button
/body
/html 5.常用遍历节点方法
1.基本介绍 2. 代码实例
!DOCTYPE html
html langen
headmeta charsetUTF-8title常用遍历节点方法-应用实例/titlestyle typetext/cssdiv, span {width: 140px;height: 60px;margin: 20px;background: #9999CC;border: #000 1px solid;float: left;font-size: 17px;font-family: Roman;}/stylescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//**查找所有子元素中的一个class 为 one 的div的子元素)$(#b1).click(function () {var $children $(div[classone]).children().eq(1);//这里的$children是方法返回的不是自己遍历的所以返回的是jquery对象而不是dom对象alert($children.text())})//***获取后面的同辈div元素class 为 two 的div的)$(#b2).click(function () {var nextAll $(div[classone]).nextAll();//自己遍历一下返回的就是dom对象了$(this)转化成jquery对象nextAll.each(function () {console.log($(this).text())})})//**获取前面的同辈div元素class 为 one 的div的)$(#b3).click(function () {var prevAll $(div[classone]).prevAll();//获取紧邻前面的一个同辈元素var prev $(div[classone]).prev();alert(prev.text())prevAll.each(function () {console.log($(this).text())})})//**获取所有的同辈div元素class 为 one 的div的)$(#b4).click(function () {$(div[classone]).siblings().filter(div).each(function () { //filter可以过滤console.log($(this).text())})})})/script
/head
body
input typebutton value查找所有子元素 (class 为 one 的div的) idb1/br/br/
input typebutton value获取后面的同辈元素 (class 为 one 的div的) idb2/br/br/
input typebutton value获取前面的同辈元素 (class 为 one 的div的) idb3/br/br/
input typebutton value获取所有的同辈元素 (class 为 one 的div的) idb4/
hr/
divccccccc
/divp classoneccccccc
/pdiv classonedfsddiv idoneXXXXXXXXX one/divdiv idtwoXXXXXXXXX two/divdiv idthreeXXXXXXXXX three/divdiv idfourXXXXXXXXX four/div
/div
divtttttttttt
/div
divaaaaaaa
/div
divbbbbbb/div
phello, pp/p
/body
/html 6.CSS-DOM操作
1.基本介绍 2.代码实例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlecss-dom操作/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {$(#b1).click(function () {//获取图片widthvar width $(img).width();alert(width)//获取偏移对象从而获取偏移量var offset $(img).offset();alert(top offset.top)alert(left offset.left)})})/script
/head
body
br/br/br/
hello,world~img src../image/1.png width200
button idb1 typebutton获取图片信息/button
/body
/html 7.多选框应用案例
1.题目 2.代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title多选框应用/titlestyle typetext/cssBODY {font-size: 12px;margin: 0px 0px 0px 0px;overflow-x: auto;overflow-y: auto;background-color: #B8D3F4;}.default_input {border: 1px solid #666666;height: 18px;font-size: 12px;}.default_input2 {border: 1px solid #666666;height: 18px;font-size: 12px;}.nowrite_input {border: 1px solid #849EB5;height: 18px;font-size: 12px;background-color: #EBEAE7;color: #9E9A9E;}.default_list {font-size: 12px;border: 1px solid #849EB5;}.default_textarea {font-size: 12px;border: 1px solid #849EB5;}.nowrite_textarea {border: 1px solid #849EB5;font-size: 12px;background-color: #EBEAE7;color: #9E9A9E;}.wordtd5 {font-size: 12px;text-align: center;vertical-align: top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #b8c4f4;}.wordtd {font-size: 12px;text-align: left;vertical-align: top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #b8c4f4;}.wordtd_1 {font-size: 12px;vertical-align: top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #516CD6;color: #fff;}.wordtd_2 {font-size: 12px;text-align: right;vertical-align: top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #64BDF9;}.wordtd_3 {font-size: 12px;text-align: right;vertical-align: top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #F1DD34;}.inputtd {font-size: 12px;vertical-align: top;padding-top: 3px;padding-right: 3px;padding-bottom: 3px;padding-left: 3px;}.inputtd2 {text-align: center;font-size: 12px;vertical-align: top;padding-top: 3px;padding-right: 3px;padding-bottom: 3px;padding-left: 3px;}.tablebg {font-size: 12px;}.tb {border-collapse: collapse;border: 1px outset #999999;background-color: #FFFFFF;}.td2 {line-height: 22px;text-align: center;background-color: #F6F6F6;}.td3 {background-color: #B8D3F4;text-align: center;line-height: 20px;width: 100px;}.td4 {background-color: #F6F6F6;line-height: 20px;}.td5 {border: #000000 solid;border-right-width: 0px;border-left-width: 0px;border-top-width: 0px;border-bottom-width: 1px;}.tb td {font-size: 12px;border: 2px groove #ffffff;}.noborder {border: none;}.button {border: 1px ridge #ffffff;line-height: 18px;height: 20px;width: 45px;padding-top: 0px;background: #CBDAF7;color: #000000;font-size: 9pt;}.textarea {font-family: Arial, Helvetica, sans-serif, ??;font-size: 9pt;color: #000000;border-bottom-width: 1px;border-top-style: none;border-right-style: none;border-bottom-style: solid;border-left-style: none;border-bottom-color: #000000;background-color: transparent;text-align: left}/stylescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//为所有option绑定双击事件$(select option).dblclick(function () {//根据父元素决定插入到哪个地方var attr $(this).parent().attr(id);if (attr first) {$(#second).append($(this))}if (attr second) {$(#first).append($(this))}});//绑定第一个按钮$(#add).click(function () {//找到被选中的按钮内部插入到右边var $first $(#first option:checked);$first.each(function () {//找到右边的下拉框内部插入$(#second).append($(this))})})//绑定第二个按钮$(#add_all).click(function () {//找到左边的所有子元素var $children $(#first).children()//遍历插入到右边的下拉框$children.each(function () {$(#second).append($(this))})})//绑定第三个按钮$(#remove).click(function () {//找到右边被选中的按钮内部插入到左边var $second $(#second option:checked);$second.each(function () {$(#first).append($(this))})})//绑定第四个按钮$(#remove_all).click(function () {//找到所有右边的元素遍历内部插入左边var $children $(#second).children();$children.each(function () {$(#first).append($(this))})})})/script
/head
body
div styleborder:1px dashed #E6E6E6;margin:50px 0px 0px 50px; width:350px; height:260px; background-color:#E6E6E6;table width285 height169 border0 alignleft cellpadding0 cellspacing0stylemargin:15px 0px 0px 15px;trtd width126!--multiplemultiple 能同时选择多个 size10 确定下拉选的长度--select namefirst size10 multiplemultiple classtd3 idfirstoption value选项1选项1/optionoption value选项2选项2/optionoption value选项3选项3/optionoption value选项4选项4/optionoption value选项5选项5/optionoption value选项6选项6/optionoption value选项7选项7/optionoption value选项8选项8/option/select/tdtd width69 valignmiddleinput nameadd idadd typebutton classbutton value--/input nameadd_all idadd_all typebutton classbutton value/input nameremove idremove typebutton classbutton valuelt;--/input nameremove_all idremove_all typebutton classbutton valuelt;//tdtd width127 alignleftselect namesecond size10 multiplemultiple classtd3 idsecondoption value选项9选项9/option/select/td/tr/table
/div
/body
/html 8.页面加载完毕触发方式 9.作业
1.作业一 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript$(function () {//为按钮绑定点击事件$(button).click(function () {//返回选中的个数以及选中的信息var $input $(input[namesport]:checked);var res 您选中的信息是; //将信息存储在这个String里//遍历选中的信息if ($input) { //只要不是空就遍历$input.each(function () {res $(this).val();})res 个数是 $input.length;alert(res)}})})/script/head
body
input typecheckbox namesport value篮球篮球br
input typecheckbox namesport value排球排球br
input typecheckbox namesport value羽毛球羽毛球br
input typecheckbox namesport value乒乓球乒乓球br
button选中的个数/button
/body
/html 2.作业二 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript$(function () {//绑定第一个按钮$(button).eq(0).click(function () {//使单选下拉框的2号被选中$(select[namesel1] option[valuese2]).attr(selected, true);})//绑定第二个按钮$(button).eq(1).click(function () {//使多选下拉框的2号和5号被选中$(select[namesel2] option).eq(1).attr(selected, true)$(select[namesel2] option).eq(4).attr(selected, true)})//绑定第三个按钮$(button).eq(2).click(function () {//使复选框的复选2和复选4被选中$(:checkbox:odd).attr(checked, true) //过滤checkbox和偶数})//绑定第四个按钮$(button).eq(3).click(function () {//使单选框的单选2被选中$(:radio:eq(1)).attr(checked, true)})//绑定第五个按钮$(button).eq(4).click(function () {//打印已经选中的值var $selected $(:selected);$selected.each(function () {console.log($(this).text())})var $checked $(input:checked);$checked.each(function () {console.log($(this).val())})})})/script
/head
body
button使单选下拉框的2号被选中/button
br
button使多选下拉框的2号和5号被选中/button
br
button使复选框的复选2和复选4被选中/button
br
button使单选框的单选2被选中/button
br
button打印已经选中的值/button
brbr
select namesel1option valuese11号/optionoption valuese22号/optionoption valuese33号/optionoption valuese44号/optionoption valuese55号/option
/selectbrbr
select namesel2 multiplemultiple styleheight: 100pxoption valuesem11号/optionoption valuesem22号/optionoption valuesem33号/optionoption valuesem44号/optionoption valuesem55号/option
/selectbrbr
input typecheckbox value复选1 namech复选1
input typecheckbox value复选2 namech复选2
input typecheckbox value复选3 namech复选3
input typecheckbox value复选4 namech复选4brbr
input typeradio namera value单选1单选1
input typeradio namera value单选2单选2
input typeradio namera value单选3单选3
/body
/html 3.作业三处理布尔属性使用prop !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript$(function () {//绑定第一个按钮$(button:eq(0)).click(function () {$(input).prop(checked, true)})//绑定第二个按钮$(button:eq(1)).click(function () {$(input).prop(checked, false)})//绑定第三个按钮$(button:eq(2)).click(function () {//遍历按钮反选$(input).each(function () {if ($(this).prop(checked)) {$(this).prop(checked, false)}else {$(this).prop(checked, true)}})})})/script
/head
body
h4请选择您的爱好/h4
input typecheckbox namech valuech1足球
input typecheckbox namech valuech2篮球
input typecheckbox namech valuech3游泳
input typecheckbox namech valuech4唱歌br
button全选/buttonnbsp;nbsp;
button全不选/buttonnbsp;nbsp;
button反选/button
/body
/html 4.作业四 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript$(function () {//绑定提交按钮$(input[typesubmit]).click(function () {//获取三个按钮信息var name $(input:eq(0)).val();var email $(input:eq(1)).val();var num $(input:eq(2)).val();//创建一个table记录var $tr $(trtd name /tdtd email /tdtd num /tdtda href#delete/a/td/tr);//内部插入$(table).append($tr);})// 使用事件委托绑定动态生成的超链接点击事件$(table).on(click, a, function () {var $name $(this).closest(tr).find(td:first).text();//找到名字var isConfirmed confirm(是否要删除名字为 $name 的行);if(isConfirmed) {// 执行删除操作例如移除当前行$(this).closest(tr).remove();}});})/script
/head
body
h4用户前台管理系统/h4
姓名input typetext
emailinput typetext
电话input typetext
input typesubmit value提交
hr
table width700 border2px stylebackground: #b3d4fc;trth姓名/ththemail/thth电话/thth删除操作/th/tr
/table
/body
/html
1.添加 2.删除
