网站备案背景幕布,企业网站建设心得,西安航空城建设发展集团网站,淮南网络科技有限公司jQuery的DOM操作
1.jQuery操作内容
jQuery操作内容 1. text() 获取或修改文本内容 类似于 dom.innerText 2. html() 获取或修改html内容 类似 dom.innerHTML
注意: 1. text() 是获取设置所有 2. html() 是获取第一个,设置所有
!DOCTYPE html
html langzh…jQuery的DOM操作
1.jQuery操作内容
jQuery操作内容 1. text() 获取或修改文本内容 类似于 dom.innerText 2. html() 获取或修改html内容 类似 dom.innerHTML
注意: 1. text() 是获取设置所有 2. html() 是获取第一个,设置所有
!DOCTYPE html
html langzh
headmeta charsetUTF-8title13-jquery操作内容/title!--引入Jquery库文件--script typetext/javascript srcjs/jquery-1.8.3.js /script
/head
body
spanspan1/span
spanspan2/span
spanspan3/span
divdiv1br//div
divdiv2br//div
divdiv3br//div
script//获取所有spanvar $span $(span);//获取所有divvar $div $(div);
// 1.获取纯文本内容console.log($span.text());//获取所有span中的文本:span1span2span3console.log($div.text());//获取所有div中的文本:div1div2div3// 2.获取html内容console.log($span.html());//只能获取第一个标签体:span1console.log($div.html());//只能获取第一个标签体:div1br/// 3.设置纯文本内容$span.text(h1h1标题标签/h1);//设置为文本内容$div.text(h1h1标题标签/h1);//设置为文本内容// 4.设置html内容$span.html(h1h1标题标签/h1);//设置标签体为标签显示$div.html(h1h1标题标签/h1);//设置标签体为标签显示
/script
/body
/html
2.jQuery操作属性(掌握)
jQuery操作属性 val() 获取或修改表单控件的value值 等于dom.value prop() 获取或修改原生属性值(checkedselected) attr() 获取或修改自定义属性值 等于 dom.setAttribute() dom.getAttribute()
!DOCTYPE html
htmlheadmeta charsetUTF-8title获取属性/title /headbodyinput idmyinput typetext nameusername value张三 /br / ulli idbj namebeijing xxxyyy北京/lili idtj nametianjin天津/li/ulinput typecheckbox idhobby checkedchecked//bodyscript typetext/javascript srcjs/jquery-1.8.3.js /scriptscript typetext/javascript//获取张三/** 使用jQuery对象中的val()函数,获取value的值,给value设置* 获取: jQuery对象.val();* 设置: jQuery对象.val(新值);*///1.获取id是myinput的标签对象var value $(#myinput).val();//alert(value);//2.改变input输入框的value的值$(#myinput).val(李四);/** jQuery中的函数attr()获取属性值,设置属性值* 获取:jQuery对象.attr(属性名);* 设置:jQuery对象.attr(属性名,属性值 ); *///获取北京节点的name属性值//alert($(#bj).attr(name));//beijing//设置北京节点的name属性的值为dabeijing//$(#bj).attr(name,dabeijing);//alert($(#bj).attr(name));//dabeijing//新增北京节点的discription属性 属性值是didu//alert($(#bj).attr(discription));//undefined//$(#bj).attr(discription,didu);//alert($(#bj).attr(discription));//didu//删除北京节点的name属性并检验name属性是否存在/** 使用jQuery对象中的函数removeAttr(name)删除指定的属性*///$(#bj).removeAttr(name);//alert($(#bj).attr(name));//undefined//获得hobby的的选中状态alert($(#hobby).attr(checked));//选中:checked 未选中:undefined/** jQuery对象中的函数:* prop(属性名); 获取的选中的状态 选中:true,未选中false*/alert($(#hobby).prop(checked)); //选中:true,未选中false/script
/html
3.jQuery操作样式(掌握)
jQuery操作样式 1. css() 获取或者修改CSS样式 用法 css(样式名) 获取一个样式 等于 dom.style.驼峰样式名 css(样式名,样式值) 设置一个样式 dom.style.驼峰样式名样式值 css({样式名:样式值,样式名:样式值}) 批量设置样式 dom.style.cssText 样式名:样式值;样式名:样式值; addClass() 添加一个样式 removeClass() 移除一个样式 toggleClass() 切换一个样式
!DOCTYPE html
html langzh
headmeta charsetUTF-8title15-jquery操作样式/title!--引入Jquery库文件--script srcjs/jquery-1.8.3.js/script
/head
body
style#p1{ background-color: red;}.mp{color:green}.mpp{background-color: lightgray;}
/style
p idp11. 设置一个css样式/p
p idp2 2. 批量设置css样式/p
p idp3 classmpp3. 通过class设置样式/p
p idp44. 切换class样式/p
input typebutton value切换样式 idbut /
scriptlet $p1 $(#p1);//获取p1let $p2 $(#p2);//获取p2let $p3 $(#p3);//获取p3let $p4 $(#p4);//获取p4// 1. css() 获取或设置css样式//设置一个样式$p1.css(color,white);//设置字体白色//批量设置样式$p2.css({color:green,background-color:gold,border:1px solid red});//批量设置//获取一个样式console.log($p2.css(background-color));// 2. addClass() 添加一个class样式$p4.addClass(mp);//添加一个样式$p4.addClass(mpp);//添加一个样式// 3. removeClass() 移除一个class$p4.removeClass(mpp);// 4. toggleClass() 切换一个class$(#but).click(function(){$p4.toggleClass(mpp);});
/script
/body
/html
4.jQuery创建和插入对象 语法
API方法解释append(element)添加成最后一个子元素两者之间是父子关系prepend(element)添加成第一个子元素两者之间是父子关系$(A id11aaaa/A)创建A元素对象,同时可以给对象添加属性和标签体before(element)添加到当前元素的前面两者之间是兄弟关系after(element)添加到当前元素的后面两者之间是兄弟关系 代码演示
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
htmlheadtitle内部插入脚本/titlemeta http-equivcontent-type contenttext/html; charsetUTF-8script src../js/jquery-3.3.1.js/script/headbodyul idcityli idbj namebeijing北京/lili idtj nametianjin天津/lili idcq namechongqing重庆/li/ulul idloveli idfk namefankong反恐/lili idxj namexingji星际/li/uldiv idfoo1Hello1/div /bodyscript typetext/javascript/**将反恐放置到city的后面*/$(#city).append($(#fk));/**将反恐放置到city的最前面*/$(#city).prepend($(#fk));//将反恐插入到天津后面$(#tj).after($(#fk));//将反恐插入到天津前面$(#tj).before($(#fk));//将反恐插入到天津后面$(#fk).insertAfter($(#tj));//将反恐插入到天津前面$(#fk).insertBefore($(#tj));/script
/html
5.jQuery删除对象 语法
API方法解释remove()删除指定元素empty()清空指定元素的所有子元素 代码演示
!DOCTYPE HTML
htmlheadtitle删除节点/titlemeta http-equivcontent-type contenttext/html; charsetUTF-8script typetext/javascript src../js/jquery-3.3.1.min.js/script/headbodyul idcityli idbj namebeijing北京/lili idtj nametianjin天津/lili idcq namechongqing重庆/li/ulp classhelloHello/p how are pyou?/p/bodyscript typetext/javascript//删除li idbj namebeijing北京/li$(#bj).remove();//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).$(#city).empty();/script
/html
jQuery综合案例
1 、案例-表格隔行换色 效果 代码演示
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascript src../js/jquery-3.3.1.min.js/scriptscript typetext/javascript$(function() {$(tr:gt(1):even).css(background-color, pink);$(tr:gt(1):odd).css(background-color, yellow);});/script/headbodytable idtab1 border1 width800 aligncentertrtd colspan5input typebutton value删除/td/trtr stylebackground-color: #999999;thinput typecheckbox/thth分类ID/thth分类名称/thth分类描述/thth操作/th/trtrtdinput typecheckbox/tdtd1/tdtd手机数码/tdtd手机数码类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd2/tdtd电脑办公/tdtd电脑办公类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd3/tdtd鞋靴箱包/tdtd鞋靴箱包类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd4/tdtd家居饰品/tdtd家居饰品类商品/tdtda href修改/a|a href删除/a/td/tr/table/body
/html
2、案例-复选框全选全不选 效果 代码演示
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascript src../js/jquery-3.3.1.min.js/scriptscript typetext/javascript//创建一个checkbox全选框的单击事件的响应函数function selectAll(obj){//通过class属性值获取所有的其他复选框,设置checked属性值和全选一样$(.itemSelect).prop(checked,obj.checked);}/script/headbodytable idtab1 border1 width800 aligncentertrtd colspan5input typebutton value删除/td/trtrthinput typecheckbox onclickselectAll(this)/thth分类ID/thth分类名称/thth分类描述/thth操作/th/trtrtdinput typecheckbox classitemSelect/tdtd1/tdtd手机数码/tdtd手机数码类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox classitemSelect/tdtd2/tdtd电脑办公/tdtd电脑办公类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox classitemSelect/tdtd3/tdtd鞋靴箱包/tdtd鞋靴箱包类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox classitemSelect/tdtd4/tdtd家居饰品/tdtd家居饰品类商品/tdtda href修改/a|a href删除/a/td/tr/table/body
/html
