浙江省建设质量协会网站,河南住房和城乡建设厅,做设备出口网站,古城区建设局网站零.前言
JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客
一.使用JQuery对HTML操作
1.1获取元素内容、属性
使用JQ可以操作元素的“内容”
text()#xff1a;设置或返回元素的文本内容html()#xff1a;设置或返回元素的内容(包括HTML标记)val()#…零.前言
JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客
一.使用JQuery对HTML操作
1.1获取元素内容、属性
使用JQ可以操作元素的“内容”
text()设置或返回元素的文本内容html()设置或返回元素的内容(包括HTML标记)val()设置货返回表单字段的值
我们来看一个例子用来区分“text()”和“html()”
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://code.jquery.com/jquery-3.7.1.min.js/script
/head
bodyp idsample这是一个b示例/b文本/pbutton idb1点我显示p的文本内容(text)/buttonbutton idb2点我显示p的内容(html)/buttonscript$(document).ready(function(){$(#b1).click(function(){alert(文本内容(text)是: $(#sample).text())});$(#b2).click(function(){alert(内容(html)是: $(#sample).html())});});/script
/body
/html
效果图 点击(text)按钮显示 点击(html)按钮显示 结论“text”返回的只有元素的“文本内容”(除标签以外的普通字符)而“html”会将元素的“所有内容”(不管有没有特殊字符)完整返回。
再来看看“val”的使用“val”常与input输入框搭配使用“val”用来获取输入字段的值
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://code.jquery.com/jquery-3.7.1.min.js/script
/head
bodyinput typetext idsample value鞠婧祎button idb1点我获取val的值/buttonscript$(document).ready(function(){$(#b1).click(function(){alert(val的值是: $(#sample).val());})});/script
/body
/html
效果 点击后 1.2获取元素属性
使用“attr()”方法获取属性值
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://code.jquery.com/jquery-3.7.1.min.js/script
/head
bodybutton idb1点我获取我的id/buttonscript$(document).ready(function(){$(#b1).click(function(){alert(按钮的id属性值是: $(#b1).attr(id));})});/script
/body
/html
效果 点击后 二.使用JQuery改变元素内容
2.1无返回值的改变元素内容
我们仍然使用上面所说的“text()”、“html()”、“val()”、“attr()”来对应的改变内容
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://code.jquery.com/jquery-3.7.1.min.js/script
/head
bodyp idtest1这是一个文本内容/pp idtest2这是一个b标签内容/b/pinput typetext idtest3 value鞠婧祎brbrbutton idbt1改变文本内容/buttonbutton idbt2改变标签内容/buttonbutton idbt3改变输入框内容/buttonbutton idbt4点我改变输入框的属性为“密码”格式/buttonscript$(document).ready(function(){$(#bt1).click(function(){$(#test1).text(文本内容被改变了);})$(#bt2).click(function(){$(#test2).html(标签内容被b改变了/b);})$(#bt3).click(function(){$(#test3).val(输入框内容被改变了);})$(#bt4).click(function(){$(#test3).attr(type,password);})});/script
/body
/html
点击前 点击后 2.2有返回值的改变元素内容使用回调函数
上面四种改变元素的方法都有回调函数
回调函数由两个参数
备选元素列表中当前元素的下标以及原始值
然后以函数新值返回您希望使用的字符串 $(#btn1).click(function(){$(#test1).text(function(i,origText){return Old text: origText New text: Hello world!(index: i );});
});$(#btn2).click(function(){$(#test2).html(function(i,origText){return Old html: origText New html: Hello bworld!/b(index: i );});
});其中“i”是当前元素下标“origText”是原始(旧)值
具体可参考jQuery 设置内容和属性 (w3school.com.cn)
三.使用JQuery添加元素
3.1四种添加元素的JQ方法
append()在被选元素的结尾插入内容prepend()在被选元素的开头插入内容after()在被选元素之后插入内容before()在备选元素之前插入内容
append()、prepend()方法可以在“p、h1-h6”等“文本标签”前后添加内容也可以在“ol”前后添加“li”标签
!DOCTYPE html
html
head
script src/jquery/jquery-1.11.1.min.js
/script
script
$(document).ready(function(){$(#btn1).click(function(){$(p).append( bAppended text/b.);});$(#btn2).click(function(){$(ol).append(liAppended item/li);});
});
/script
/headbody
pThis is a paragraph./p
pThis is another paragraph./p
ol
liList item 1/li
liList item 2/li
liList item 3/li
/ol
button idbtn1追加文本/button
button idbtn2追加列表项/button
/body
/html效果 值得注意的是append()、prepend()方法可以一次接受无限数量的元素并添加。
使用方法
append/prepend(element1,element2,element3,......)
after()、before()在元素的前面或者后面插入新内容(ps:这里是在整个元素的前面或者后面与append、pretend在元素内容的开头或结尾插入有本质区别这里相当于插入了新的元素标签)
!DOCTYPE html
html
head
script src/jquery/jquery-1.11.1.min.js/script
script
$(document).ready(function(){$(#btn1).click(function(){$(#123).before(bBefore/b);});$(#btn2).click(function(){$(#123).after(iAfter/i);});
});
/script
/headbody
p id1236666/p
brbr
button idbtn1在前面添加文本/button
button idbtn2在后面添加文本/button
/body
/html点击前 点击后 “after”与“before”同样可以一次接收多个参数来添加多个内容
after/before(element1,element2,element3,....)
四.使用JQuery删除元素
删除元素和内容一般可以使用以下两个JQ方法
remove()删除被选元素(及其子元素)empty()从被选元素中删除子元素
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://code.jquery.com/jquery-3.7.1.min.js/script
/head
bodydiv iddiv1 styleheight: 200px;width: 300px;border: 1px solid black;background-color: yellow;p这是一个段落/pp这是另一个段落/pp这是最后一个段落/p/divbutton idbt1点击删除div元素/buttonbutton idbt2点击清空div元素/buttonscript$(document).ready(function(){$(#bt1).click(function(){$(#div1).remove();})$(#bt2).click(function(){$(#div1).empty();})});/script
/body
/html
点击前 点击删除div元素后 点击清空div元素后 五.使用JQ操作CSS
5.1使用JQ操作CSS类
addClass()给被选元素添加一个或多个CSS类removeClass()对被选元素删除一个或多个CSS类toggleClass()对被选元素进行添加/删除类的切换操作
使用方法 $(element).addClass(class1,class2,class3,....) $(element).removeClass(class1,class2,class3,....) “element”表示元素“class”表示类名字
下面我们创建两个CSS类(选择器)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://code.jquery.com/jquery-3.7.1.min.js/scriptstyle.n{font-weight: bold;font-size: large;}.color{color: blue;}/style
/head
bodyp这是一个段落/ph1这是一个段落/h1h2这是一个段落/h2button idbt1点击向p,h1,h2添加n类/buttonbutton idbt2点击向p,h1,h2添加color类/buttonscript$(document).ready(function(){$(#bt1).click(function(){$(p,h1,h2).addClass(n);})$(#bt2).click(function(){$(p,h1,h2).addClass(color);})});/script
/body
/html
点击前 点击后 5.2使用JQ操作CSS()
css()方法设置或返回元素的一个或多个样式属性
“返回CSS属性” css(propertyname);设置CSS属性 css(propertyname,value); “设置多个CSS属性” css({propertyname:value,propertyname:value,...}); 例如
$(p).css({background-color:yellow,font-size:200%});
