做网站用那种数据库,深圳html5网站建设,网站 预算,设计专业干货推荐网站查找节点, 修改属性
查找属性节点: 查找到所需要的元素之后, 可以调用jQuery对象的attr()方法用来 设置/返回 它的各种属性值 设置属性值 $(“img”).attr(“width”, “300”);返回属性值 $(“img”).attr(“width”); 创建节点
创建节点: 使用jQuery的工厂函数$(): $(html标…查找节点, 修改属性
查找属性节点: 查找到所需要的元素之后, 可以调用jQuery对象的attr()方法用来 设置/返回 它的各种属性值 设置属性值 $(“img”).attr(“width”, “300”);返回属性值 $(“img”).attr(“width”); 创建节点
创建节点: 使用jQuery的工厂函数$(): $(html标签); 会根据传入的html标记字符串创建一个jQuery对象并返回.动态创建的新元素节点不会自动地添加到文档中, 而是需要使用其它方法将其插入到文档中当创建单个元素时, 需要注意闭合标签和使用标准的XHTML格式. 例如创建一个p元素, 可以使用$(“p/”)或者$(“p/p”), 但不能使用$(“p”)或$(“/p”)创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建 第1组方法(内部插入法) append(content): 向每个匹配的元素的内部的结尾处追加内容 A.append(B) 解读: (1) A, B都是Jquery对象; (2) 表示把B对象插入到A对象内部的结尾处; (3) 结果是: B对象成为了A对象的子元素/子节点appendTo(content): 将每个匹配的元素追加到指定元素中的内部结尾处 A.appendTo(B) 解读: (1) A, B都是Jquery对象; (2) 表示把A对象插入到B对象内部的结尾处; (3) 结果是: A对象成为了B对象的子元素/节点prepend(content): 向每个匹配的元素的内部的开始处插入内容 A.prepend(B) 解读: (1) A, B都是Jquery对象; (2) 表示把B对象插入到A对象内部的开始处; (3) 结果是: B对象成为了A对象的子元素/节点prependTo(content): 将每个匹配的元素插入到指定元素中的内部开始处 A.prependTo(B) 解读: (1) A, B都是Jquery对象; (2) 表示把A对象插入到B对象内部的开始处; (3) 结果是: A对象成为了B对象的子元素/节点 总结: 内部插入法是在元素内插入内容(该内容成为该元素的子元素或子节点) 第2组方法(外部插入法) after(content): 在每个匹配的元素之后插入内容 A.after(B) 解读: A, B都是Jquery对象; (2) 把B对象插入到A对象的后面; (3) 结果是: B对象成为A对象的兄弟节点before(content): 在每个匹配的元素之前插入内容 A.before(B) 解读: A, B都是Jquery对象; (2) 把B对象插入到A对象的前面; (3) 结果是: B对象成为A对象的兄弟节点insertAfter(content): 把所有匹配的元素插入到另一个指定的元素集合的后面 A.insertAfter(B) 解读: (1) A, B都是Jquery对象; (2) 把A对象插入到B对象的后面; (3) 结果是: A对象成为B对象的后一个兄弟节点insertBefore(content): 把所有匹配的元素插入到另一个指定的元素集合的前面 A.insertBefore(B) 解读: (1) A, B都是Jquery对象; (2) 把A对象插入到B对象的前面; (3) 结果是: A对象成为B对象的前一个兄弟节点 总结: 外部插入法是在元素的外面插入内容(其内容变为元素的兄弟节点) 注意: 以上方法不但能将新的DOM元素插入到文档中, 也能对原有的DOM元素进行移动
!DOCTYPE html
html langen
headmeta charsetUTF-8title创建节点/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//添加重庆li到上海后面(用传统的dom方式)$(#btn1).click(function () {//1.创建重庆li元素var cq_li document.createElement(li);//2.设置属性和内容cq_li.setAttribute(id, cq);cq_li.setAttribute(name, chongqing);cq_li.innerText 重庆;//3.添加到指定元素的后面var sh_li document.getElementById(sh);sh_li.append(cq_li);});//添加重庆li到上海后面(jquery完成节点添加)$(#btn2).click(function () {var $cq_li $(li idcq namechongqing重庆/li);//内部插入法, 相当于li idsh nameshanghai上海li idcq namechongqing重庆/li/li$cq_li.appendTo($(#sh));//外部插入法, 更合适$cq_li.insertAfter($(#sh));});//添加济宁li到北京前(jquery完成节点添加)$(#btn3).click(function () {//创建济宁livar $jn_li $(li idjn namejiNing济宁/li);//添加到北京li前面, 此时不能使用内部插入法, 必须使用外部插入法, 不信看效果// $(#bj).prepend($jn_li);$jn_li.insertBefore($(#bj));});//添加成都li到北京和上海之间(jquery完成节点添加)$(#btn4).click(function () {//创建成都livar $cd_li $(li idcd namechengdu成都/li);// $cd_li.insertAfter($(#bj));$cd_li.insertBefore($(#sh));})//添加成都li到吉林前面(jquery完成节点添加)$(#btn5).click(function () {//创建成都livar $cd_li $(li idcd namechengdu成都/li);$cd_li.insertBefore($(#jl));})})/script
/head
body
ul idcityli idbj namebeijing北京/lili idsh nameshanghai上海/lili idjl namejilin吉林/lili idxj namexinjiang新疆/li
/ul
input typebutton idbtn1 value添加重庆li到上海后面(用传统的dom方式)
input typebutton idbtn2 value添加重庆li到上海后面(jquery完成节点添加)
input typebutton idbtn3 value添加济宁li到北京前(jquery完成节点添加)
input typebutton idbtn4 value添加成都li到北京和上海之间(jquery完成节点添加)
input typebutton idbtn5 value添加成都li到吉林前面(jquery完成节点添加)
/body
/html移动节点
!DOCTYPE html
html langen
headmeta charsetUTF-8title移动节点/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//使用aflter插入法, 把地下城li移动到穿越火线后面$(#btn1).click(function () {//(1)使用外部插入法, 把地下城li移动到穿越火线后面(推荐)$(#dnf).insertAfter($(#jl));//(2)使用内部插入法, 把地下城li移动到穿越火线后面(不推荐)$(#dnf).appendTo($(#jl));});})/script
/head
body
您喜欢的城市:
ul idcityli idbj namebeijing北京/lili idsh nameshanghai上海/lili idjl namejilin吉林/li
/ul
您爱好的游戏:
ul idgameli iddnf namednf地下城/lili idcf namecf穿越火线/li
/ul
input typebutton idbtn1 value使用aflter插入法, 把地下城li移动到穿越火线后面
/body
/html删除节点
remove(): 从DOM中删除所有匹配的元素, 传入的参数用于根据jQuery表达式来筛选元素. 当某个节点用remove()方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用empty(): 清空节点 - 清空元素中的所有后代节点(包括文本节点, 但不包含属性节点)
!DOCTYPE html
html langen
headmeta charsetUTF-8title删除节点/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//删除所有p元素$(#btn1).click(function () {$(p).remove();//这不是jquery方法});//所有p清空$(#btn2).click(function () {$(p).empty();});//删除上海这个li$(#btn3).click(function () {//这个是完全移除$(#sh).remove();//这个会保留li idsh nameshanghai/li$(#sh).empty();})});/script
/head
body
您喜欢的城市:
ul idcityli idbj namebeijing北京/lili idsh nameshanghai上海/lili idjl namejilin吉林/li
/ul
p你好 /p 刀剑神域 p亚丝娜/p
p nametest你好 span刀剑神域/span a桐谷和人/a/p
input typebutton idbtn1 value删除所有p元素
input typebutton idbtn2 value所有p清空
input typebutton idbtn3 value删除上海这个li
/body
/html复制节点
clone(): 克隆匹配的DOM元素, 返回值为克隆后的副本, 但此时复制的新节点不具有任何行为, 也就是说它没有把事件复制过来clone(true): 复制元素的同时也复制元素中的事件
!DOCTYPE html
html langen
headmeta charsetUTF-8title克隆节点/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//点击p, 弹出文本信息$(p).click(function () {//隐式的传入一个this-p的dom对象alert(段落的内容 $(this).text());})//克隆p, 插入到按钮后面//1.$(p).clone() 表示克隆p元素, 但没有复制事件$(p).clone().insertAfter($(button));//2.$(p).cloine() 表示克隆p元素, 同时复制事件$(p).clone(true).insertAfter($(button));});/script
/head
body
button保存/button
///
p段落1/p
p段落2/p
p段落3/p
p段落4/p
p段落5/p
/body
/html替换节点
replaceWith(): 将所有匹配的元素都替换为指定的HTML或DOM元素. A.replaceWith(B) 用B来替换A(这里的B可以是HTML元素或DOM元素)replaceAll(): 颠倒了的replaceWith()方法 A.replaceAll(B) 用A去替换B(这里的A只能是DOM元素, B一般是DOM元素, 还未遇到是HTML元素的情况) 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失 !DOCTYPE html
html langen
headmeta charsetUTF-8title替换节点/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//1.将p元素替换为button元素(HTML或DOM元素)// (1)$(p).replaceWith(button亚丝娜/button);// (2)var $button $(button value亚丝娜亚丝娜/button);$button.click(function () {alert($(this).val());})$(p).replaceWith($button);// (3)$button.replaceAll($(p));//2.将p元素替换为超链接// (1)$(p).replaceWith(a hrefhttp://www.baidu.com超链接/a);// (2)var $a $(a hrefhttp://www.baidu.com超链接/a);$(p).replaceWith($a);// (3)$a.replaceAll($(p));});/script
/head
body
h1节点替换/h1
p你好/p
p刀剑神域/p
p亚丝娜/p
/body
/html属性操作
attr(): 获取属性和设置属性attr() 传递一个参数时, 表示获取某个元素指定的属性attr() 传递两个参数时, 表示为某个元素设置指定属性的值jQuery中有很多方法都是一个函数实现获取和设置. 比如: attr(), html(), text(), val(), height(), width(), css()等. 示例: var $button $(“buttonspan亚丝娜/span/button”); alert($button.text()): - 亚丝娜 alert($button.html()): - span亚丝娜/span $(this).text(“桐人”); - button标签会变成 button桐人/button $(this).html(“桐人”); - button标签会变成 buttonspan桐人/span/button removeAttr(): 删除指定元素的属性
样式操作
获取class和设置class: class是元素的一个属性, 所以获取class和设置lass都可以使用attr()方法来完成追加样式: addClass()移除样式: removeClass() — 从匹配的元素中删除全部或指定的class切换样式: toggleClass() — 控制样式上的重复切换. 如果类名存在则删除它, 如果类名不存在则添加它判断是否具有某个样式: hasClass() — 判断元素中是否含有某个class. 如果有, 返回true; 如果没有,返回false
!DOCTYPE html
html langen
headmeta charsetUTF-8title样式操作/titlestyleinput {height: 40px;margin-top: 5px;}div {width: 200px;height: 200px;margin: 20px;float: left;}.one {background-color: pink;}/stylescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//1.获取class和设置class都可以使用attr()方法来完成--给id为first的元素添加.one样式$(#btn01).click(function () {$(#first).attr(class, one);})//2.追加样式: addClass()--给id为first的元素添加.one样式$(#btn02).click(function () {$(#first).addClass(one);})//3.移除样式: removeClass()--从匹配的元素中删除全部或指定的样式$(#btn03).click(function () {$(#first).removeClass(one);})//4.切换样式: toggleClass()--给id为first的元素切换.one样式(如果类名存在就删除, 如果类名不存在就添加)$(#btn04).click(function () {$(#first).toggleClass(one);})//5.判断是否含有某个样式: hasClass()--判断元素中是否含有某个class.如果有,返回true;如果没有,返回false$(#btn05).click(function () {alert($(#first).hasClass(one));})});/script
/head
body
input typebutton value获取class和设置class都可以使用attr()方法来完成--给id为first的元素添加.one样式 idbtn01/br/
input typebutton value追加样式: addClass()--给id为first的元素添加.one样式 idbtn02/br/
input typebutton value移除样式: removeClass()--从匹配的元素中删除全部或指定的样式 idbtn03/br/
input typebutton value切换样式: toggleClass()--给id为first的元素切换.one样式 idbtn04/br/
input typebutton value判断是否含有某个样式: hasClass()--判断元素中是否含有某个class.如果有,返回true;如果没有,返回false idbtn05/br/
div idfirstfirst/div
div idsecondsecond/div
/body
/html获取html 文本和值 设置或返回所选元素的内容(包括HTML标记): html()读取或设置所选元素的文本内容: text(). 该方法既可以用于HTML也可以用于XML文档读取或设置某个元素的值: val(). 该方法类似JavaScript中的value属性, 对于文本框input, 下拉框select, 单选框radio, 该方法可以返回元素的值 this.defaultValue: 表单元素的默认值属性(this是dom对象, 不是Jquery对象) !DOCTYPE html
html langen
headmeta charsetUTF-8titleval()练习/titlescript typetext/javascript src../script/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//1.给btn01绑定一个获取焦点事件// 当用户把光标定位到输入框btn01时, 该事件就会被触发$(#btn01).focus(function () {//获取-判断//获取到当前值var currentVal $(this).val();//如果当前值就是默认值, 就清空, 让用户输入自己的值if (currentVal this.defaultValue) {$(this).val();}})//2.给btn01绑定一个失去焦点事件// 当用户的光标离开输入框, 就会触发该事件$(#btn01).blur(function () {//获取当前值var currentVal $(this).val();//如果当前值为,说明用户没有输入内容//就恢复显示默认信息if (currentVal ) {$(this).val(this.defaultValue);}})});/script
/head
body
input typetext value用户邮箱/手机号/用户名 idbtn01/br/
input typepassword value idbtn02/br/
input typebutton value登录 idbtn03/
/body
/html常用遍历节点方法 常用遍历节点方法 取得匹配元素的所有子元素组成的集合: children() . 该方法只考虑子元素而不考虑任何后代元素(隔代元素不考虑)$(selector).find(filter)方法返回被选元素的后代元素, 包括直接子元素取得匹配元素后面的同辈元素的集合: next()(紧邻)/nextAll()(所有)取得匹配元素前面的同辈元素的集合: prev()(紧邻)/prevAll()(所有)取得匹配元素前后所有的同辈元素: siblings()获取指定的第几个元素: nextAll().eq(index)对获取到的同辈元素进行过滤 nextAll().filter(“标签”)取得匹配元素的直接父元素: parent()取得匹配元素的所有祖先元素: parents(“元素标签”) 参考 html langen
headmeta charsetUTF-8title遍历元素/titlestyleinput[typebutton] {height: 30px;}/stylescript typetext/javascript srcscript/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//1.查找class为one的div元素的所有子元素$(#btn01).click(function () {$(div.one).children().each(function () {alert(子div的内容是 $(this).text());})//获取指定第几个子元素, eq(1), 表示获取第2个子元素(索引从0开始)alert($(div.one).children().filter(div).eq(1).text());})//2.查找class为one的div元素的class为five的后代元素$(#btn02).click(function () {alert($(div.one).find(div:eq(5)).text());})//3.获取后面的同辈div元素(class为one的div元素)$(#btn03).click(function () {$(div.one).nextAll().filter(div).each(function () {alert(后面同辈的div的内容是 $(this).text());})//获取指定第几个元素, eq(1), 表示获取第2个子元素(索引从0开始)alert($(div.one).nextAll().filter(div).eq(1).text());//如果我们希望获取后面紧邻的同辈元素alert(后面紧邻的同辈元素 $(div.one).next().text());});//4.获取前面的同辈div元素(class为one的div元素)$(#btn04).click(function () {$(div.one).prevAll().filter(div).each(function () {alert(前面同辈的div的内容是 $(this).text());})//规则: 越靠近$(this)元素,索引越小; 反之越远离, 索引越大//获取前一个紧邻的元素: eq(0), 表示获取第1个子元素(索引从0开始)alert($(div.one).prevAll().filter(div).eq(0).text());//如果我们希望获取前面紧邻的同辈元素alert(前面紧邻的同辈元素 $(div.one).prev().text());});//5.获取所有同辈的div元素(class为one的div元素)$(#btn05).click(function () {$(div.one).siblings().filter(div).each(function () {alert(所有同辈的div的内容是 $(this).text());});//获取第几个元素, eq(2), 表示获取第3个子元素(索引从0开始)alert($(div.one).siblings().filter(div).eq(2).text());})//6.获取父元素及祖先元素(class为five的div元素)$(#btn06).click(function () {//(1)获取父元素: 匹配元素集合中每个元素的直接父元素var $div $(div.five).parent();//返回的是一个对象alert($div.html());//获取父元素的父元素, 返回的是一个对象var parent $(div.five).parent().parent();//获取到了classone的祖先元素alert(parent.attr(class));//(2)获取祖先元素: 返回的是一个数组, 当前匹配元素的所有祖先元素, 包括父元素var parents $(div.five).parents(div);parents.each(function () {//获取到了idfive, classone的元素alert($(this).html());})})})/script
/head
body
input typebutton value查找class为one的div元素的所有子元素 idbtn01/br/
input typebutton value查找class为one的div元素的class为five的后代元素 idbtn02/br/
input typebutton value获取后面的同辈div元素(class为one的div元素) idbtn03/br/
input typebutton value获取前面的同辈div元素(class为one的div元素) idbtn04/br/
input typebutton value获取所有的同辈div元素(class为one的div元素) idbtn05/br/
input typebutton value获取父元素及祖先元素(class为five的div元素) idbtn06/br/
hr/
divaaaaaaaaaaaa/div
div classonediv idonexxxxxxxx one/divdiv idtwoxxxxxxxx two/divdiv idthreexxxxxxxx three/divdiv idfourxxxxxxxx four/divdiv idfivexxxxxxxx five_01div classfivexxxxxxxx five_02/div/div
/div
divbbbbbbbbbbbb/div
divcccccccccccc/div
divdddddddddddd/div
/body
/html
